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.

转载于:https://www.cnblogs.com/jerrylu/p/4425036.html

SAP UI5 - MVC相关推荐

SAP UI5 初学者教程之七 - JSON 模型初探试读版
Jerry 从 2014 年加入 SAP成都研究院 CRM Fiori 开发团队之后开始接触 SAP UI5,曾经在 SAP 社区和"汪子熙"微信公众号上发表过多篇关于 SAP U ...
SAP UI5 应用开发教程之七 - JSON 模型初探
本教程的第四个步骤,我们学习了 SAP UI5 MVC 架构中的 V:XML 视图: SAP UI5 初学者教程之四:XML 视图初探第五个教程,我们学习了 MVC 中的 C:Controller ...
SAP UI5 初学者教程之五：视图控制器初探试读版
Jerry 从 2014 年加入 SAP成都研究院 CRM Fiori 开发团队之后开始接触 SAP UI5,曾经在 SAP 社区和"汪子熙"微信公众号上发表过多篇关于 SAP U ...
SAP UI5 应用开发教程之五：视图控制器初探
本教程的前一个步骤也就是第四个步骤,我们了解了 SAP UI5 XML 视图的使用方法.在该步骤里,我们在 XML 视图里声明了一个 Text 控件实例,该控件位于 sap.m 这个命名空间内. 本步 ...
SAP UI5 初学者教程之四：XML 视图初探试读版
Jerry 从 2014 年加入 SAP成都研究院 CRM Fiori 开发团队之后开始接触 SAP UI5,曾经在 SAP 社区和"汪子熙"微信公众号上发表过多篇关于 SAP U ...
SAP UI5 应用开发教程之四：XML 视图初探
本教程的前三个步骤,我们要么直接在 index.html 里,利用原生的标签 div 显示文本,要么创建 SAP UI5 Text 控件实例,再将其放置于 HTML 占位符 div 标签里. 从本步骤 ...
SAP UI5 数据绑定中的工厂函数
工厂函数是一种更强大的从模型数据创建控件的方法. 为控件聚合的每个条目调用工厂函数,开发人员可以决定每个条目是否应由具有不同属性的相同控件表示,甚至每个条目由完全不同的控件表示. 工厂函数带有参数sI ...
SAP UI5 应用开发教程之十二 - 使用 CSS 类对 UI 进行进一步美化
下图是迄今为止我们完成的 UI 效果: 可以看到 Say Hello 这个按钮和它右边的 Input 控件,中间没有任何间隙,看起来不甚美观. 经过本步骤美化后的效果: 下面介绍具体实现步骤. 本步骤 ...
SAP UI5 应用开发教程之十一：SAP UI5 容器类控件 Page 和 Panel
本教程前十个步骤,我们只是简单的把 Button 和 Input 控件,直接放置 XML 视图中,如下图所示: 从本步骤开始,我们将学习 sap.m 库里的两个容器控件,即 Page 和 Panel. ...

SAP UI5 - MVC

SAP UI5 - MVC相关推荐

最新文章

热门文章