您的位置:首页 > 娱乐 > 八卦 > SAPUI5基础知识16 - 深入理解MVC架构

SAPUI5基础知识16 - 深入理解MVC架构

2024/10/5 21:44:02 来源:https://blog.csdn.net/nkGavinGuo/article/details/140542187  浏览:    关键词:SAPUI5基础知识16 - 深入理解MVC架构

1. 背景

经过一系列的练习,相信大家对于SAPUI5的应用程序已经有了直观的认识,我们在练习中介绍了视图、控制器、模型的概念和用法。在本篇博客中,让我们回顾总结下这些知识点,更深入地理解SAPUI5的MVC架构。

首先,让我们看下SAPUI5的整体架构。
在这里插入图片描述

  • Device层:展示了SAPUI5应用程序的运行设备,SAPUI5应用程序可以在任何设备(手机、平板电脑或台式电脑)的浏览器中运行。

  • Client/Browser层:展示了SAPUI5的MVC架构,通过“模型-视图-控制器(Model - View - Controller, MVC)”概念将信息的表示与用户交互分离开来。

  • Resource Hander/Gateway Server层:展示了资源的加载方式,以及应用数据的访问方式。SAPUI5库是从Server加载的,在访问应用程序业务数据,是通过SAP网关(Gateway)或SAP Cloud平台使用OData模型。

接下来,让我们更详细地介绍下Client/Browser层。

2. MVC

2.1 交互关系

MVC(Model-View-Controller)架构是一种设计模式,用于分离应用程序的不同部分,以提高代码的可维护性和可扩展性。MVC 模式将应用程序分为三部分:模型(Model)、视图(View)和控制器(Controller)。

在这里插入图片描述

  • 模型Model:负责保存应用数据,以及提供读取、设置和更新数据的一系列方法
  • 视图View:负责定义和渲染UI
  • 控制器Controller:通过修改视图和模型来响应视图事件和用户交互,控制器将视图逻辑与模型逻辑分离

控制器与模型和视图的关系:

  • 控制器可以直接修改模型中的数据,它可以通过注册函数的方式,监测模型的变化;
  • 控制器可以直接修改视图以及视图上面的元素,通过事件处理程序(event handler),控制器可以响应视图上面的事件。

模型和视图的关系:

  • 模型上保存的数据,可以通过"数据绑定"的方式关联到视图上,视图可以读取或编辑模型上的数据(通过数据的实时绑定,不需要将模型上的数据复制到视图上)

2.2 构建要素

让我们拆解一下一个SAPUI5的应用程序,然后分析其构建的元素。
在这里插入图片描述
通过上面的拆解图,可以看到:

  • 视图,是由最基本的SAPUI5控件构成(例如如表,按钮,输入框,复选框);
  • 每一个视图,都会有一个对应的控制器,用于负责UI相关的业务逻辑;
  • 模型是负责数据的操作,包括客户端和服务器端的数据;
  • 而组件,是用于应用程序的描述和封装,使得应用程序可以运行在不同的组件容器中。

2.1 模型(Model)

模型代表应用程序的数据和业务逻辑,它负责数据的获取、存储和处理。

在SAPUI5中,负责数据模型绑定的API是sap.ui.model。它可以处理JSON、XML 或 OData等格式的数据。模型支持的绑定模式有单向双向一次性,绑定模式可以由应用程序指定或更改。

通常情况下,我们在JavaScript文件中,会首先加载模型文件中的数据,然后通过视图对象提供的setModel()方法,将模型数据绑定到视图对象上。在视图上,可以通过绑定表达式{...},例如,{/recipient/name}, {i18n>helloMessage}获取模型上面的数据。

2.1.1 JSONModel(JSON模型)

SAPUI5中的JSON Model是一个客户端模型,可以用于在SAPUI5应用程序中处理和操作JSON数据。SAPUI5提供了绑定控件数据到JSON对象的机制,使得当JSON数据改变时,UI控件也会自动更新。

代码示例:

// 创建一个JSON Model实例
var oModel = new sap.ui.model.json.JSONModel();// 设置JSON数据到模型中
var oData = {"employees": [{ "firstName": "John", "lastName": "Doe" },{ "firstName": "Anna", "lastName": "Smith" },{ "firstName": "Peter", "lastName": "Jones" }]
};
oModel.setData(oData);// 将模型绑定到视图
this.getView().setModel(oModel);

在视图文件中,使用以下方式绑定数据到控件:

<List items="{/employees}"><items><ObjectListItem title="{firstName}" intro="{lastName}" /></items>
</List>

在上述示例中,我们首先创建了一个JSON Model实例,然后设置了一些JSON数据到模型中。然后,我们将模型绑定到视图。在视图中,我们使用绑定语法将数据绑定到一个列表控件。当JSON数据改变时,列表控件会自动更新。

当然JSON模型中的数据,是可以存储在单独的JSON文件中的,当需要处理模型数据时,可以从JSON文件中加载,如下例:

var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData("mydata.json");
sap.ui.getCore().setModel(oModel);

2.1.2 ResourceModel资源模型

ResourceModel资源模型用于处理i18n资源束,用于实现应用程序的国际化。

代码示例:

var oModel = new sap.ui.model.resource.ResourceModel({bundleName: "myapp.i18n.i18n"
});
sap.ui.getCore().setModel(oModel, "i18n");

2.1.3 XMLModel

XMLModel是一个客户端模型,用于处理XML格式的数据。它可以用于存储和处理来自服务器的XML数据。

代码示例:

var oModel = new sap.ui.model.xml.XMLModel();
oModel.loadData("mydata.xml");
sap.ui.getCore().setModel(oModel);

2.1.4 ODataModel

ODataModel是一个服务器模型,用于处理OData服务。它可以用于与OData服务进行交互。

代码示例:

var oModel = new sap.ui.model.odata.v2.ODataModel("/my/service/url/");
sap.ui.getCore().setModel(oModel);

2.2 视图(View)

在SAPUI5中,视图/View是一个用于定义用户界面的组件。负责展示数据并接收用户的输入。视图通常与一个或多个控制器关联,控制器负责处理用户的操作并更新模型的数据。

视图可以包含各种UI元素,如按钮、表格、图表等。

SAPUI5 支持多种视图类型(XML、HTML、JavaScript)。在使用 UI5 时,官方建议使用 XML视图,因为这样的代码可读性高,并会迫使我们将视图逻辑与控制器逻辑分开。

在这里插入图片描述

在创建视图文件时,要注意:

  • 视图名称大写 (例如, App.view.xml
  • 所有视图都存储在view文件夹中
  • XML视图的名称总是以*.view.xml结尾
  • 默认的XML命名空间是sap.m
  • 其他XML命名空间使用SAP命名空间的最后一部分作为别名(例如,sap.ui.core.mvc的别名为mvc

以下是一个使用XML定义的视图的示例:

<mvc:View controllerName="sap.ui.demo.walkthrough.controller.App" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m"><App id="app"><pages><Page title="{i18n>title}"><content><Button text="{i18n>showHelloButtonText}" press="onShowHello" id="helloButton" /></content></Page></pages></App>
</mvc:View>

在这个示例中,视图包含一个App组件,App组件包含一个Page组件,Page组件包含一个Button组件。Button组件的文本和按下事件由控制器处理。

2.3 控制器(Controller)

在SAPUI5中,控制器负责处理用户交互,处理业务逻辑,以及更新模型视图

控制器是一个JavaScript文件,它包含了一个特定视图的事件处理函数业务逻辑

  • 每个视图都有一个与之关联的控制器。
  • 控制器可以访问其关联的视图,以及视图中的控件。
  • 控制器还可以访问模型,以便获取和修改数据。

在SAPUI5中,控制器的创建和使用通常遵循以下步骤:

  1. webapp/controller目录下创建一个新的JavaScript文件,例如MyController.js。
  2. 在新的JavaScript文件中,定义一个新的SAPUI5控制器,这个控制器应该继承自sap.ui.core.mvc.Controller并作为返回对象,返回的控制器对象包含了控制器逻辑的实现。
  3. 在控制器中,定义事件处理函数和业务逻辑。这些函数可以通过this.getView()访问关联的视图,以及视图中的控件。
  4. 在视图中,使用controllerName属性指定关联的控制器。

在创建控制器文件时,要注意:

  • 控制器名称大写 (例如,App.controller.js)
  • 控制器与相关视图的名称相同(如果存在1:1关系)
  • 事件处理程序以on为前缀
  • 控制器名称总是以*.controller.js结尾

以下是一个简单的SAPUI5控制器的示例:

sap.ui.define(["sap/ui/core/mvc/Controller"
], function (Controller) {"use strict";return Controller.extend("my.namespace.MyController", {onInit: function () {// 在控制器初始化时执行的代码},onButtonPress: function () {// 处理按钮按下事件的代码var oView = this.getView();var oButton = oView.byId("myButton");oButton.setText("Pressed");}});
});

在这个示例中,MyController控制器定义了两个函数:onInitonButtonPressonInit函数在控制器初始化时被调用,onButtonPress函数用于处理按钮按下事件。

控制器的_hook方法是由框架定义的,并在视图和应用程序的特定状态下调用。

  • onInit(): 只调用一次,当视图被实例化时,所有控件已经被创建。我们可以在这里修改视图,获取UI元素的引用,注册事件处理程序或初始化控制器和子组件。
  • onExit(): 在视图及其控制器被销毁之前调用,用于释放资源和完成操作(或保存草稿)。
  • onAfterRendering(): 只在视图渲染后调用一次,我们可以执行后渲染操作。
  • onBeforeRendering(): 每当视图由于UI更改而重新渲染时调用,在第一次初始化步骤期间不会被调用。
    在这里插入图片描述

2.4 启动应用程序

在MVC框架下,一个SAPUI5应用的启动过程如下:
在这里插入图片描述

当用户启动SAPUI5应用程序后:

  1. SAPUI5框架首先会加载相关所需的资源
  2. 然后,组件容器加应用程序的组件
  3. 当组件就绪后,会加载此应用程序的描述符文件,也即manifest.json
  4. 根据manifest.json中的描述,组件会创建相关的模型对象,例如资源模型i18n
  5. 然后,组件文件Component.js中的init()函数会被触发。在init()函数中,通常会完成模型的实例化,并完成数据绑定setModel()。模型一般会直接绑定在组件上的,因为嵌套的控件会自动地继承父控件的承模型,因此模型的数据在视图上也是可用的。
  6. 需要注意,在触发组件文件Component.js中的init()函数时,其会先调用其父类sap/ui/core/UIComponentinit()函数,以完成Router的创建,以及定义在manifest.jsonrootView(也即应用程序的根视图)的创建
  7. 根视图会根据其内部的声明,创建根组件
  8. 与此同时,组件文件中的init()函数会初始化Router
  9. Router就绪后,会去创建其它必要的视图
  10. 在视图内部,会加载对应的控制器文件
  11. 在加载过程中,控制器内的init()函数也会被相应地触发
  12. Router会将视图放置于根控件上,此时,在视图上,模型数据都是可用的
  13. 接下来,会对绑定数据至视图进行评估
  14. 没有问题的话,会完成数据绑定,也即将模型上面的数据真正绑定在视图上

以上就是整个MVC架构下的程序加载过程。

3. 小结

本文对于SAPUI5的MVC框架进行了回顾和总结,通过本篇文章,将进一步加深前序博客中知识点的理解和认知。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com