IT干货网

UI5-文档-4.5-Controllers

sanshao 2022年03月09日 SAP 151 0

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


评论关闭
IT干货网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

UI5-文档-4.4-XML Views