第5步:控制器

说明

在这一步中，我们将文本替换为一个按钮，并在按钮被按下时显示“Hello World”消息。
按钮按下事件的处理是在视图的控制器中实现的。

---

预览

添加了一个"Say Hello"按钮

代码

你可以在演练-第5步查看和下载所有文件。

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"/>
</mvc:View>

我们添加了对控制器的引用，并将文本控件替换为一个带有文本“Say Hello”的按钮。按钮被按下时触发.onshowhello事件处理函数。我们还必须指定连接到视图的控制器的名称，并通过设置视图controllerName属性来保存. onshowhello函数。

视图并不一定需要显式分配的控制器。如果视图只是显示信息，而不需要其他功能，则不必创建控制器。如果指定了控制器，它将在视图加载后实例化。

webapp/controller/App.controller.js (New)

sap.ui.define([
   "sap/ui/core/mvc/Controller"
], function (Controller) {
   "use strict";
   return Controller.extend("", {
   });
});

我们创建了webapp/controller文件夹，并在其中创建了一个新文件App.controller.js。现在，我们将忽略管理所需模块的代码。我们将在下一步解释这部分。

注意
“use strict”：文字表达式是由ECMAScript 5引入的。它告诉浏览器以"strict mode"执行代码。严格模式有助于在开发阶段的早期状态检测潜在的编码问题，这意味着，例如，它确保在使用变量之前声明变量。因此，它有助于防止常见的JavaScript陷阱，因此使用严格模式是一个很好的实践。

webapp/controller/App.controller.js

sap.ui.define([
   "sap/ui/core/mvc/Controller"
], function (Controller) {
   "use strict";
   return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
      onShowHello : function () {
         // show a native JavaScript alert
         alert("Hello World");
      }
   });
});

通过扩展SAPUI5核心的controller对象，我们在它自己的文件中定义了应用程序控制器。一开始，它只保存一个名为onShowHello的函数，该函数通过显示警报来处理按钮的按下事件。

约定

• 控制器名称大写
• 控制器控制器具有与相关视图相同的名称(如果是一对一的关系)
• 控制器事件处理程序的前缀是on
• 控制器控制器名称总是以*.controller.js结尾

章节

1. 第1步:你好世界
2. 第2步:引导
3. 第3步:控件
4. 第4步:XML视图
5. 第5步:控制器
6. 第6步:模块
7. 第7步:JSON模型
8. 第8步:可翻译的文本
9. 第9步:组件配置
10. 第10步:应用程序描述符
11. 第11步:页面和面板
12. 第12步:Shell控件作为容器
13. 第13步:外边距和内边距
14. 第14步:自定义CSS和主题颜色
15. 第15步:嵌套视图
16. 第16步:对话框和片段
17. 第17步:片段回调
18. 第18步:图标
19. 第19步:重用对话框
20. 第20步:聚合绑定
21. 第21步:数据类型
22. 第22步:表达式绑定
23. 第23步:自定义格式器
24. 第24步:过滤
25. 第25步:排序和分组
26. 第26步:远程OData服务
27. 第27步:模拟服务器配置
28. 第28步:使用QUnit进行单元测试
29. 第29步:与OPA的集成测试
30. 第30步:调试工具
31. 第31步:路由和导航
32. 第32步:路由与参数
33. 第33步:路由回溯和历史
34. 第34步:自定义控件
35. 第35步:响应性
36. 第36步:设备适应
37. 第37步:内容密度
38. 第38步:可访问性