创建项目
参考 SAPUI5: UI Development Toolkit for HTML5
新建SAP UI5 Application Project
选择sap.m库，取消勾选创建view的选项
新建的项目如下，可以引用服务器的类库
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
同时定义了id，用的ui库，及ui主题模式
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
使用UI5最新的功能我们可以添加compatVersion，preload设置异步，UI5的资源在后台加载
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
创建Application与Page
下面的script标签中增加代码，sap.ui.getCore()获取SAP UI Library的核心Core对象，并attachInit绑定init事件，Core对象是单例模式，在任何地方都可以得到。attachInit中的function当UI5加载后立即执行，new sap.m.App创建Application，第一个参数为id，第二个为设置，sap.m.App继承自sap.m.NavContainer，initialPage来自于sap.m.NavContainer，传入一个control对象或id。
<script type="text/javascript">
sap.ui.getCore().attachInit(function () {
// create a mobile app and display page1 initially
var app = new sap.m.App("myApp", {
initialPage: "page1"
});
});
</script>
创建page1，content需要传入control对象，
var page1 = new sap.m.Page("page1", {
title : "Hello World",
showNavButton : false,
content : new sap.m.Button({
text : "Go to Page 2",
press : function () {
// navigate to page2
app.to("page2");
}
})
});
sap.m.NavContainer的to方法back方法可以实现导航到相应的page，通过app.addPage(page1).addPage(page2);将page添加到app，Control对象可以用placeAt方法将其放置于HTML document元素中。
XML View
新建view文件夹，创建一个简单的app view，参考默认命名空间sap.m，引用sap.ui.core.mvc为mvc别名。在view里面加了Text Control对象，每个control对象都有id名，如果没有系统运行时将自动生成
<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Text text="Hello World"/>
</mvc:View>
在index.html中，我们定义根目录别名sap.ui.demo.wt
data-sap-ui-resourceroots='{
"sap.ui.demo.wt": "./"
}'
初始化加载时，通过sap.ui.xmlview创建xmlview对象，xmlview继承自control，因此可以通过placeAt放到DOM元素上。viewName为路径名+文件名
sap.ui.getCore().attachInit(function () {
sap.ui.xmlview({
viewName : "sap.ui.demo.wt.view.App"
}).placeAt("content");
});
Controller
在xml view上通过controllerName="sap.ui.demo.wt.controller.App"来指定它对应的controller，在view中创建Button并绑定press的事件onShowHello，建立controller文件夹并创建app.controller.js文件。controller的定义如下
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("", {
});
});
sap.ui.define定义模块遵循了AMD规范，传入参数sModuleName?, aDependencies?, vFactory, bExport?在声明模块的时候制定所有的依赖模块(aDependencies)，并且当做形参传到vFactory中。sap.ui.core.mvc.Controller.extend方法传入ClassName，FNMetaImpl（metadata 对象的构造方法），返回创建的class并带上相应构造方法。
以下代码构造了sap.ui.demo.wt.controller.App模块，该模块扩展了Controller模块，构造方法中添加了onShowHello事件的实现方法
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("sap.ui.demo.wt.controller.App", {
onShowHello : function () {
// show a native JavaScript alert
alert("Hello World");
}
});
});
UI5中的资源文件常常参考定义为Module模块，扩展上面的代码，加入MessageToast模块
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 () {
MessageToast.show("Hello World");
}
});
});
AMD规范语法中，Controller和MessageToast加载完后，执行后面function函数，这样我们根据执行代码选择性地加载模块，提高了程序的性能。
在js模块程序中或其他HTML页面中，我们可以用sap.ui.require来加载
//同步加载
var JSONModel = sap.ui.require("sap/ui/model/json/JSONModel");
//异步加载
sap.ui.require(['sap/ui/model/json/JSONModel', 'sap/ui/core/UIComponent'],
function(JSONModel,UIComponent) {
var MyComponent = UIComponent.extend('MyComponent', {
});
});
JSON Model
在上面的controller中再添加JSONModel的依赖"sap/ui/model/json/JSONModel"，添加onInit事件的Handler方法，新建一个oData JSON对象，并创建JSONModel，onInit在Controller创建时触发，this在这里是controller对象，通过getView()获取当前view，view对象setModel方法绑定model
onInit : function () {
// set data model on view
var oData = {
recipient : {
name : "World"
}
};
var oModel = new JSONModel(oData);
this.getView().setModel(oModel);
},
回到view中，新建input控件,{…}中内容表明将由Model中的值替换，即数据绑定，/recipient/name是Model中的路径
<Input
value="{/recipient/name}"
description="Hello {/recipient/name}"
valueLiveUpdate="true"
width="60%"/>
翻译文本
创建i18n文件夹及i18n.properties文件
showHelloButtonText=Say Hello
helloMsg=Hello {0}
controller中引入依赖"sap/ui/model/resource/ResourceModel"
bundleName为i18n的完整路径，与前面JSONModel类似，将其绑定到Model，setModel通过第二个参数i18n指定模型的名称，在view.xml中通过text="{i18n>showHelloButtonText}"访问i18n Model中内容
var i18nModel = new ResourceModel({
bundleName: "sap.ui.demo.wt.i18n.i18n"
});
this.getView().setModel(i18nModel, "i18n");
var sRecipient = this.getView().getModel().getProperty("/recipient/name");得到JSON Model的/recipient/name路径下的值，var oBundle = this.getView().getModel("i18n").getResourceBundle();得到i18n Model的ResourceBundle对象，var sMsg = oBundle.getText("helloMsg", [sRecipient]);getText取Bundle对象的helloMsg文本，由于文本中定义了{0}，接收sRecipient的值，再通过MessageToast.show(sMsg);显示出来
onShowHello : function () {
// read msg from i18n model
var oBundle = this.getView().getModel("i18n").getResourceBundle();
var sRecipient = this.getView().getModel().getProperty("/recipient/name");
var sMsg = oBundle.getText("helloMsg", [sRecipient]);
// show message
MessageToast.show(sMsg);
}
组件配置
我们通过Component模块来管理开发的UI资源，定义Component.js文件如下，继承UIComponent模块。
sap.ui.define([
"sap/ui/core/UIComponent"
], function (UIComponent) {
"use strict";
return UIComponent.extend("sap.ui.demo.wt.Component", {
init : function () {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
}
});
});
将前面controller中设置JSONModel及ResourceModel放到init事件方法中来，同时新添加了metadata，指定了rootview
metadata : {
rootView: "sap.ui.demo.wt.view.App"
},
index.html中，此时创建ComponentContainer对象（也是继承自Control）
sap.ui.getCore().attachInit(function () {
new sap.ui.core.ComponentContainer({
name : "sap.ui.demo.wt"
}).placeAt("content");
});
将metadata内容提取到manifest.json文件，将i18n Model定义在json文件中，我们可以移除Component.js中相关代码
{
"_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"
}
},
"sap.ui": {
"_version": "1.1.0",
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_belize"
]
},
"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"
}
}
}
}
}
