SAP OPEN UI5 Step 9: Component Configuration

转载请联系vx：xiaoshitou5854

到目前，是用view替换的content（oView.placeAt("content");），view的定义，和view的实例化不在一个文件里；还有一个问题，在App.controller.js里实例化了Model，并把model设定到了view里。App.controller.js更应该控制页面的事件，所以应该把Model相关的代码拿出去，比较推荐的做法是，把view的定义和view使用到的model放到一起，也就是组件化。

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.html里调用了index.js文件，在此文件里调用了ComponentContainer。
问题来了，那么ComponentContainer是在哪个js文件里实现的呢？
答案是Component.js。
那么又有问题了，Component.js在哪个目录呢？
name: "sap.ui.demo.walkthrough",定义了Component.js所在的目录
data-sap-ui-resourceroots='{
"sap.ui.demo.walkthrough": "./"
}'>
定义了sap.ui.demo.walkthrough所代表的目录，这里就是根目录，也就是webapp直下。
如果name: "sap.ui.demo.walkthrough.comp",那么Component.js所在的目录就是webapp/comp
当调用了ComponentContainer，UI5就会去找Component.js文件，并执行Component.js的init方法。

webapp/Component.js (New)

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

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

• 以前是在index.js里初始化view，现在由Component.js初始化view。用metadata知道view的代码文件，view的类型，view的加载是同步还异步
  以前是在App.controller.js里初始化model，现在由Component.js初始化Model。
  在UIComponent的构造方法里，使用metadata实例化view，实例化JSONModel，ResourceModel，以前要把Model放到view里，现在不用了，放到自己的里面就可以了。虽然没有放到view里，但也能从view里取得出来。

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

从controller里删除init方法

总结：当在浏览器里访问index.html后，程序执行的顺序
1，index.html里使用index.js，所以执行index.js
2，index.js里调用了ComponentContainer，所以就执行了Component.js，Component.js里初始化了rootview，就是App.view.xml，，然后替换掉index.html里的id为Content的DOM节点，所以画面就显示了，显示了model的值和i18n里的值。
3，当点击按钮后，执行App.view.xml里关联的App.controller.js的onShowHello方法。

本人微信：xiaoshitou5854