今天准备系统的学习一下UI5的MVC概念
1. View
UI5的view一共分为4中, JS/XML/JSON/HTML view,
1.1 JS View,通过JS代码 ,返回UI控件,getControllerName, 用于获取对应的Controler, createContent方法会在Controller初始化之后被调用,返回UI控件
代码如下:
1 sap.ui.jsview("sap.hcm.Address", { 2 3 getControllerName: function() { 4 return "sap.hcm.Address"; 5 }, 6 7 createContent: function(oController) { 8 var oButton = new sap.ui.commons.Button({text:"Hello JS View"}); 9 oButton.attachPress(oController.handleButtonClicked); 10 return oButton; 11 } 12 13 });
1.2 XML View
通过XML直接写控件,代码如下:
<mvc:View controllerName="sap.hcm.Address" xmlns="sap.ui.commons" xmlns:mvc="sap.ui.core.mvc">
<Panel>
<Image src="http://www.sap.com/global/ui/images/global/sap-logo.png"/>
<Button text="Press Me!"/>
</Panel>
</mvc:View>
返回一张图片以及一个按钮
1.3 JSON View
通过JSON格式定义View,代码如下:
1 { 2 "Type":"sap.ui.core.mvc.JSONView", 3 "controllerName":"sap.hcm.Address", 4 "content": [{ 5 "Type":"sap.ui.commons.Image", 6 "id":"MyImage", 7 "src":"http://www.sap.com/global/ui/images/global/sap-logo.png" 8 }, 9 { 10 "Type":"sap.ui.commons.Button", 11 "id":"MyButton", 12 "text":"Press Me" 13 14 }] 15 16 }
效果同1.2
1.4 HTML View ,就是直接写HTML代码,代码略
2. Controller
Controller是写在prefix.controller.js中的 这边前缀名和View是保持一致的。
Controller主要有四个方法
onInit():在View被实例化后调用,可以用来第一次展示View的时候做一些修改,或者其他一些初始化操作
onExit():当View被destroy的时候调用,可以用来释放资源
onAfterRendering():当View被渲染(render)的时候调用
onBeforeRendering():在View被重新渲染前调用,在第一次渲染前不会被调用
3. Model
数据源, 主要有JSON/XML/OData 三种Model.
特别声明:文章或部分素材来源于网络,仅供SAP、ERP从业伙伴们交流学习使用,如果侵犯了您的权益,请联系网站管理人员删减!