SAPUI5中支持利用Component对组件进行封装。想封装一个组件,Component的基本代码如下:
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);
}
});
});
分析一下Component框架的代码含义,引用了core中的UIComponent基础空间,组件的编写在UIComponent.extend中进行,即进行扩展。
我们尝试将之前的应用封装成一个组件,新建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.wt.Component", {
metadata : {
rootView: "sap.ui.demo.wt.view.App"
},
init : function () {
UIComponent.prototype.init.apply(this, arguments);
var oData = {
recipient : {
name : "World"
}
};
var oModel = new JSONModel(oData);
this.setModel(oModel);
var i18nModel = new ResourceModel({
bundleName : "sap.ui.demo.wt.i18n.i18n"
});
this.setModel(i18nModel, "i18n");
}
});
});
我们将原来Controller.js文件中的初始化函数、数据模型绑定配置等工作都放到了Component.js当中,相应的修改Controller.js文件:
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast"], function (Controller, MessageToast) {
"use strict";
return Controller.extend("sap.ui.demo.wt.controller.App", {
onShowHello : function () {
var oBundle = this.getView().getModel("i18n").getResourceBundle();
var sRecipient = this.getView().getModel().getProperty("/recipient/name");
var sMsg = oBundle.getText("helloMsg", [sRecipient]);
MessageToast.show(sMsg);
}
});
});
在Controller.js文件中,只保留本项目中需要使用的各个函数,这样使得项目中各个文件的逻辑更清晰了。
在index.html中,我们可以直接调用Component:
<script>
sap.ui.getCore().attachInit(function () {
new sap.ui.core.ComponentContainer(
name : "sap.ui.demo.wt"
}).placeAt("content");
});
</script>
在SAP Fiori应用中,每个应用都有一个配置文件即manifest.json,里面定义了一些列的项目配置信息。本例的manifest文件如下:
{
"_version": "1.1.0",
"sap.app": {
"_version": "1.1.0",
"id": "sap.ui.demo.wt",//定义命名空间
"type": "application",
"i18n": "i18n/i18n.properties",
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"applicationVersion": {
"version": "1.0.0"
},
"ach": "CA-UI5-DOC"
},
"sap.ui": {
"_version": "1.1.0",
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_bluecrystal"
]
},
"sap.ui5": {
"_version": "1.1.0",
"rootView": "sap.ui.demo.wt.view.App",
"dependencies": {
"minUI5Version": "1.30",
"libs": {
"sap.m": {}
}
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "sap.ui.demo.wt.i18n.i18n"
}
}
}
}}
可以看到,manifest.json文件定义了包括ui5版本、数据模型等一系列基本信息。在以后的开发过程中该配置文件会被不断完善。