SAPUI5 Demo Kit的示例程序，大多使用的是XMLView，所以開發(fā)ui5程序必須掌握xmlview。簡單地說，xmlview相對于前面的javascript，主要的變化在view的部分，其它基本不變。我們本篇就把之前mvc的兩支程序，從JavaScript View，翻譯為XMLView。

首先是Button Click程序，項目文件的結構如下：

對于xmlview來說，view文件的命名規(guī)范是*.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()工廠函數(shù)，type參賽變?yōu)?code>sap.ui.core.mvc.ViewType.XML, 也可以簡寫為type: "XML"

另外，我們也可以使用sap.ui.xmlview()，因為view的類型已經(jīng)明確，就沒有type參數(shù)。

Button click程序的xmlview實現(xiàn)

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代碼和之前一樣，寫法沒有區(qū)別：

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對用戶操作提供一種簡單的反饋，并且經(jīng)過一段時間后自動消失，除非用戶將鼠標放在消息上面。MessageToast的默認位置在屏幕下方正中間的位置，我把它放在屏幕的正中間。

顯示供應商的xmlview實現(xiàn)

貼出之前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。
• 綁定的語法稍有差異。