标签：
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.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"
}
}
}
}}标签：
原文地址：http://blog.csdn.net/fareise/article/details/50681034
