Step 10: Descriptor for Applications

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

webapp\index.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

posted @ 2021-08-19 14:23  小石王  阅读(910)  评论(1)  编辑  收藏  举报