ui5详细教程Stone

SAPUI5 (06) - MVC 基础

2016-12-27  本文已影响704人  Stone0823

MVC 是一种架构模式,SAPUI5 对 MVC 提供了良好的支持。

什么是 MVC?

MVC 是 Model、View、Controller 的简称,用于将程序的数据、界面展示和用户交互分离,通过这种分离,可以简化开发,以及让某部分变动的时候,不需要影响其他部分,从而降低耦合。

下面的图示来自 SAPUI5 SDK,清晰地说明了三个概念之间的关系:

图片来自SAPUI5 SDK

我们用一个实例来演示 MVC 。我们要实现的一个非常简单的功能:在页面上放一个 Button,当用户点击的时候,显示 "Hlello"。对,前面 Hello World 程序已经实现过。我们先不用 MVC,将代码写在一个地方,为了和之前代码相比有点新东西,我们将 JavaScript 的 alert() 替换成sap.m.MessageBox.information(),OpenUI5 风格的对话框。先介绍一下 sap.m.MessageBox:

sap.m.MessageBox 对象

sap.m.MessageBox 是 OpenUI5 提供的对话框,可以显示信息、警告、错误等等。MessageBox 类是静态类,在使用之前必须执行

jQuery.sap.require("sap.m.MessageBox");

语句。OpenUI5 带有 jQuery 包,jQuery.sap.require(vModuleName) 方法的作用是加载指定的模块并且执行,这样 MessageBox才被加载, show() 方法才能运行。

sap.m.MessageBox 有如下方法:

语法基本相同:

sap.m.MessageBox.some_method(vMessage, mOptions?)

不使用 MVC 实现功能

OK,我们先把代码都写在 index.html 中:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

        <script src="resources/sap-ui-core.js"
                id="sap-ui-bootstrap"
                data-sap-ui-libs="sap.m"
                data-sap-ui-theme="sap_bluecrystal">
        </script>
        
        <!-- Application area -->
        <script>
            function display() {
                var oButton = new sap.m.Button({text: "Click me."});
                
                oButton.attachPress(function() {
                    jQuery.sap.require("sap.m.MessageBox");
                    sap.m.MessageBox.information("Hello SAPUI5!", {                     
                        title: "SAPUI5 button test"
                    });
                });
                
                oButton.placeAt("content");
            }
            
            sap.ui.getCore().attachInit(display);
        </script>

    </head>
    <body class="sapUiBody" role="application">
        <div id="content"></div>
    </body>
</html>

使用 MVC 实现

本示例只有点击 Button,并没有数据,所以只涉及 view 和 controller。首先我们介绍一下 OpenUI5 的 View 有哪些类型。

SAPUI5 有哪些类型的 View?

SAPUI5 提供了JSView, XMLView, JSONViewHTMLView 等几种类型。SAPUI5 的示例代码主要采用 XMLView,这个也是现代开发语言的趋势。而对开发人员来说,JSView 也可能感觉比较舒适,所以建议重点掌握这两个类型就可以了,并且学会在两种风格的代码之间进行翻译。

Eclipse 中如何创建 View?

当在 Eclipse 中新建一个SAPUI5 Application Project 类型的项目时,Eclipse 会提示是否创建 initial view,如果勾选,Eclipse 会创建 MVC 分离的代码框架。另外,开发人员也随时可以创建 View。我们先来看第一种方式:

新建一个 SAPUI5 Application Project,project name 为zsapui5_butto_mvc,勾选 Create an Initial View:

点击 Next,选择 JavaScript View,把 View 命名为 master:

点击 Finish,代码框架创建完成。来探索一下代码:

代码说明

index.html 文件

首先还是 index.html (在 WebContent 文件夹下),我们注意到,Application area 的代码发生了变化,这个是另一个常用的模式。

<script>
        sap.ui.localResources("zsapui5_button_mvc");
        var app = new sap.m.App({initialPage:"idmaster1"});
        var page = sap.ui.view({
            id:"idmaster1", 
            viewName:"zsapui5_button_mvc.master", 
            type:sap.ui.core.mvc.ViewType.JS});
        app.addPage(page);
        app.placeAt("content");
</script

View 文件

View 文件为 WebContent/zsapui5_button_mvc/master.view.js。代码如下:

sap.ui.jsview("zsapui5_button_mvc.master", {

    /** Specifies the Controller belonging to this View. 
    * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
    * @memberOf zsapui5_button_mvc.master
    */ 
    getControllerName : function() {
        return "zsapui5_button_mvc.master";
    },

    /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
    * Since the Controller is given to this method, its event handlers can be attached right away. 
    * @memberOf zsapui5_button_mvc.master
    */ 
    createContent : function(oController) {
        return new sap.m.Page({
            title: "Title",
            content: [
            
            ]
        });
    }
});

里面有两个函数,getControllerName 函数用于返回 controller name,createContent 函数用于返回页面上要显示的元素,比如我们现在要返回的是一个 Button,我们将这个函数改写为:

    createContent : function(oController) {
        var oButton = new sap.m.Button({
            text: "Click me",
            press: oController.onButtonPressed
        });
        
        return oButton;
    }

点击的时候,调用 controller 中的 onButtonPressed 方法。

控制器代码文件

控制器代码文件为 WebContent/zsapui5_button_mvc/master.controller.js。在Eclipse 中创建的 Controller, 起始代码如下:

sap.ui.controller("zsapui5_button_mvc.master", {

/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf zsapui5_button_mvc.master
*/
//  onInit: function() {
//
//  },

/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf zsapui5_button_mvc.master
*/
//  onBeforeRendering: function() {
//
//  },

/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf zsapui5_button_mvc.master
*/
//  onAfterRendering: function() {
//
//  },

/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf zsapui5_button_mvc.master
*/
//  onExit: function() {
//
//  }

});

我们看到,这些函数都被注释掉了,它们是 controller 生命周期中很重要的方法,我们后面再介绍,目前我们只需要加上 onButtonPressed() 方法。我把它写在最前面,后面的代码保持不动。当然,你也可以删除。

sap.ui.controller("zsapui5_button_mvc.master", {
    onButtonPressed: function() {
        jQuery.sap.require("sap.m.MessageBox");
        sap.m.MessageBox.information("Hello from MVC.", {
            title: "SAPUI5 MVC test"
        });
    }

/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf zsapui5_button_mvc.master
*/
//  onInit: function() {
//
//  },

/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf zsapui5_button_mvc.master
*/
//  onBeforeRendering: function() {
//
//  },

/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf zsapui5_button_mvc.master
*/
//  onAfterRendering: function() {
//
//  },

/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf zsapui5_button_mvc.master
*/
//  onExit: function() {
//
//  }

});

这样,就用 MVC 方式实现了和前面一样的功能。需要说明的时,Eclipse 的 Controller 代码是一种老式的代码。因为 SAP 已经停止对 Eclipse 开发插件的支持,所以也不会再更新。后面我们经常用的是 sap.ui.define 方法定义的 controller 代码。后续介绍。

上一篇 下一篇

猜你喜欢

热点阅读