HTML5开发移动web应用——SAP UI5篇(7)

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

sap.ui.define([   "sap/ui/core/uicomponent"], function (uicomponent) {   "u 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, resourcem美国 叙利亚odel) {   "u 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.tmodel(omodel);         var i18nmodel = new resourcemodel({            bundlename : "sap.ui.demo.wt.i18n.i18n"         });         this.tmodel(i18nmodel, "i18n");      }   });});

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

sap.ui.define([   "sap/ui/core/mvc/controller",   "sap/m/messagetoast"], function (controller, messagetoast) {   "u strict";   return controller.extend("sap.ui.demo.wt.controller.app", {      onshowhello : function () {         var obundle = this.getvi南方大学ew().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},"supported电影赵氏孤儿themes": [  "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","ttings": {  "bundlename": "sap.ui.demo.wt.i18n.i18n"}  }}  }}

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