SAP UI5 - MVC

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

 

posted on 2015-04-14 15:29  刀疤2  阅读(548)  评论(0)  编辑  收藏  举报

导航