SAPUI5中支持利用Component对组件进行封装。想封装一个组件，Component的基本代码如下：

1. sap.ui.define([  
2.    "sap/ui/core/UIComponent"], function (UIComponent) {  
3.    "use strict";  
4.    return UIComponent.extend("", {  
5.   
6.       init : function () {  
7.          // call the init function of the parent  
8.          UIComponent.prototype.init.apply(this, arguments);  
9.     }  
10.    });  
11. });

分析一下Component框架的代码含义，引用了core中的UIComponent基础空间，组件的编写在UIComponent.extend中进行，即进行扩展。

我们尝试将之前的应用封装成一个组件，新建Component.js文件，代码如下：

1. sap.ui.define([  
2.    "sap/ui/core/UIComponent",  
3.    "sap/ui/model/json/JSONModel",  
4.    "sap/ui/model/resource/ResourceModel"], function (UIComponent, JSONModel, ResourceModel) {  
5.    "use strict";  
6.    return UIComponent.extend("sap.ui.demo.wt.Component", {  
7.             metadata : {  
8.         rootView: "sap.ui.demo.wt.view.App"  
9.     },  
10.         init : function () {  
11.          UIComponent.prototype.init.apply(this, arguments);  
12.          var oData = {  
13.             recipient : {  
14.                name : "World"  
15.             }  
16.          };  
17.          var oModel = new JSONModel(oData);  
18.          this.setModel(oModel);  
19.          var i18nModel = new ResourceModel({  
20.             bundleName : "sap.ui.demo.wt.i18n.i18n"  
21.          });  
22.          this.setModel(i18nModel, "i18n");  
23.       }  
24.    });  
25. });

我们将原来Controller.js文件中的初始化函数、数据模型绑定配置等工作都放到了Component.js当中，相应的修改Controller.js文件：

1. sap.ui.define([  
2.    "sap/ui/core/mvc/Controller",  
3.    "sap/m/MessageToast"], function (Controller, MessageToast) {  
4.    "use strict";  
5.    return Controller.extend("sap.ui.demo.wt.controller.App", {  
6.       onShowHello : function () {  
7.          var oBundle = this.getView().getModel("i18n").getResourceBundle();  
8.          var sRecipient = this.getView().getModel().getProperty("/recipient/name");  
9.          var sMsg = oBundle.getText("helloMsg", [sRecipient]);  
10.          MessageToast.show(sMsg);  
11.       }  
12.    });  
13. });

在Controller.js文件中，只保留本项目中需要使用的各个函数，这样使得项目中各个文件的逻辑更清晰了。

在index.html中，我们可以直接调用Component：

1. <script>  
2.          sap.ui.getCore().attachInit(function () {  
3.             new sap.ui.core.ComponentContainer(  
4.                name : "sap.ui.demo.wt"  
5.             }).placeAt("content");  
6.          });  
7.       </script>

在SAP Fiori应用中，每个应用都有一个配置文件即manifest.json，里面定义了一些列的项目配置信息。本例的manifest文件如下：

1. {  
2.   "_version": "1.1.0",  
3.   "sap.app": {  
4.     "_version": "1.1.0",  
5.     "id": "sap.ui.demo.wt",//定义命名空间  
6.     "type": "application",  
7.     "i18n": "i18n/i18n.properties",  
8.     "title": "{{appTitle}}",  
9.     "description": "{{appDescription}}",  
10.     "applicationVersion": {  
11.       "version": "1.0.0"  
12.     },  
13.     "ach": "CA-UI5-DOC"  
14.   },  
15.   "sap.ui": {  
16.     "_version": "1.1.0",  
17.     "technology": "UI5",  
18.     "deviceTypes": {  
19.       "desktop": true,  
20.       "tablet": true,  
21.       "phone": true  
22.     },  
23.     "supportedThemes": [  
24.       "sap_bluecrystal"  
25.     ]  
26.   },  
27.   "sap.ui5": {  
28.     "_version": "1.1.0",  
29.     "rootView": "sap.ui.demo.wt.view.App",  
30.     "dependencies": {  
31.       "minUI5Version": "1.30",  
32.       "libs": {  
33.         "sap.m": {}  
34.       }  
35.     },  
36.     "models": {  
37.       "i18n": {  
38.         "type": "sap.ui.model.resource.ResourceModel",  
39.         "settings": {  
40.           "bundleName": "sap.ui.demo.wt.i18n.i18n"  
41.         }  
42.       }  
43.     }  
44.   }}

可以看到，manifest.json文件定义了包括ui5版本、数据模型等一系列基本信息。在以后的开发过程中该配置文件会被不断完善。

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML5/CSS3频道，获取更多WEB前端知识！