OPEN(SAP) UI5 学习入门系列之三：MVC （下） - 视图与控制器

继续来学习UI5的MVC模型吧，此次咱们来探讨视图与控制器。javascript

1 视图

在MVC中，视图用来定义和渲染UI。在UI5中，视图的类型是能够自定义的，除了如下预约义的四种视图类型以外，你也能够定制本身的视图类型。预约义的四种视图类型以下：html

XML view
JSON view
JS view
HTML view

若是你想定义本身的视图类型，能够经过扩展 sap.ui.core.mvc.View 这个基类来实现。java

1.1 视图的加载

视图能够经过异步(async)或者同步(sync)的方式加载，默认是同步的方式。视图的工厂函数经过同步的方式请求并传入视图定义的源代码并返回一个视图的实例。可是这种方式会致使在加载视图的时候UI界面卡住，并且也有可能会致使视图在初始化期间一些函数不可以被正常调用。因此，为了不这种状况，能够经过异步（asynchronous）的方式来加载视图，全部的视图类型都支持异步的方式。json

如下是一个同步加载视图的例子，视图实例被建立以后放到id为uiArea的DOM元素中，随后视图会被渲染。mvc

var oView = sap.ui.xmlview({ viewName: “sample.view” });
// the instance is available now
oView.placeAt(“uiArea”);

如下的代码片断是一个异步模式加载视图的例子，请求视图工厂函数建立视图实例，可是此时因为这个请求是一个异步的模式，视图实例尚未ready，因此咱们不能立刻用 placeAt 来把它放到DOM元素中，咱们必须等待View.prototype.loaded()执行完毕的 Promise ，在 then() 中才能真正操做已经实例化完毕的视图。若是对于 jQuery 的递延、回调等等异步概念不太了解的，能够阅读这篇文章¹，若是英文不错的能够直接看jQuery的官方API²。框架

   sap.ui.xmlview({ viewName: “sample.view”, async: true }).loaded().then(function(oView) {
// the instance is available in the callback function
oView.placeAt(“uiArea”);
});

1.2 视图的实例化

其实前面也已经提到了，UI5经过 sap.ui.view 这个工厂函数来实例化视图。
这个工厂函数能够接受以下参数：异步

type :
类型能够是预约义的 JSON, JS, XML, 或者 HTML ，这些类型都被定义成了枚举类型，因此在引用的时候能够直接用 sap.ui.core.mvc.ViewType 下面的这四个类型的大写字符串就能够，好比 sap.ui.core.mvc.ViewType.XML 就是表明XML视图，固然直接用字符串 "XML" 也是能够的，规范化起见最好仍是使用枚举类型而不是直接使用字符串字面量。
viewName :
视图的名字，工厂函数经过这个名字去找到视图的源码。
viewContent :
仅仅和XML视图以及JSON视图相关，若是一个视图很简单（好比就一两个控件），能够经过这个属性来定义视图的内容，当 viewName 和 viewContent 同时定义的话，只有viewName会起做用，而viewContent会被忽略。
Controller :
能够是任意控制器的实例，若是这里给定了控制器，则视图中定义的控制器会被覆盖。
viewData :
仅JS视图可使用这个属性，viewData能够用来保存一些用户自定义的数据，而且在整个视图及对应的控制器的生命周期中这些数据都是可用的。

1.3 预约义的视图类型

1.3.1 JS View

定一个JS view文件只须要把文件名命为相似xxx.view.js的形式就能够了，其中xxx就是视图的名字，在实例化视图的时候，这个名字就是须要传给工厂函数的viewName，固然，记得加上命名空间。async

咱们须要实现如下两个方法来完成JS视图的定义：函数

getControllerName() :
指定属于该视图的控制器，若是该方法没有实现，或者返回空，则这个视图就没有控制器
createContent() :
当对应的控制器被初始化以后，这个方法会被并且仅会被调用一次来初始化UI。

   sap.ui.jsview("sap.hcm.Address", {  // this View file is called Address.view.js

   getControllerName: function() {
      return "sap.hcm.Address";     // the Controller lives in Address.controller.js
   },

   createContent: function(oController) {
      var oButton = new sap.ui.commons.Button({text:"Hello JS View"});
      oButton.attachPress(oController.handleButtonClicked);
      return oButton;
   }

});

这里要提到一个要注意的地方，就是当咱们在JS view中定义一个控件的时候，有时候咱们须要同时定义一个id以方便以后引用，这时须要注意的是，咱们不能直接给一个字符串字面量，咱们经过类的实例方法 View.createId('idstring') 来实现，经过这种方式返回的id会在咱们定义的idstring以前加上所在的类实例id做为前缀以保证惟一性。可是若是是申明式的视图类型，就无需使用这个createId方法了，视图解析器会自动来帮咱们作这个事情。学习

1.3.2 XML View

XML view文件以xxx.view.xml做为文件名。一个XML view定义的示例以下：

<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>

XML view中须要注意的一个问题是命名空间，在XML中定义任何一个控件的时候，都须要加上命名空间。

1.3.3 JSON View

JSON view以xxx.view.json做为文件名。一个JSON view定义的示例以下：

{ 
   "Type":"sap.ui.core.mvc.JSONView",
   "controllerName":"sap.hcm.Address",
   "content": [{
      "Type":"sap.ui.commons.Image",
      "id":"MyImage",
      "src":"http://www.sap.com/global/ui/images/global/sap-logo.png"
   },
   {
      "Type":"sap.ui.commons.Button",
      "id":"MyButton",
      "text":"Press Me"

   }]

}

在JSON view中可使用字符串、布尔值以及null。

1.3.4 HTML View

HTML view就是经过HTML标签来定义的视图，文件名相似 xxx.view.html。样例以下：

<template data-controller-name="example.mvc.test">
 Hello
<h1>Title</h1>
<div>Embedded HTML</div>
<div class="test test2 test3" data-sap-ui-type="sap.ui.commons.Panel" id="myPanel">
<div class="test test2 test3" data-sap-ui-type="sap.ui.commons.Button" id="Button1" data-text="Hello World" data-press="doIt"></div>
<div data-sap-ui-type="sap.ui.commons.Button" id="Button2" data-text="Hello"></div>
<div data-sap-ui-type="sap.ui.core.mvc.HTMLView" id="MyHTMLView" data-view-name="example.mvc.test2"></div>
<div data-sap-ui-type="sap.ui.core.mvc.JSView" id="MyJSView" data-view-name="example.mvc.test2"></div>
<div data-sap-ui-type="sap.ui.core.mvc.JSONView" id="MyJSONView" data-view-name="example.mvc.test2"></div>
<div data-sap-ui-type="sap.ui.core.mvc.XMLView" id="MyXMLView" data-view-name="example.mvc.test2"></div>
</div>

全部视图相关的属性均可以经过用data-<property name>的方式在tag <template>中定义。

2 控制器

控制器用来定义业务或者页面的逻辑。控制器文件必须命名为xxx.controller.js。定义一个控制器的样例以下：

        sap.ui.controller("sap.hcm.Address", {
   // controller logic goes here
});

2.1 生命周期 (Lifecyle Hooks)

对于视图的不一样生命周期状态，在控制器中有对应的钩子（Hooks）可让咱们对应于不一样的状态实现一些特定的功能。 UI5提供了下面这些Hooks：

onInit()
视图被实例化时，当全部的控件已经被建立完成的时候被触发。
能够在视图显示以前作一些修改，或者作一些其余的一次性初始化工做。
onExit()
当视图被销毁的时候被触发。
通常能够用来释放资源或者最终肯定一些活动的状态。
onAfterRendering()
当视图被彻底渲染的时候被触发。
此时视图已经出如今DOM中了，能够用来操做DOM元素，修改一些HTML。
onBeforeRendering()
当视图被从新渲染的时候被调用，注意在视图第一次渲染的时候是不会被调用的。

3 总结

MVC是UI5的基础开发模型，无论你有没有去刻意的了解它，可是只要你开发UI5，你确定已经在使用它了。我我的以为M和C应该仍是比较容易理解的，按照API去定义或者用系统生成的文件框架基本上都不会有什么问题。而问题通常都会出如今V，由于UI5里的控件太多，咱们不可能掌握全部控件的用法，即便对于一些熟悉的控件，也没有机会在全部四种预约义的视图模型中都去实践一遍用法，因此不少时候，咱们不知道一个控件该怎么用。这个时候，UI5的帮助文档中的Explorer会是咱们的好朋友，里面列了绝大多数经常使用控件的用法示例。但也有问题，这就是Explorer中基本上全部的视图都是用的XML类型定义的，因此咱们还须要掌握API的阅读方法，如何转换成对应于不一样视图的用法，这就须要多多实践了。