ui5_Walkthrough_Step 5: 视图控制器Controller

哈哈~haha2025-12-03 14:36

同ui5_Walkthrough_Step 4: XML 视图新建文件夹05，与04不同的是，这次webapp新增一个文件夹controller,controller文件下新增文件App.controller.js,如下：

同 ui5_Walkthrough_Step 4: XML 视图相比，只需修改App.view.xml和App.controller.js文件

App.view.xml

javascript 复制代码

<mvc:View
   controllerName="sap.ui5.walkthrough.controller.App"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc">
	<Button text="Click me" press="onPress"/>
</mvc:View>
<!--mvc 是一个命名空间，代表sap.ui.core.mvc  
   xmlns="sap.m" 定义视图的默认命名空间，声明文本控件Text 
   的时候就不需要写成sap.m.Text 
   controllerName 指定sap.ui5.walkthrough
   命名空间后的controller文件夹下的App.controller.js文件
 -->

App.controller.js

javascript 复制代码

sap.ui.define(["sap/ui/core/mvc/Controller"], function (Controller) {
  "use strict";
  return Controller.extend("sap.ui5.walkthrough.controller.App", {
    onPress: function () {
      alert("ui5 walkthrough strp_5 Controller");
    },
  });
});
//sap/ui/core/mvc/Controller 声明控制器实现依赖于sap ui5 标准控制器
//当sap/ui/core/mvc/Controller module加载完成后function (Controller) 会
//被调用，这里的onPress方法和App.view.xml视图里的Button press时间绑定，
// alert弹窗一个弹窗

运行同步骤ui5_Walkthrough_Step 4: XML 视图 npm insall 加载依赖，加载完成后可看到文件夹下多一个node_modules的文件夹，之后再运行npm start 即得到运行结果如下：