1.练习效果
在此步骤中，我们用按钮替换文本，并在按下按钮时显示“ Hello World”消息。按钮的按下事件的处理处理在视图的控制器controller.js中实现
2.源码
您可以在演练-步骤5中查看和下载所有文件。
webapp/view/App.view.xml
|
1 2 3 4 5 6 7 8 |
<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> |
我们添加了对控制器controller的引用，并将文本控件替换为带有文本“ Say Hello”的按钮。该按钮在按下时触发 .onShowHello事件，并调用相对应的处理功能代码。我们还必须指定连接到视图并保存视图的控制器的名称sap.ui.demo.walkthrough.controller.App。.onShowHello 通过设置功能 controllerName 视图的属性。
事实上视图不一定需要显式分配地控制器。如果视图仅显示信息并且不需要其他功能，则无需创建控制器，也就是不需要.JS文件。如果指定了控制器，则在加载视图后实例化指定控制器。
webapp / controller / App.controller.js
|
1 2 3 4 5 6 7 8 9 10 11 |
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"); } }); }); |
我们创建文件夹 webapp /controller 和一个新文件 App.controller.js。现在，我们将忽略管理所需模块的代码。我们将在下一步中对此部分进行说明
3.控制器使用的一些约定
- 控制器名称大写
- 控制器的名称与相关视图的名称相同（在1：1对应关系）
- 事件处理程序带有前缀on,比如前面的：onShowHello
- 控制器名称始终以 * .controller.js形式。