SAP UI5

cheun

　　今天准备系统的学习一下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.