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控制器定义了两个函数：onInit和onButtonPress。onInit函数在控制器初始化时被调用，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/UIComponent的 init()函数，以完成Router的创建，以及定义在manifest.json中rootView(也即应用程序的根视图)的创建
  7. 根视图会根据其内部的声明，创建根组件
  8. 与此同时，组件文件中的init()函数会初始化Router
  9. Router就绪后，会去创建其它必要的视图
  10. 在视图内部，会加载对应的控制器文件
  11. 在加载过程中，控制器内的init()函数也会被相应地触发
  12. Router会将视图放置于根控件上，此时，在视图上，模型数据都是可用的
  13. 接下来，会对绑定数据至视图进行评估
  14. 没有问题的话，会完成数据绑定，也即将模型上面的数据真正绑定在视图上

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

3. 小结

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/380610.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Android 性能优化之卡顿优化

Android 性能优化之卡顿优化

文章目录 Android 性能优化之卡顿优化卡顿检测TraceView配置缺点 StricktMode配置违规代码 BlockCanary配置问题代码缺点 ANRANR原因ANRWatchDog监测解决方案 Android 性能优化之卡顿优化 卡顿检测 TraceViewStricktModelBlockCanary TraceView 配置 Debug.startMethodTra…
阅读更多...
XMl基本操作

XMl基本操作

引言 使⽤Mybatis的注解⽅式&#xff0c;主要是来完成⼀些简单的增删改查功能. 如果需要实现复杂的SQL功能&#xff0c;建议使⽤XML来配置映射语句&#xff0c;也就是将SQL语句写在XML配置⽂件中. 之前&#xff0c;我们学习了&#xff0c;用注解的方式来实现MyBatis 接下来我们…
阅读更多...
【STM32】按键控制LED光敏传感器控制蜂鸣器（江科大）

【STM32】按键控制LED光敏传感器控制蜂鸣器（江科大）

一、按键控制LED LED.c #include "stm32f10x.h" // Device header/*** 函 数&#xff1a;LED初始化* 参 数&#xff1a;无* 返 回 值&#xff1a;无*/ void LED_Init(void) {/*开启时钟*/RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOA, ENAB…
阅读更多...
数据结构（稀疏数组）

数据结构（稀疏数组）

简介 稀疏数组是一种数据结构&#xff0c;用于有效地存储和处理那些大多数元素都是零或者重复值的数组。在稀疏数组中&#xff0c;只有非零或非重复的元素会被存储&#xff0c;从而节省内存空间。 案例引入 假如想把下面这张表存入文件&#xff0c;我们会怎么做&#xff1f;…
阅读更多...
超简单安装指定版本的clickhouse

超简单安装指定版本的clickhouse

超简单安装指定版本的clickhouse 命令执行shell脚本 idea连接 命令执行 参考官网 # 下载脚本 wget https://raw.githubusercontent.com/183461750/doc-record/d988dced891d70b23c153a3bbfecee67902a3757/middleware/data/clickhouse/clickhouse-install.sh # 执行安装脚本(中…
阅读更多...
记录些Spring+题集（12）

记录些Spring+题集（12）

11种API性能优化方法 一、索引优化 接口性能优化时&#xff0c;大家第一个想到的通常是&#xff1a;优化索引&#xff0c;优化索引的成本是最小的。 你可以通过查看线上日志或监控报告&#xff0c;发现某个接口使用的某条SQL语句耗时较长。 这条SQL语句是否已经加了索引&…
阅读更多...
PHP Program to print pyramid pattern （打印金字塔图案的程序）

PHP Program to print pyramid pattern （打印金字塔图案的程序）

编写程序打印由星星组成的金字塔图案 例子 &#xff1a; 输入&#xff1a;n 6输出&#xff1a; * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 我们强烈建…
阅读更多...
基于术语词典干预的机器翻译挑战赛笔记Task2 #Datawhale AI 夏令营

基于术语词典干预的机器翻译挑战赛笔记Task2 #Datawhale AI 夏令营

上回&#xff1a; 基于术语词典干预的机器翻译挑战赛笔记Task1 跑通baseline Datawhale AI 夏令营-CSDN博客文章浏览阅读718次&#xff0c;点赞11次&#xff0c;收藏8次。基于术语词典干预的机器翻译挑战赛笔记Task1 跑通baselinehttps://blog.csdn.net/qq_23311271/article/d…
阅读更多...
Linux网络：应用层协议HTTP（一）

Linux网络：应用层协议HTTP（一）

一、什么是HTTP协议 虽然我们说, 应用层协议是我们程序猿自己定的. 但实际上, 已经有大佬们定义了一些现成的, 又非常好用的应用层协议, 供我们直接参考使用. HTTP(超文本传输协议)就是其中之一。 在互联网世界中&#xff0c;HTTP&#xff08;HyperText Transfer Protocol&…
阅读更多...
【考研数学】线代满分经验分享+备考复盘

【考研数学】线代满分经验分享+备考复盘

我一战二战复习都听了李永乐的线代课&#xff0c;二战的时候只听了一遍强化&#xff0c;个人感觉没有很乱&#xff0c;永乐大帝的课逻辑还是很清晰的。 以下是我听向量这一章后根据听课内容和讲义例题总结的部分思维导图&#xff0c;永乐大帝讲课的时候也会特意点到线代前后联…
阅读更多...
基于百度地图API实现地图位置选取的移动端页面开发教程 (JQuery+Html+JavaScript+CSS)

基于百度地图API实现地图位置选取的移动端页面开发教程 (JQuery+Html+JavaScript+CSS)

本文详细讲解了如何使用百度地图API实现移动端页面中的地图位置选取功能。文章首先介绍了百度地图API的2.0和3.0版本功能&#xff0c;并重点采用3.0 API。接着&#xff0c;逐步展示了如何构建基本的地图页面&#xff0c;如何通过点击地图获取经纬度和地理信息&#xff0c;以及如…
阅读更多...
uniapp vue3 上传视频组件封装

uniapp vue3 上传视频组件封装

首先创建一个 components 文件在里面进行组件的创建 下面是 vvideo组件的封装 也就是图片上传组件 只是我的命名是随便起的 <template><!-- 上传视频 --><view class"up-page"><!--视频--><view class"show-box" v-for"…
阅读更多...
【Android面试八股文】荣耀面试算法题：输入一个N阶方阵(0＜N＜10),输出此方阵顺时针旋转M(0＜=M＜=10000)次后的方阵

【Android面试八股文】荣耀面试算法题：输入一个N阶方阵(0＜N＜10),输出此方阵顺时针旋转M(0＜=M＜=10000)次后的方阵

文章目录 1. 算法题：输入一个N阶方阵(0<N<10),输出此方阵顺时针旋转M(0<=M<=10000)次后的方阵1.1 题目描述1.2 算法实现1.2.1 步骤说明：1.2.2 算法实现1.2.3 代码实现：1.2.4 程序说明：1.2.5 示例详细讲解如何将一个矩阵顺时针旋转90度1. 算法题：输入一个N阶方…
阅读更多...
达梦数据库DM8-索引篇

达梦数据库DM8-索引篇

目录 一、前景二、名词三、语法1、命令方式创建索引1.1 创建索引空间1.2.1 创建普通索引并指定索引数据空间1.2.2 另一种没验证&#xff0c;官方写法1.3 复合索引1.4 唯一索引1.5 位图索引1.6 函数索引 2、创建表时候创建索引3、可视化方式创建索引3.1 打开DM管理工具3.2 找到要…
阅读更多...
生成式人工智能落地校园与课堂的15个场景

生成式人工智能落地校园与课堂的15个场景

生成式人工智能正在重塑教育行业&#xff0c;为传统教学模式带来了革命性的变化。随着AI的不断演进&#xff0c;更多令人兴奋的应用场景将逐一显现&#xff0c;为学生提供更加丰富和多元的学习体验。 尽管AI在教学中的应用越来越广泛&#xff0c;但教师们也不必担心会被完全替代…
阅读更多...
[电机控制]-三相鼠笼电机simulink建模

[电机控制]-三相鼠笼电机simulink建模

三相鼠笼电机simulink建模 1 方程 电机方程&#xff1a; d i s α d t K 1 i s α K 2 ϕ r α K 3 ω r ϕ r β K 4 v s α \frac{di_{s\alpha}}{dt}K_{1}i_{s\alpha}K_{2}\phi_{r\alpha}K_{3}\omega_{r}\phi_{r\beta}K_{4}v_{s\alpha} dtdisα​​K1​isα​K2​ϕrα…
阅读更多...
VSCODE 下 openocd Jlink 的配置笔记

VSCODE 下 openocd Jlink 的配置笔记

title: VSCODE 下 openocd Jlink 的配置笔记 tags: STM32HalCubemax 文章目录 内容VSCODE 下 openocd Jlink 的配置笔记安装完成后修改jlink的配置文件然后修改你的下载器为jlink烧录你的项目绝对会出现下面的问题那么打开下载的第一个软件 &#xff08;点到这个jlink右键&…
阅读更多...
视频分帧【截取图片】（YOLO目标检测【生成数据集】）

视频分帧【截取图片】（YOLO目标检测【生成数据集】）

高效率制作数据集【按这个流程走&#xff0c;速度很顶】 本次制作&#xff0c;1059张图片【马路上流动车辆】 几乎就是全自动了&#xff0c;只要视频拍得好&#xff0c;YOLO辅助制作数据集就效率极高 视频中的图片抽取&#xff1a; 【由于视频内存过大&#xff0c;遇到报错执行…
阅读更多...
IO半虚拟化-vhost学习笔记

IO半虚拟化-vhost学习笔记

参考&#xff1a;系《深入浅出dpdk》学习笔记以及redhat的官方博客 vhost属于virtio-net网络设备的后端驱动&#xff0c;经历了从virtio-net后端&#xff0c;到内核态vhost-net&#xff0c;到vhost-user的演进过程。先过一下背景知识&#xff0c; 背景知识 QEMU QEMU 是一个…
阅读更多...
几种常用排序算法

几种常用排序算法

1 基本概念 排序是处理数据的一种最常见的操作&#xff0c;所谓排序就是将数据按某字段规律排列&#xff0c;所谓的字段就是数据节点的其中一个属性。比如一个班级的学生&#xff0c;其字段就有学号、姓名、班级、分数等等&#xff0c;我们既可以针对学号排序&#xff0c;也可…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023