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文件夹中,如果它被有效地使用。
转载:https://blog.csdn.net/qq_34060435/article/details/117411575