SAPUI5 Demo Kit的示例程序，大多使用的是XMLView，所以开发ui5程序必须掌握xmlview。简单地说，xmlview相对于前面的javascript，主要的变化在view的部分，其它基本不变。我们本篇就把之前mvc的两支程序，从JavaScript View，翻译为XMLView。
首先是Button Click程序，项目文件的结构如下：
对于xmlview来说，view文件的命名规范是*.view.xml。我们先看index.html，因为其它部分不变，我们只贴出application area部分。
<script>
jQuery.sap.registerModulePath("button_demo", "./button_demo/");
var oApp = new sap.m.App({initialPage: "masterPage"});
var oView = sap.ui.view({
id: "masterPage",
viewName: "button_demo.button",
type: sap.ui.core.mvc.ViewType.XML
});
oApp.addPage(oView);
oApp.placeAt("content");
</script>
如果使用sap.ui.view()工厂函数，type参赛变为sap.ui.core.mvc.ViewType.XML, 也可以简写为type: "XML"
另外，我们也可以使用sap.ui.xmlview()，因为view的类型已经明确，就没有type参数。
Button click程序的xmlview实现
index.html
<script>
jQuery.sap.registerModulePath("button_demo", "./button_demo/");
var oApp = new sap.m.App({initialPage: "masterPage"});
var oView = sap.ui.xmlview({
id: "masterPage",
viewName: "button_demo.button"
});
oApp.addPage(oView);
oApp.placeAt("content");
</script>
View
而view(button.view.xml)完全变成了声明式：
<core:View
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns:html="http://www.w3.org/1999/xhtml"
controllerName="button_demo.button" >
<Page title="Button using XMLView Demo">
<content>
<Button text="Click me." press="onButtonClicked" />
</content>
</Page>
</core:View>
注意在声明View的标签中，主要是声明namespace和controller name。本代码中，只需要用到sap.m.Page和sap.m.Button，所以把空的的namespace设定为sap.m: xmlns="sap.m"。
Controller
controller代码和之前一样，写法没有区别：
sap.ui.define(
["sap/ui/core/mvc/Controller"],
function(Controller){
"use strict";
return Controller.extend("button_demo.button", {
onButtonClicked: function() {
sap.m.MessageToast.show("Hello!",{
my: "center center",
at: "center center"
});
}
});
}
);
这次使用sap.m.MessageToast来显示消息，MessageToast对用户操作提供一种简单的反馈，并且经过一段时间后自动消失，除非用户将鼠标放在消息上面。MessageToast的默认位置在屏幕下方正中间的位置，我把它放在屏幕的正中间。
显示供应商的xmlview实现
贴出之前view代码和xmlview代码的对比，相当于汉译英，主要是熟悉语法要领，没有太多需要讲。
javascript view
sap.ui.jsview("suppliers.supplieroverview", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf suppliers.supplieroverview
*/
getControllerName : function() {
return "suppliers.supplieroverview";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf suppliers.supplieroverview
*/
createContent : function(oController) {
// define columns and table
var oColumns = [
new sap.ui.table.Column({
label: new sap.m.Label({text:"ID"}),
template: new sap.m.Text().bindProperty("text", "ID"),
sortProperty: "ID",
width: "50px"
}),
new sap.ui.table.Column({
label: new sap.m.Label({text:"Name"}),
template: new sap.m.Text().bindProperty("text", "Name"),
sortProperty: "ID",
width: "100px"
})
];
var oTable = new sap.ui.table.Table({
width: "100%",
title: "供应商列表",
visibleRowCount: 2,
firstVisibleRow: 0,
editable: false,
selectionMode: sap.ui.table.SelectionMode.Single,
columns: oColumns
});
oTable.bindRows("/Suppliers");
var oPage = new sap.m.Page({
title: "供应商",
content: [oTable]
});
return oPage;
}
});
xmlview
请与上面的代码比较。
<core:View xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns:t="sap.ui.table"
xmlns:html="http://www.w3.org/1999/xhtml"
controllerName="suppliers.supplieroverview" >
<Page title="供应商">
<content>
<t:Table width="100%" title="供应商清单" visibleRowCount="2"
firstVisibleRow="0" editable="false"
selectionMode="Single" rows="{/Suppliers}">
<t:columns>
<t:Column sortProperty="ID" width="50px">
<Label text="ID" />
<t:template>
<Text text="{ID}"/>
</t:template>
</t:Column>
<t:Column label="Name" sortProperty="Name" width="100px">
<Label text="Name"/>
<t:template>
<Text text="{Name}"/>
</t:template>
</t:Column>
</t:columns>
</t:Table>
</content>
</Page>
</core:View>
- 因为Table的namespace是
sap.ui.table.Table, 所以申明namespace:xmlns:t="sap.ui.table"。xml中就可以表示为<t:Table> ... </t:Table> - 如果属性是简单类型，可以直接作为atrribute的方式来申明，如Table的width属性、title属性
- 如果属性是Aggregation和Association，则使用子标签，如Column的Label，是
sap.m.Label。 - 绑定的语法稍有差异。
