首页前端开发HTMLHTML5开发移动web应用――SAP UI5篇(7)

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

时间2024-01-26 18:05:03发布访客分类HTML浏览330
导读：收集整理的这篇文章主要介绍了html5教程-HTML5开发移动web应用――SAP UI5篇(7 ，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。...
收集整理的这篇文章主要介绍了html5教程-HTML5开发移动web应用――SAP UI5篇(7)，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

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版本、数据模型等一系列基本信息。在以后的开发过程中该配置文件会被不断完善。

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教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

divHTMLletpost-format-gallerypptPropthis

若转载请注明出处： HTML5开发移动web应用――SAP UI5篇(7)
本文地址： https://pptw.com/jishu/587097.html
基于HTML5的3D网络拓扑树呈现 HTML5开发移动web应用――SAP UI5篇(6)

游客 回复需填写必要信息
↑