SAPUI5 Walkthrough Step 9: Component Configuration

https://sapui5.hana.ondemand.com/#/topic/4cfa60872dca462cb87148ccd0d948ee

在这一步中，我们将所有的UI资源都封装在component组件中，而不依赖index.html。

 

新建Component文件， 完整路径 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("zdemo_step1.Component", {
        //设置metadata信息，里面包含我们默认的视图
        metadata: {
            "rootView": {
                "viewName": "zdemo_step1.view.App",
                "type": "XML",
                "async": true,
                "id": "app"
            }
        },
        init: function() {
            // Component组件初始化设置
            UIComponent.prototype.init.apply(this, arguments);
            // 给Component组件 设置模型jsonModel
            var oJsonData = {
                recipient: {
                    name: "World"
                }
            };
            var oJSONModel = new JSONModel(oJsonData);
            this.setModel(oJSONModel, "jsonModel");
            //给Component组件 设置模型i18n
            var i18nModel = new ResourceModel({
                bundleName: "zdemo_step1.i18n.i18n"
            });
            this.setModel(i18nModel, "i18n");
        }
    });
});

 

 

 

修改App.controller.js文件，删除里面的onInit（其实是移动到Component.js中），代码如下

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageToast",
    "sap/ui/model/json/JSONModel",
    "sap/ui/model/resource/ResourceModel"
    ], function(Controller, MessageToast, JSONModel, ResourceModel){
        
    return Controller.extend("zdemo_step1.controller.App",{
        onShowHello: function(){
            var oBundle = this.getView().getModel("i18n").getResourceBundle();
            var sRecipient = this.getView().getModel("jsonModel").getProperty("/recipient/name");
            var sMsg = oBundle.getText("helloMsg", [sRecipient]);
            MessageToast.show(sMsg);
        }
    });
});

 

修改index.js文件

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

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

以前我们在index.js文件中，创建了视图控件并显示我们的 App 视图。现在我们只需要创建一个组件容器，他会自动加载我们的Component.js文件，并打开里面rootView视图

 

执行(结果和上一步一样，只是代码的组织方式改变了）