Model View Controller (MVC)模型视图控制器（MVC）中的视图层，用于负责定义和呈现用户UI，和控制器通常形成1:1的关系。
SAP UI5支持以下几种预定义视图类型：
- HTML view
<template data-controller-name="ui5.demo.controller.htmlView">
<div data-sap-ui-type="sap.m.App">
<div data-sap-ui-type="sap.m.Page" data-title="htmlView">
<div data-sap-ui-aggregation="content">
</div>
</div>
</div>
</template>
- JSON view
{
"Type": "sap.ui.core.mvc.JSONView",
"controllerName": "ui5.demo.controller.jsonView",
"content": [{
"Type": "sap.m.App",
"pages": [{
"Type": "sap.m.Page",
"title": "jsonView",
"content": []
}]
}]
}
- JS view
sap.ui.jsview("ui5.demo.view.jsView", {
getControllerName: function() {
return "ui5.demo.controller.jsView";
},
createContent: function(oController) {
var oPage = new sap.m.Page({
title: "jsView",
content: []
});
var app = new sap.m.App("myApp", {
initialPage: "oPage"
});
app.addPage(oPage);
return app;
}
});
- XML view
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="ui5.demo.controller.xmlView"
xmlns:html="http://www.w3.org/1999/xhtml">
<App>
<pages>
<Page title="xmlView">
<content></content>
</Page>
</pages>
</App>
</mvc:View>
以上四种类型中最常用的是JS和Xml View，在SAP UI5官网Explord的例子中大多使用XML View，所以在这里重点介绍一下有关XML View的知识点
- 命名空间（Namespace）
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
controllerName="..."
xmlns="sap.ui.layout"
xmlns="sap.ui.layout.form">
</mvc:View>
即xmlns，在View标签里只能存在一个默认的xmlns，此命名空间不需要有前缀。前缀可以理解就是一个命名空间的别名，上面示例中的mvc就是一个别名，当然也可以改成其他的名称。
SAP UI5的控件库及其相关的子包的名称都可以映射为Namespace，如果我们使用的一个控件位于某个控件库的一个子包之中，在声明命名空间需要将这个子包做单独的声明
<mvc:View controllerName="ui5.demo.controller.xmlView" xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.ui.commons">
<l:Splitter height="200px" orientation="Vertical">
<Label text="label 1">
<layoutData><l:SplitterLayoutData size="30%"/></layoutData>
</Label>
<Label text="label 2">
<layoutData><l:SplitterLayoutData size="70%"/></layoutData>
</Label>
</l:Splitter>
</mvc:View>
- 控件的属性
控件的属性在XML用xml属性的方式表示。一个控件的属性名称可在API中的查到。对于属性中的值，如果涉及一些特殊符号，如<或者&需要用到转义符，例如：
<Text text="this is a text <" />
- 在XML中使用HTML语言
若想在SAPUI5中使用HTML，仅需加入XHTML的namespacexmlns:html="http://www.w3.org/1999/xhtml",如
<mvc:View controllerName="sap.hcm.Address" xmlns="sap.ui.commons" xmlns:mvc="sap.ui.core.mvc"
xmlns:html="http://www.w3.org/1999/xhtml">
<Panel>
<Button text="Press Me. I am an SAPUI5 Button"/>
<html:button>No, press me. I am native HTML Button.</html:button>
</Panel>
</mvc:View>
在XML中使用Native HTML
- 应用自定义样式到SAPUI5控件中
使用HTML标签库
<html:style>
.mySuperRedButton {
font-style: italic;
color:red
}
</html:style>
<Panel>
<Button class="mySuperRedButton" text="Press Me"/>
</Panel>
引入自定义样式
- Aggregation 和 Association
简单控件独立存在，但界面上控件有时还要以某种关系存在。
- 第一种关系是 包含关系 。比如容器控件中包含其他控件，又比如
radioButtonGroup 包含若干个 radioButton 。这种关系中的控件分别称为父控件 ( parent control ) 和子控件 ( child control ) 。父控件对其它控件的参照称为聚合 ( aggregation )。
Aggregation 关系中，各个子控件的生命周期依赖于父控件，当父控件销毁的时候，子控件也被销毁。另外，子控件不使用 placeAt() 方法放在
DOM 对象中，而是利用父控件的方法添加到父控件的集合中，由父控件来渲染。 - 第二种关系叫做 association，指一个控件参照到另外一个控件。按照 web设计的 ARIA 兼容原则 ( ARIA: Accessible Rich Internet Applications )，如果某两个控件之间存在一定联系这两个控件应该关联起来。例如label 和 radioButtonGroup，而通过查看 radioButtonGroup 的 API，可以设置其association属性ariaLabelledBy，和 Aggregation 不同的是，Association 中父子控件的生命周期是独立的。
