说明
现在我们已经设置了视图( V )和控制器( C ),是时候考虑MVC中的M了。
我们将向应用程序添加一个输入字段,将其值绑定到模型中,并将相同的值绑定到输入字段的描述中。描述将根据用户输入直接更新。
预览
一个输入字段和一个显示输入字段值的描述
代码
你可以在演练-第7步查看和下载所有文件。
webapp/controller/App.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast",
"sap/ui/model/json/JSONModel"
], function (Controller, MessageToast, JSONModel) {
"use strict";
return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
onInit : function () {
// set data model on view
var oData = {
recipient : {
name : "World"
}
};
var oModel = new JSONModel(oData);
this.getView().setModel(oModel);
},
onShowHello : function () {
MessageToast.show("Hello World");
}
});
});
我们向控制器添加了一个init函数。onInit是SAPUI5的生命周期方法之一,在创建控制器时由框架调用,类似于控件的构造函数。
在函数内部,我们实例化一个JSON模型。模型的数据只包含“收件人”的单个属性,其中还包含名称的一个附加属性。
为了能够在XML视图中使用这个模型,我们在视图上调用setModel函数并传递新创建的模型。现在在视图上设置了模型。
Message Toast只是显示静态的“Hello World”消息。我们将在接下来的步骤中演示如何加载翻译后的文本。
webapp/view/App.view.xml
<mvc:View
controllerName="sap.ui.demo.walkthrough.controller.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Button
text="Say Hello"
press=".onShowHello"/>
<Input
value="{/recipient/name}"
description="Hello {/recipient/name}"
valueLiveUpdate="true"
width="60%"/>
</mvc:View>
我们向视图添加了一个sap. m.n iinput控件。有了这个,用户可以输入一个收件人的问候语。我们通过使用XML视图的声明式绑定语法将它的值绑定到SAPUI5模型:
- 大括号{…}表示数据取自接收者的对象名称属性的值。这就是所谓的“数据绑定”。
- /recipient/name声明了模型中的路径。
webapp/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SAPUI5 Walkthrough</title>
<script
id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true"
data-sap-ui-resourceroots='{
"sap.ui.demo.walkthrough": "./"
}'
data-sap-ui-oninit="module:sap/ui/demo/walkthrough/index">
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
value属性的绑定是一个简单的绑定示例,它只包含一个绑定模式。我们还可以将文本和绑定模式组合成更复杂的绑定结果,如description属性中所示。为了能够使用所谓的复杂绑定语法,我们必须通过将引导参数data-sap-ui-compatVersion设置为edge来全局启用它。如果省略此设置,则只允许标准的绑定语法,这意味着“Hello {/recipient/name}”将不再工作,而“{/recipient/name}”将正常工作。
注意
你可以在脚本中使用data-sap-ui-compatVersion="edge"或者data-sap-ui-bindingSyntax=“complex”。通过设置“edge”兼容性模式,将自动启用复杂的绑定语法。edge模式自动启用兼容性特性,否则必须手动启用。有关更多信息,请参见兼容性版本信息。
约定
- 对变量名使用匈牙利命名法。
匈牙利命名法是电脑程式设计中的一种变量命名规则,此命名法又可细分为:系统匈牙利命名法和匈牙利应用命名法。原始的匈牙利命名法,现在被称为匈牙利应用命名法,由1972年至1981年在施乐帕洛阿尔托研究中心工作的-程序员查尔斯·西蒙尼(之后任微软总设计师)发明。此命名方法被微软公司广泛推广,以下重点讲述系统匈牙利命名法。
基本原则是:变量名=属性+类型+对象描述,其中每一对象的名称都要求有明确含义,可以取对象名字全称或名字的一部分。命名要基于容易记忆容易理解的原则。参考博客。
章节
- 第1步:你好世界
- 第2步:引导
- 第3步:控件
- 第4步:XML视图
- 第5步:控制器
- 第6步:模块
- 第7步:JSON模型
- 第8步:可翻译的文本
- 第9步:组件配置
- 第10步:应用程序描述符
- 第11步:页面和面板
- 第12步:Shell控件作为容器
- 第13步:外边距和内边距
- 第14步:自定义CSS和主题颜色
- 第15步:嵌套视图
- 第16步:对话框和片段
- 第17步:片段回调
- 第18步:图标
- 第19步:重用对话框
- 第20步:聚合绑定
- 第21步:数据类型
- 第22步:表达式绑定
- 第23步:自定义格式器
- 第24步:过滤
- 第25步:排序和分组
- 第26步:远程OData服务
- 第27步:模拟服务器配置
- 第28步:使用QUnit进行单元测试
- 第29步:与OPA的集成测试
- 第30步:调试工具
- 第31步:路由和导航
- 第32步:路由与参数
- 第33步:路由回溯和历史
- 第34步:自定义控件
- 第35步:响应性
- 第36步:设备适应
- 第37步:内容密度
- 第38步:可访问性