SAPUI5学习第四天-----（06）MVC概念差不多了。下一步：Component Configuration！

Component Configuration

官网代码

在我们介绍了Model-View-Controller(MVC)概念的所有三个部分之后，我们现在来讨论SAPUI5的另一个重要的结构方面。

在这一步中，我们将把所有UI资源封装在一个独立于index.html文件的组件中。Component 是SAPUI5应用程序中使用的独立和可重用的部件。现在，每当我们访问资源时，我们将相对于组件(而不是相对于index.html)执行此操作。这种架构上的改变使我们的应用程序可以在比静态的index.html页面更灵活的环境中使用，比如在SAP Fiori launchpad这样的容器中。

此步骤的文件夹结构

完成此步骤后，您的项目结构将如图所示。现在我们将创建Component.js文件，并修改应用程序中的相关文件。

webapp/Component.js（新建）

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

      init : function () {
         // call the init function of the parent
         UIComponent.prototype.init.apply(this, arguments);
      }
   });
});

我们在webapp文件夹中创建了一个初始的Component.js文件，用于保存我们的应用程序设置。当组件被实例化时，SAPUI5会自动调用组件的init函数。我们的组件继承自基类sap.ui.core.UIComponent，并且必须在重写的init方法中对基类的init函数进行父级调用。

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 : {
         "rootView": {
            "viewName": "sap.ui.demo.walkthrough.view.App",
            "type": "XML",
            "async": true,
            "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文件现在由两部分组成:1、新的metadata(元数据)部分只定义对根视图(rootView)的引用，2、以及之前引入的初始化组件时调用的init函数。与之前在index.js文件中直接显示根视图不同，现在组件将管理应用视图的显示。

在init函数中，我们实例化了data模型和i18n模型，就像之前在App.controller中所做的那样。请注意，模型是直接在组件上设置的，而不是在组件的根视图上。但是，由于嵌套控件自动地从它们的父控件继承模型，模型也将在视图中可用。

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);
      }
   });
});

删除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");
});

现在我们创建了一个组件容器，而不是index.js中的视图，它根据组件配置为我们实例化视图。

约定：
该组件名为Component .js。
与应用的所有UI资源一起，该组件位于webapp文件夹中。
index.html文件位于webapp文件夹中，如果它被有效地使用。