ui5详细教程Stone

SAPUI5 (10) - XMLView

2017-01-05  本文已影响376人  Stone0823

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>
上一篇下一篇

猜你喜欢

热点阅读