SAPUI5 Walkthrough教程（九）——Component Configuration组件配置

前面介绍了模型-视图-控制器（MVC）的所有三个部分之后，现在来到SAPUI5的另一个重要结构方面。
在本教程中，我们将所有 UI 资产封装在一个独立于 index.html 文件的组件中。与上一个教程页面展示没有变化。

创建webapp/Component.js文件：

sap.ui.define([
   "sap/ui/core/UIComponent",
   "sap/ui/model/json/JSONModel",
   "sap/ui/model/resource/ResourceModel"
], function (UIComponent, JSONModel, ResourceModel) {
   "use strict";
   return UIComponent.extend("sap.ui.demo.walkthrough.Component", {
      metadata : {
         "interfaces": ["sap.ui.core.IAsyncContentCreation"],
         "rootView": {
            "viewName": "sap.ui.demo.walkthrough.view.App",
            "type": "XML",
            /*"async": true, // implicitly set via the sap.ui.core.IAsyncContentCreation interface*/
            "id": "app"
         }
      },
      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);

         // set i18n model
         var i18nModel = new ResourceModel({
            bundleName: "sap.ui.demo.walkthrough.i18n.i18n"
         });
         this.setModel(i18nModel, "i18n");
      }
   });
});

Component.js 文件将保存我们的应用程序设置。我们的组件继承自基类 sap.ui.core.UIComponent，并且必须在重写的 init 方法中对基类的 init 函数进行超级调用。
Component.js文件现在由两部分组成：新的元数据部分和之前引入的初始化函数，该函数在初始化组件时由 SAPUI5 自动调用。
元数据部分定义了对根视图的引用，因此组件现在管理应用程序视图的显示，而不是像以前那样直接在index.js文件中显示根视图。它还实现了 sap.ui.core.IAsyncContentCreation 接口，该接口允许完全异步创建组件。此接口隐式将组件的 rootView 及其路由器配置都设置为“async”：true。
在 init 函数中，我们像之前在应用程序控制器中一样实例化数据模型和 i18n 模型。请注意，模型是直接在组件上设置的，而不是在组件的根视图上设置的。但是，由于嵌套控件会自动从其父控件继承模型，因此模型在视图上也可用。

webapp/controller/App.controller.js

sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/m/MessageToast"
], function (Controller, MessageToast) {
   "use strict";
   return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
      onShowHello : function () {
         // read msg from i18n model
         var oBundle = this.getView().getModel("i18n").getResourceBundle();
         var sRecipient = this.getView().getModel().getProperty("/recipient/name");
         var sMsg = oBundle.getText("helloMsg", [sRecipient]);
         // show message
         MessageToast.show(sMsg);
      }
   });
});

App.controller.js删除了onInit 函数和所需的模块。此操作已在组件中完成。

webapp\index.js

sap.ui.define([
	"sap/ui/core/ComponentContainer"
], function (ComponentContainer) {
	"use strict";

	new ComponentContainer({
		name: "sap.ui.demo.walkthrough",
		settings : {
			id : "walkthrough"
		},
		async: true
	}).placeAt("content");
});

这是代码结构：页面展示效果跟上个教程一样