在这一步中,创建了视图控制器,将文本替换为一个按钮,并在按下按钮时显示“Hello World”消息,弹窗(我自定义的,将toast定义为弹框)是alert。按钮按下事件的处理在视图的控制器中实现。
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,代码:
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。现在,我们忽略管理所需模块的代码。我们将在下一步中对此部分进行解释。
展示结果如下:
惯例:
- 控制器名称大写
- 控制器具有与相关视图相同的名称(如果存在1:1的关系)
- 事件处理程序以on为前缀
- 控制器名称总是以*.Controller.js结尾
【我主要看官网和小石王博主文章学习,如有侵权请联系我删除】