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

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

1. <mvc:View  
2.    controllerName="sap.ui.demo.wt.controller.App"  
3.    xmlns="sap.m"  
4.    xmlns:mvc="sap.ui.core.mvc">  
5.    <Button  
6.       text="Say Hello"  
7.       press="onShowHello"/>  
8. </mvc:View>

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

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

1. sap.ui.define(["sap/ui/core/mvc/Controller"], function (Controller) {  
2.    "use strict";  
3.    return Controller.extend("sap.ui.demo.wt.controller.App", {  
4.       onShowHello : function () {  
5.          alert("Hello World");  
6.       }  
7.    });  
8. });

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

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

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

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

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

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

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

   本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！