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 的遞延、回調等等異步概念不太瞭解的，能夠閱讀這篇文章1，若是英文不錯的能夠直接看jQuery的官方API2。框架
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的閱讀方法，如何轉換成對應於不一樣視圖的用法，這就須要 多多實踐了。