SAP OPEN UI5 Step5 Controllers

转载请联系vx：xiaoshitou5854

Controllers

用Controller控制按钮的点击事件

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>

controllerName：指明这个view要使用的controller。view并不是一定要使用Controller，如果使用了，就要先在这里定义，当此view被加载完后，此view的Controller紧接着被加载。
.onShowHello：点的意思是press事件的代码的所在文件是，在绑定到此view的controller里，也就是在webapp/controller/App.controller.js文件里。

sap.ui.demo.walkthrough.controller.App：指明的具体文件是webapp/controller/App.controller.js

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

sap.ui.define([
   "sap/ui/core/mvc/Controller"
], function (Controller) {
   "use strict";
   return Controller.extend("className", {
      onShowHello : function () {
         // show a native JavaScript alert
         alert("Hello World");
      }
   });
});

在App.view.xml定义的Button，没有按钮点击后调用的具体js代码，具体代码写在了webapp/controller/App.controller.js里
Controller.extend方法，返回sap.ui.core.mvc.Controller类的子类，子类扩展了父类，加了onShowHello方法。参数className是子类的名字，任意取，但最好能标识出具体是哪个js文件，所以是使用【sap.ui.demo.walkthrough.controller.App】比较好。

onShowHello就是view文件的Button里定义的press属性的值。

index.js,index.html都没有变化，还是用view替换id为content的DOM。也就是body，现在view定义的Button，而不是Text，所以显示的就是Button了。

sap.ui.define([
	"sap/ui/core/mvc/XMLView"
], function (XMLView) {
	"use strict";

	XMLView.create({
		viewName: "sap.ui.demo.walkthrough1.view.App1"
	}).then(function (oView) {
		oView.placeAt("content");
	});

});

定义view和Controller文件名的习俗：

*.view.xml

*.controller.js

本人微信：xiaoshitou5854