Table of Contents

 

Step5：Controller层

1、webapp/view/App.view.xml

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

结果样式

总结：

Step6: Modules

1、webapp/controller/App.controller.js

结果样式

---

Step5：Controller层

1、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> <Button text="Say Hello" press=".onShowHello"/>

样式如图：

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

sap.ui.define([ "sap/ui/core/mvc/Controller" ], function (Controller) { "use strict"; return Controller.extend("", { }); });

填充代码

这个JS中function里的onShowHello是对页面点击事件的响应

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"); } }); });

结果样式

总结：

Controller 名称要大写

Controller 和相关view的名称要一致

Event handlers are prefixed with on

Controller names always end with *.controller.js

Step6: Modules

1、webapp/controller/App.controller.js

用toast取代step 5 中的alert，可以实现异步加载

sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/m/MessageToast" ], function (Controller, MessageToast) { "use strict"; return Controller.extend("sap.ui.demo.walkthrough.controller.App", { onShowHello : function () { MessageToast.show("Hello World"); } }); });

结果样式