前面介绍了模型-视图-控制器(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");
});
这是代码结构:页面展示效果跟上个教程一样