UI5-文档-4.5-Controllers

在这个步骤中，我们将文本替换为一个按钮，并在按钮被按下时显示“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

Model View Controller (MVC)

Controller

API Reference:sap.ui.define