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的标签中,主要是声明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
。 - 绑定的语法稍有差异。
- SAPUI5 (10) - XMLView
- SAPUI5
- SAPUI5-Button
- SAPUI5-HTML
- SAPUI5 Theme
- SAPUI5-List
- SAPUI5-Routing
- SAPUI5 Table
- SAPUI5 - Component
- SAPUI5 (21)
- SAPUI5 (22)
- SAPUI5 (23)
- SAPUI5 (24)
- SAPUI5 (25)
- SAPUI5 (26)
- SAPUI5 (27)
- SAPUI5 (29)
- SAPUI5 (30)
- HTML&CSS语法大全
- Http状态码与常见问题出现的原因
- Varnish的部署与使用实例(内附一键安装部署脚本github链接)
- AngularJS基本知识
- Android基础再回首——四大组件之Activity、Service俩兄弟
- SAPUI5 (10) - XMLView
- EM算法 估计混合高斯模型参数 Python实现
- VS2015编译环境下CUDA安装配置
- javascript基本介绍
- card 驱动(二)读写速度
- 【计算机原理】计算机原理日常回顾总结
- 使用花生壳(内网穿透)服务搭建网站服务
- 微生物生殖
- SQL Server 2014数据库远程访问设置方法