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

本次对之前学习的SAP UI5框架知识进行简单小结。以及重点部分知识的梳理。

1、在UI5使用过程中,命名空间的概念非常重要。

2、一般的sap组件引用格式例如以下:

sap.ui.define([
   "sap/ui/core/UIComponent",
   "sap/ui/model/json/JSONModel",
   "sap/ui/model/resource/ResourceModel"], function (UIComponent, JSONModel, ResourceModel) 

define后每引用sap的一个组件。后面的function就要传入一个相应的參数。

3、下面是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的构建流程如上,extend UIComponent这个框架,里面init为初始化函数。里面能够设定其它属性(包含配置模型等),例如以下:

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 () {
         // call the init function of the parent
         UIComponent.prototype.init.apply(this, arguments);
         // set data model
         var oData = {
            recipient : {
               name : "World"
            }
         };
         var oModel = new JSONModel(oData);
         this.setModel(oModel);

         // set i18n model
         var i18nModel = new ResourceModel({
            bundleName : "sap.ui.demo.wt.i18n.i18n"
         });
         this.setModel(i18nModel, "i18n");
      }
   });});

4、注意manifest文件在一个应用中的重要性,manifest.json是app的配置文件。

时间: 2024-10-21 01:59:36

HTML5开发移动web应用——SAP UI5篇(8)的相关文章

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

之前我们对于app的构建都是基于显示的,现在我们来格式化一下,引入更多的SAP UI5组件概念.这使得APP的一个界面更有层次性,更像是一个手机应用的界面,并且更好地使用SAP UI5中提供的功能.每个不同的层次都有不同的功能. 首先修改App.view.xml文件代码: <mvc:View controllerName="sap.ui.demo.wt.controller.App" xmlns="sap.m" xmlns:mvc="sap.ui.c

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

HTML5开发移动web应用——Sencha Touch篇(12)

Sencha Touch同样可以使用地图.多媒体等插件. 1.Map组件 我们通过Ext.Map定义Map组件,其xtype为map.除了使用该插件外,还要调用Google的地图API所使用的js文件,代码如下: <script src="https://maps.google.com/maps/api/js?sensor=true"></script> 引入该文件后,我们就可以编写js代码来显示地图了: Ext.require('Ext.Map') Ext.a

HTML5开发移动web应用——Sencha Touch篇(7)

Sencha Touch中的Ext.DomHelper组件能够方便的实现对元素的追加或重写操作 演示样例: launch:function(){ function appendDom(){ Ext.DomHelper.append('my-div',{ id:'url-list', tag:'ul', //指定追加的元素种类 cn:[//或children.使用数组形式定义数组内的子元素 { tag:'li',, cn:[{ tag:'a', html:'google', href:'http:

HTML5开发移动web应用——Sencha Touch篇(8)

DataView是Sencha Touch中最重要的组件,用于数据的可视化.数据可视化的重要性不言而喻,可以讲任何数据以形象的方式展示给用户.目前,如何更好地可视化是许多公司或框架都在追求的.通过数据的可视化可以发现数据之间的规律,预测未来的情况.下面我们就看看Sencha Touch中是怎么进行数据可视化的. 由于DataView组件内容非常多,所以将在以后的一段时间内持续这一部分的学习. 首先废话不多说,直接上使用DataView组件的代码框架. launch:function(){ var

HTML5开发移动web应用——Sencha Touch篇(10)

我们把数据可视化出来,为的就是进行一些针对数据的操作.这里介绍一下DataView的排序功能和搜索功能.掌握这两个技能,可以让写出的数据界面内的数据能够根据要求进行排序,可以进行数据的搜索显示灯功能. 一.排序 当我们想根据数据的某一个字段排序时,可以调用sort方法: store.sort('lastName','asc'); 其中,store是我们定义好的数据仓库,调用sort方法进行排序.sort方法传入两个参数,第一个参数为按照哪个字段排序,第二个参数为升序还是降序. 如果想对多个字段进

【翻译】HTML5开发——轻量级Web Database存储库html5sql.js

方式1: html5sql官方网址:http://html5sql.com/ 阅读之前,先看W3C关于WEB Database的一段话: Beware. This specification is no longer in active maintenance and the Web Applications Working Group does not intend to maintain it further. 意味着WEB Database规范陷入僵局. html5sql官方网址:http

HTML5开发移动web应用—JQuery Mobile(1)

JQuery Mobile是一个简单易用的web移动app开发框架.使用它就像使用jQuery一样,引入必要的文件就可以. 最基础的jQuery Mobile文件的结构代码例如以下: <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>在此处插入标题</h1> </div> <d

HTML5开发移动web应用—JQuery Mobile(4)-事件

Jquery Mobile中提供了丰富的事件处理和检测机制. 1.滚动事件 在Jquery Mobile中,使用scrollStart和scrollStop事件来监听用户开始滚动和停止滚动的事件.以scrollStart为例,使用代码如下: $(document).on("scrollstart",function(){ alert("开始滚动!"); }); 2.界面相关的事件 一个页面从激活到加载完毕,在jquery mobile中共被分为四个部分的事件,它们分