SAPUI5 (10) - XMLView

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。
• 绑定的语法稍有差异。