SAPUI5 (10) - XMLView

来源:互联网 发布:火炮分类 知乎 编辑:程序博客网 时间:2024/03/28 23:32

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的标签中,主要是声明namespacecontroller name。本代码中,只需要用到sap.m.Pagesap.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
  • 绑定的语法稍有差异。
2 0