Step 10: Descriptor for Applications
所有特定于应用程序的配置设置现在将进一步放在名为 manifest.json 的单独描述符文件中。 这清楚地将应用程序编码与配置设置分开，使我们的应用程序更加灵活。 所有 SAP Fiori 应用程序都实现为组件，并带有描述符文件，以便托管在 SAP Fiori 启动板中
manifest.json
{
"_version": "1.12.0",
"sap.app": {
"id": "sap.ui.demo.walkthrough",
"type": "application",
"i18n": "i18n/i18n.properties",
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"applicationVersion": {
"version": "1.0.0"
}
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"rootView": {
"viewName": "sap.ui.demo.walkthrough.view.App",
"type": "XML",
"id": "app"
},
"dependencies": {
"minUI5Version": "1.60",
"libs": {
"sap.m": {}
}
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "sap.ui.demo.walkthrough.i18n.i18n",
"supportedLocales": [""],
"fallbackLocale": ""
}
}
}
}
}
manifest.json放在webapp目录下，用来初始化component
webappindex.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SAPUI5 Walkthrough</title>
<script
id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-resourceroots='{
"sap.ui.demo.walkthrough": "./"
}'
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true">
</script>
</head>
<body class="sapUiBody" id="content">
<div data-sap-ui-component data-name="sap.ui.demo.walkthrough" data-id="container" data-settings='{"id" : "walkthrough"}'></div>
</body>
</html>
使用ComponentSupport，替换了module:sap/ui/demo/walkthrough/index，也就是初始化的js不使用原来的index.js了，而是使用manifest.json。
- 注意div里的data-sap-ui-component，ui5
会自动替换掉所以加了data-sap-ui-component的DOM - data-name属性是告诉指明Component.js文件所在的路径的，必须写对
- data-id和data-settings是可选项，对debug和stable id有帮助
webapp/Component.js
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/model/json/JSONModel"
], function (UIComponent, JSONModel) {
"use strict";
return UIComponent.extend("sap.ui.demo.walkthrough.Component", {
metadata : {
interfaces: ["sap.ui.core.IAsyncContentCreation"],
manifest: "json"
},
init : function () {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
// set data model
var oData = {
recipient : {
name : "World"
}
};
var oModel = new JSONModel(oData);
this.setModel(oModel);
}
});
});
metadata里删除掉了rootView属性，因为rootView在manifest.json里定义了。
vx：xiaoshitou5854