- SAP UI5教程
- SAP UI5 - 主页
- SAP UI5 - 概述
- SAP UI5 - 架构
- SAP UI5 - 关键组件
- SAP UI5 - 控制库
- SAP UI5 - 开发套件
- SAP UI5 - MVC 概念
- SAP UI5 - 视图
- SAP UI5 - 开发人员工作室
- SAP UI5 - 创建 UI5 项目
- SAP UI5 - 控件
- SAP UI5 - 数据绑定
- SAP UI5 - 设计模式
- SAP UI5 - 模块化
- SAP UI5 - 本地化
- SAP UI5 - 记事本控件
- SAP UI5 - 扩展应用程序
- SAP UI5 - 主题
- SAP UI5 - 移动
- 在 Web IDE 中创建项目
- SAP UI5 有用资源
- SAP UI5 - 快速指南
- SAP UI5 - 有用的资源
- SAP UI5 - 讨论
SAP UI5 - 视图
视图是使用 SAP 库定义的,如下所示 -
- XML 与 HTML、混合或独立:Library- sap.ui.core.mvc.XMLView
- JavaScript:库- sap.ui.core.mvc.JSView
- JSON:库 - sap.ui.core.mvc.JSONView
- HTML:库 - sap.ui.core.mvc.HTMLView
JavaScript 查看示例
Sap.ui.jsview(“sap.hcm.address”, {
getControllerName: function() {
return “sap.hcm.address”;
},
createContent: function(oController) {
var oButton = new sap.ui.commons.Button({ text: “Hello” });
oButton.attachPress(function() {
oController.Hello();
})
Return oButton;
}
});
HTML 查看示例
<template data-controller-name = ”sap.hcm.address’>
<h1>title</h1>
<div> Embedded html </div>
<div class = ”test” data-sap-ui-type = ”sap.ui.commons.Button”
Id = ”Button1” data-text = ”Hello” Data-press = ”sayHello”>
</div>
</template>
同样,您可以创建从 sap.ui.core.mvc.JsonView 派生的 JSON 视图。
{
“type”:”sap.ui.core.mvc.JsonView”,
“controllerName”:”sap.hcm.address”,
……………………….
…………………...
…………………….
}
视图类型比较
下表列出了与 MVC 概念相关的主要功能以及不同视图类型与这些功能的比较。
| 特征 | JS视图 | XML视图 | JSON 视图 | HTML 视图 |
|---|---|---|---|---|
| 标准和自定义库 | 是的 | 是的 | 是的 | 是的 |
| string、int Boolean、float 类型的属性 | 是的 | 是的 | 是的 | 是的 |
| 聚合 1:1、1:n 关联 1:1、1:n | 是的 | 是的 | 是的 | 是的 |
| 简单的数据绑定 | 是的 | 是的 | 是的 | 是的 |
| 自定义数据绑定 | 是的 | 不 | 不 | 不 |
| 嵌入 HTML | 不 | 是的 | 不 | 不 |
| 代码完成 | 是的 | 是的 | 不 | 不 |
| 模板化 | 是的 | 不 | 不 | 不 |
| 验证 | 不 | 是的 | 不 | 不 |
| 单一事件监听器 | 是的 | 是的 | 是的 | 是的 |
