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版本号、数据模型等一系列基本信息。
在以后的开发过程中该配置文件会被不断完好。
HTML5开发移动web应用——SAP UI5篇(7)的更多相关文章
- HTML5开发移动web应用——SAP UI5篇(6)
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...
- HTML5开发移动web应用——SAP UI5篇(8)
本次对之前学习的SAP UI5框架知识进行简单小结.以及重点部分知识的梳理. 1.在UI5使用过程中,命名空间的概念非常重要. 2.一般的sap组件引用格式例如以下: sap.ui.define([ ...
- HTML5开发移动web应用——SAP UI5篇(9)
之前我们对于app的构建都是基于显示的.如今我们来格式化一下,引入很多其它的SAP UI5组件概念.这使得APP的一个界面更有层次性.更像是一个手机应用的界面,而且更好地使用SAP UI5中提供的功能 ...
- HTML5开发移动web应用——Sencha Touch篇(10)
我们把数据可视化出来,为的就是进行一些针对数据的操作. 这里介绍一下DataView的排序功能和搜索功能. 掌握这两个技能,能够让写出的数据界面内的数据能够依据要求进行排序,能够进行数据的搜索显示灯功 ...
- HTML5开发移动web应用——Sencha Touch篇(7)
Sencha Touch中的Ext.DomHelper组件能够方便的实现对元素的追加或重写操作 演示样例: launch:function(){ function appendDom(){ Ext.D ...
- HTML5开发移动web应用——Sencha Touch篇(8)
DataView是Sencha Touch中最重要的组件,用于数据的可视化.数据可视化的重要性不言而喻,能够讲不论什么数据以形象的方式展示给用户. 眼下,怎样更好地可视化是很多公司或框架都在追求的. ...
- 【翻译】HTML5开发——轻量级Web Database存储库html5sql.js
方式1: html5sql官方网址:http://html5sql.com/ 阅读之前,先看W3C关于WEB Database的一段话: Beware. This specification is n ...
- HTML5开发移动web应用—JQuery Mobile(1)
JQuery Mobile是一个简单易用的web移动app开发框架.使用它就像使用jQuery一样,引入必要的文件就可以. 最基础的jQuery Mobile文件的结构代码例如以下: <body ...
- HTML5开发移动web应用—JQuery Mobile(2)-导航栏和页脚
导航栏部分的代码一般放置在data-role为header的div的内. <div data-role="header"> <a href="#&quo ...
随机推荐
- jQuery中关于如何使用animate自定义动画
动画 animate() 01.animate()方法的简单使用 有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就是强大的animate方法了. 操作一个元素执行3秒的淡入动画,对比下一 ...
- C语言标准库头文件
<assert.h><complex.h><ctype.h><errno.h><fenv.h><float.h><intt ...
- jQuery封装的选项卡方法
********************************************************2018/3/15更新********************************* ...
- Skeleton Screen — 骨架屏
用户体验一直是前端开发需要考虑的重要部分,在数据请求时常见到锁屏的loading动画,而现在越来越多的产品倾向于使用Skeleton Screen Loading(骨架屏)替代,以优化用户体验. Sk ...
- eclipse安装python开发pydev插件
eclipse安装python开发pydev插件 下载eclipse的python开发插件pydev http://pan.baidu.com/s/1qXHt8pI 下载python.exe,并安装. ...
- Java_Web三大框架之Hibernate+jsp+HQL分页查询
分页查询无处不在.使用Hibernate+jsp+HQL进行分页查询. 第一步:编写房屋实体类和House.hbm.xml映射. /* * 房屋实体类 */ public class House { ...
- 【转载】HTTP 请求头与请求体
原文地址: https://segmentfault.com/a/1190000006689767 HTTP Request HTTP 的请求报文分为三个部分 请求行.请求头和请求体,格式如图:一个典 ...
- Python元类(metaclass)以及元类实现单例模式
这里将一篇写的非常好的文章基本照搬过来吧,这是一篇在Stack overflow上很热的帖子,我看http://blog.jobbole.com/21351/这篇博客对其进行了翻译. 一.理解类也是对 ...
- 想学Python?这里有一个最全面的职位分析
Python从2015年开始,一直处于火爆的趋势,目前Python工程师超越Java.Web前端等岗位,起薪在15K左右,目前不管是小公司还是知名大公司都在热招中. 当然,每个城市对岗位的需求也不尽相 ...
- 从 UI 交互角度说语音识别产品
语言是人类进化的主要特征,而人工智能拥有了说话的能力也是科技进步的一个特征.在很多科幻的电影里面,我们可以看到人工智能的身影.在电影 her 里面见到的人工智能,真的让人叹为观止,他可以随意的和你聊天 ...