使用视图控制器
学习目标
使用视图控制器
引用控制器
分配视图控制器
要将控制器分配给 XML 视图，可以在 <View> 标签中使用 controllerName 属性（参见图 引用控制器）。控制器类的名称作为该属性的值输入。
SAPUI5 通过模块系统加载控制器。
图中所示的 XML 视图取自一个项目，其中 webapp 文件夹在引导脚本中注册为资源位置。为此，通过引导脚本中的 data-sap-ui-resourceroots 属性将模块 ID 前缀 sap.training.exc 分配给 webapp 文件夹。
因此，控制器名称 sap.training.exc.controller.App 的解析方式如下：前缀 sap.training.exc 指向 webapp 文件夹。紧跟 sap.training.exc 之后的 controller 段将 controller 子文件夹指定为要加载文件的位置。控制器名称中的最后一段表示文件名，并会自动附加后缀 *.controller.js*。也就是说，SAPUI5 最终会从 controller 子文件夹加载文件 *App.controller.js*。
注意
由此通常可以得出，包含视图控制器实现的文件必须具有后缀.controller.js。
通常，视图控制器存储在项目结构的 controller 文件夹中。有关视图控制器实现的更多信息将在下一节中介绍。
事件处理程序
许多控件都可以触发事件。例如，当用户单击或轻点 sap.m.Button 时，它会触发 press 事件。可以在相应控件的 API Reference 的 Events 部分中查到支持哪些事件。
在 XML 视图中，可以将事件处理程序附加到事件。为此，需要向相应控件标签添加一个以事件名称命名的属性，例如向 <Button> 标签添加 press 属性。该属性的值就是事件处理程序的名称。
以点（'.'）开头的事件处理程序名称被视为表示控制器中的一个方法。它们的解析方式是去掉前导点，并用得到的名称在控制器实例上调用该方法。因此，在所示示例中，当用户单击或轻点按钮时，会在视图控制器上调用 onSayHello 方法。
控制器实现
图 简单控制器 显示了包含上述视图所引用控制器实现的文件。
如前所述，该文件名为 *App.controller.js*，存储在项目的 *webapp/controller* 文件夹中。
视图控制器通过 sap.ui.define 实现为独立的模块，通常创建为 sap.ui.core.mvc.Controller 的子类。因此，在所示示例中，模块 sap/ui/core/mvc/Controller 已添加到依赖数组中，并且在工厂函数的接口中插入了名为 Controller 的参数。
在工厂函数的实现中，通过调用 extend 方法创建 sap.ui.core.mvc.Controller 的一个新子类。该子类通过 return 语句设置为该模块的值。
extend 方法的第一个参数是要创建的控制器类的名称。在示例中，它是 sap.training.exc.controller.App。该类的名称与 XML 视图的 <View> 标签中作为 controllerName 属性值指定的控制器名称相匹配。
extend 方法的第二个参数是一个对象字面量，其中包含用于丰富所创建子类的信息。在示例中，该对象字面量包含方法 onSayHello，它充当视图上按钮 press 事件的事件处理程序（见上文）。该方法通过调用 sap.m.MessageBox 类的 information 方法显示一个文本为 Hello World 的信息对话框。因此，通过 sap.ui.define 创建的控制器模块除了依赖 sap/ui/core/mvc/Controller 之外，还依赖 sap/m/MessageBox。除了文本之外，information 方法还会在对话框上显示一个信息图标和一个确定按钮。
除了可以为控制器定义自己的方法和属性之外，SAPUI5 还提供了若干继承自超类 sap.ui.core.mvc.Controller 的生命周期钩子。例如，可以在自己的控制器上实现继承而来的 onInit 方法，以执行初始设置。如果存在该方法，SAPUI5 会在视图实例化时、且控件已创建之后，为每个视图实例调用它一次。该方法可用于在视图显示之前修改视图、绑定事件处理程序以及执行其他一次性初始化。
创建并使用视图控制器
业务场景
在本练习中，你将在上一个练习中创建的 XML 视图上放置一个按钮。为了响应按钮点击，你要向该 XML 视图添加一个控制器，并在其中实现相应的事件处理方法。*模板：*Git 仓库：https://github.com/SAP-samples/sapui5-development-learning-journey.git，分支：*sol/4_views模型解决方案：*Git 仓库：https://github.com/SAP-samples/sapui5-development-learning-journey.git，分支：sol/5_controllers
任务 1：向视图添加按钮
步骤
确保
*App.view.xml*视图文件已在编辑器中打开。从视图中移除
Hello WorldText UI 元素。删除以下行：
<Text text="Hello World"/>
取而代之，向视图中添加以下行，以创建一个标签为
Say Hello的按钮，按下该按钮时将调用视图控制器中的事件处理方法onSayHello：
<Button text="Say Hello" press=".onSayHello"/>
注意
该事件处理方法目前尚不存在。它将在下一个练习步骤中创建。
结果
该 XML 视图现在应如下所示：
4. 向 <mvc:View> 标签添加以下属性，以定义应为该视图实例化并使用的控制器名称：
controllerName="sap.training.exc.controller.App"
注意
该视图控制器目前尚不存在。它将在下一个练习步骤中创建。
结果
该 XML 视图现在应如下所示：
任务 2：实现视图控制器
步骤
在
*webapp*文件夹的子文件夹*controller*中创建一个名为*App.controller.js*的新文件。在项目结构中打开
*webapp/controller*文件夹的上下文菜单。选择 新建文件。
在出现的字段中，输入
App.controller.js并按 Enter。
结果
App.controller.js
文件已创建并显示在编辑器中。
2. 向 *App.controller.js* 文件中添加以下代码，以实现带有 onSayHello 方法的所需视图控制器：
注意
应通过 onSayHello 事件处理方法显示一个文本为 Hello World 的对话框。为此，需要调用 sap.m.MessageBox 的 information() 方法。因此，该视图控制器还依赖 MessageBox 模块，这就是它被列入依赖数组并作为工厂函数参数的原因。
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageBox"
],
function (Controller, MessageBox) {
"use strict";
return Controller.extend("sap.training.exc.controller.App", {
onSayHello: function () {
MessageBox.information("Hello World");
}
});
});
结果
App.controller.js
文件应按如下方式实现：
3. 通过从 SAP Business Application Studio 中启动应用来测试运行你的应用。
右键单击你的 sapui5-development-learning-journey 项目中的任意子文件夹，然后在出现的上下文菜单中选择 预览应用。
在出现的对话框中选择名为 start-noflp 的 npm 脚本。
在打开的应用中，检查按钮是否显示，以及单击按钮时是否出现
Hello World对话框。