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

主页 » SAP文库 » Fiori

作者 fareise 2018-03-16    711

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

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


[html] view plain copy

  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,编写如下代码:


[javascript] view plain copy

  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代码如下:


[javascript] view plain copy

  1. sap.ui.define([  

  2.    "sap/ui/core/mvc/Controller",  

  3.   "color:#ff0000;""sap/m/MessageToast"], function (Controller, MessageToast) {  

  4.    "use strict";  

  5.    return Controller.extend("sap.ui.demo.wt.controller.App", {  

  6.       onShowHello : function () {  

  7.         "color:#ff0000;"> MessageToast.show("Hello World");  

  8.       }  

  9.    });  

  10. });  


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

    


    要点总结:

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

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

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


本文原始地址:http://51itbooks.com/sap/theme/289.html

转载请注明出处来自 IT文库

上一篇

AA固定资产|概述

下一篇

HTML5开发移动web应用——SAPUI5篇(5)