- 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 | 不 | 是的 | 不 | 不 |
代码完成 | 是的 | 是的 | 不 | 不 |
模板化 | 是的 | 不 | 不 | 不 |
验证 | 不 | 是的 | 不 | 不 |
单一事件监听器 | 是的 | 是的 | 是的 | 是的 |