SAP UI5 walkthrough step5 Controllers

IamRunjiang2023-12-10 21:53

在这个章节，我们要做的是，将之前的text文本展示为一个按钮，并将声明绑定在点击按钮事件。

因为改的是外观，所以我们修改的是view.XML

webapp/view/App.view.xml

<mvc:View
   controllerName="ui5.walkthrough.controller.App"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Button
      text="Say Hello"
      press=".onShowHello"/>
</mvc:View>

根据MVC架构原理，这种点击按钮事件，应该放在controller里面

所以我们这边要新建一个App.controller.js

webapp/controller/App.controller.js (New)

sap.ui.define([
   "sap/ui/core/mvc/Controller"
], (Controller) => {
   "use strict";

   return Controller.extend("ui5.walkthrough.controller.App", {
      onShowHello() {
         // show a native JavaScript alert
         alert("Hello World");
      }
   });
});

Conventions

Controller names are capitalized
Controllers carry the same name as the related view (if there is a 1:1 relationship)
Event handlers are prefixed with on
Controller names always end with *.controller.js

最后输出的效果如下