在这个步骤中，我们将文本替换为一个按钮，并在按钮被按下时显示“Hello World”消息。按钮的按下事件的处理是在视图的控制器中实现的。
Preview
A Say Hello button is added
Coding
You can view and download all files at Walkthrough - Step 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("", {
});
});
请注意：“use strict”;文字表达式是由JavaScript 1.8.5 (ECMAScript 5)引入的，它告诉浏览器以所谓的“use strict”执行代码。严格模式有助于在开发时的早期状态检测潜在的编码问题，这意味着，例如，它确保变量在使用之前声明。因此，它有助于防止常见的JavaScript pitfa我们创建文件夹webapp/controller和一个新的文件App.controller.js在里面。目前，我们忽略管理所需模块的代码。我们将在下一个步骤中解释这一部分。
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 core的controller对象，在它自己的文件中定义app控制器。在开始时，它只保存一个名为onShowHello的函数，该函数通过显示警告来处理按钮的按下事件。
约定：
• 控制器名称大写
• 控制器的名称与相关视图相同(如果存在1:1的关系)
• 事件处理程序以on作为前缀
• 控制器名总是以*.controller.js结尾
Parent topic: Walkthrough
Previous: Step 4: XML Views
Next: Step 6: Modules
Related Information