HTML5开发移动web应用——SAP UI5篇(4)

    我们在项目中添加Controller，来设定控制器。我们制作一个按钮，点击该按钮后，自动弹出hellow,world的对话框。

修改App.view.xml中代码为如下形式：

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

    在头部通过controllerName定义了controller的命名空间。添加了Button标签，定义了一个按钮，并设定了其text属性和press属性。press定义了点击后执行的函数为onShowHello。

视图修改完毕后，我们对应的建立一个控制器文件，App.controller.js，编写如下代码：

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

    一点一点分析这个代码，define方法定义一个控制器。其中sap/ui/core/mvc/Controller，大家可以在下载的sdk文件中的resources文件中按照目录结构找到，相当于一个控制器的基础文件。之后定义方法，这里我们之定义了一个onShowHello方法，内容很简单，弹出一个Hello World对话框。

上面的alert方法是js原生的方法，因此弹出的还是一个很丑的提示框。UI5中提供了很多组件，其中有一个组件就可以优化弹出框的形象。修改js代码如下：

sap.ui.define([
   "sap/ui/core/mvc/Controller",
  <span style="color:#ff0000;"> "sap/m/MessageToast"</span>], function (Controller, MessageToast) {
   "use strict";
   return Controller.extend("sap.ui.demo.wt.controller.App", {
      onShowHello : function () {
        <span style="color:#ff0000;"> MessageToast.show</span>("Hello World");
      }
   });
});

    这里面引入了sap.m中的MessageToast组件，和Controller组件的使用方式类似。在onShowHello函数中通过MessageToast.show方法代替alert就可以显示UI5自己的提示框了。

    

    要点总结：

    1、在控制器中引用ui5基础文件组件并应用到自己控制器的方法

    2、XML中定义标签及函数与使用XML文件内容的方法

    3、使用ui5内置的精美组件