SAPUI5中支持 利用 component 对组件进行封装。想封装一个组件，Component的基本代码如下：
sap.ui. define ([ "sap/ui/core/UIComponent"], function (UIComponent) { "use strict"; return UIComponent.extend("", { in IT : function () { // call the init function of the parent UIComponent. PR ototy PE .init.apply(this, argument s); } }); });@H_ 304 _4@
分析一下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 .COM ponent", { metadata : { rootView: "sap.ui.demo.wt.view.App" }, init : function () { UIComponent.prototype.init.apply(this, arg uments); VAR oData = { recipient : { n am e : "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文件： &nbs p;
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.ht ML 中，我们可以直接调用Component：
<script> sap.ui.getCore().attachInit(function () { new sap.ui.core.ComponentCont ai ner( 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", "techno LOG y": "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": { " ;m inUI5Version": "1.30", "libs": { "sap.m": {} } }, "models": { "i18n": { "type": "sap.ui.model.resource.ResourceModel", "settings": { "bundleName": "sap.ui.demo.wt.i18n.i18n" } } } }}
可以看到，manifest. json文件 定义了包括ui5版本、数据模型等一 系列 基本信息。在以后的开发 过程中 该配置文件会被 不断 完善。 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版本、数据模型等一系列基本信息。在以后的开发过程中该配置文件会被不断完善。 觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-HTML5开发移动web应用――SAP UI5篇(7) 全部内容，希望文章能够帮你解决 html5教程-HTML5开发移动web应用――SAP UI5篇(7) 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-HTML5开发移动web应用――SAP UI5篇(7)的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did219255