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.mzph.cn/pingmian/47881.shtml

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

相关文章

【AMD/Xilinx】FPGA远程烧录调试工具安装及使用

【AMD/Xilinx】FPGA远程烧录调试工具安装及使用

问题描述 在学习工作中&#xff0c;本人遇到了连接FPGA的服务器电脑没有Vivado或Vivado版本较低&#xff0c;导致没办法查看ila的情况。在这种情况下一方面重新安装Vivado需要占用大量存储空间&#xff0c;另一方面使用远程桌面软件连接服务器电脑的画质较为模糊&#xff0c;影…
阅读更多...
保姆级教程！！教你通过【Pycharm远程】连接服务器运行项目代码

保姆级教程！！教你通过【Pycharm远程】连接服务器运行项目代码

小罗碎碎念 这篇文章主要解决一个问题——我有服务器&#xff0c;但是不知道怎么拿来写代码&#xff0c;跑深度学习项目。确实&#xff0c;玩深度学习的成本比较高&#xff0c;无论是前期的学习成本&#xff0c;还是你需要具备的硬件成本&#xff0c;都是拦路虎。小罗没有办法…
阅读更多...
使用Web控制端和轻量级客户端构建的开放Web应用防火墙（OpenWAF）

使用Web控制端和轻量级客户端构建的开放Web应用防火墙（OpenWAF）

目录 1. 简介2. 项目结构3. Web控制端3.1. 功能概述3.2. 审计&#xff08;攻击&#xff09;日志查看3.3. 多个WAF的集中监控和操作3.4. 使用socket进行封装3.5. 日志的高效存储和检索&#xff08;Redis&#xff09; 4. 轻量级客户端4.1. 功能概述4.2. 对Web程序的防护4.3. 网络…
阅读更多...
纯css实现语音播报动画效果

纯css实现语音播报动画效果

先来看看效果图 黑色以下代码 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAAF6fiUAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAO8SURBVGiB1ZlPaBxVHMe/v7fbkmUZErRs9/1moUtYBBfxklZR8aYg5KAgvcT25MFDvUhPTaGnHoKIlOpJ0VsPUvAgKNjSS0EPAVGKya…
阅读更多...
数据结构 - 队列（精简介绍）

数据结构 - 队列（精简介绍）

文章目录 单端队列单端队列操作&#xff1a;Queue实现 双端队列双端队列操作&#xff1a;Deque实现 循环队列循环队列手动实现 优先级队列Q 不断取最大礼物并开方 单端队列 普通队列为单端队列&#xff0c;先进先出&#xff08;FIFO&#xff09; 只能从尾部插入&#xff0c;头…
阅读更多...
【MySQL进阶篇】SQL优化

【MySQL进阶篇】SQL优化

1、插入数据 insert优化 批量插入&#xff1a; insert into tb_user values(1,tom),(2,cat),(3,jerry); 如果插入数据过大&#xff0c;可以将业务分割为多条insert语句进行插入。 手动提交事务&#xff1a; start transaction; insert into tb_user values(1,tom),(2,cat),(3…
阅读更多...
AI算不出9.11和9.9哪个大？六家大模型厂商总结了这些原因

AI算不出9.11和9.9哪个大？六家大模型厂商总结了这些原因

大模型“答对”或“答错”其实是个概率问题。关于“9.11和9.9哪个大”&#xff0c;这样一道小学生难度的数学题难倒了一众海内外AI大模型。7月17日&#xff0c;第一财经报道了国内外“12个大模型8个都会答错”这道题的现象&#xff0c;大模型的数学能力引发讨论。 “从技术人员…
阅读更多...
puzzle（0611）《组合+图论》追捕问题

puzzle（0611）《组合+图论》追捕问题

目录 一&#xff0c;追及问题 1&#xff0c;警察和小偷 2&#xff0c;旋转的4个硬币 3&#xff0c;抓狐狸 二&#xff0c;围堵问题 三&#xff0c;追及围堵 一&#xff0c;追及问题 1&#xff0c;警察和小偷 如下图&#xff0c;警察先走&#xff0c;警察和小偷轮流一人…
阅读更多...
【LLM】基于ColossalAI-0.3.6对llama2-7B-Chat做全参数微调

【LLM】基于ColossalAI-0.3.6对llama2-7B-Chat做全参数微调

文章目录 环境准备工作下载llama2-7B下载ColossalAI数据集准备准备原始数据集数据集处理开始训练准备训练脚本运行脚本推理验证加载模型推理环境 操作系统： ubuntu22.04机器规格： CPU：96c；内存：736 GiB；GPU：8 * NVIDIA V100 (32GB)软件信息： Python 3.11.5；ColossalA…
阅读更多...
在 Navicat BI 创建自定义字段：类型更改字段

在 Navicat BI 创建自定义字段：类型更改字段

早在 Navicat 17 的预览版中&#xff0c;我们就已经介绍了一些新的商业智能&#xff08;BI&#xff09;功能&#xff0c;即图表互动和计算字段。需要说明的是&#xff0c;计算字段不是 Navicat BI 中唯一可用的自定义字段类型。事实上&#xff0c;有五种&#xff1a;类型改变、…
阅读更多...
自定义View（8）View的绘制流程

自定义View（8）View的绘制流程

安卓UI的重点之一就是View的绘制流程&#xff0c;经常出现在面试题中。熟悉View的绘制流程&#xff0c;不仅能轻松通过View相关的面试&#xff0c;也可以让我们更加方便的使用自定义View以及官方View。此篇先以常见面试题为切入点&#xff0c;说明自定义View的重要性&#xff0…
阅读更多...
LLM大模型实战项目--基于Stable Diffusion的电商平台虚拟试衣

LLM大模型实战项目--基于Stable Diffusion的电商平台虚拟试衣

本文详细讲解LLM大模型实战项目&#xff0c;基于Stable Diffusion的电商平台虚拟试衣 一、项目介绍 二、阿里PAI平台介绍 三、阿里云注册及开通PAI 四、PAI_DSW环境搭建 五、SDLORA模型微调 一、项目介绍 AI虚拟试衣是一种创新的技术&#xff0c;利用人工智能和计算机视觉技…
阅读更多...
【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 卢小姐的生日礼物(200分) - 三语言AC题解(Python/Java/Cpp)

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 卢小姐的生日礼物(200分) - 三语言AC题解(Python/Java/Cpp)

🍭 大家好这里是清隆学长 ，一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 💻 ACM银牌🥈| 多次AK大厂笔试 ｜ 编程一对一辅导 👏 感谢大家的订阅➕ 和 喜欢💗 最新华为OD机试D卷目录，全、新、准，题目覆盖率达 95% 以上，支持题目在线评测…
阅读更多...
为什么现在的小家电换了Type-C接口后需要PD诱骗芯片

为什么现在的小家电换了Type-C接口后需要PD诱骗芯片

在当今科技飞速发展的时代&#xff0c;小家电产品正经历着前所未有的变革。随着消费者对于便捷性、高效性和安全性的要求不断提高&#xff0c;小家电产品的接口设计也逐渐向Type-C接口靠拢。然而&#xff0c;这一转变并非简单的接口替换&#xff0c;它背后隐藏着对PD诱骗芯片的…
阅读更多...
【PG】PostgreSQL高可用之repmgr事件通知

【PG】PostgreSQL高可用之repmgr事件通知

目录 描述 结合脚本 占位符 repmgr命令 生成的事件&#xff1a; repmgrd 生成的事件&#xff08;流复制模式&#xff09;&#xff1a; 描述 每次repmgr或repmgrd执行重大事件时&#xff0c;都会将该事件的记录连同时间戳、失败或成功的标识以及进一步的详细信息&#xff08…
阅读更多...
docker安装好了，但是启动失败

docker安装好了，但是启动失败

新项目要用docker部署，但是docker安装完后，启动失败，服务器用的是国产化的（之前的服务器非国产化，之前也没任何问题），国产化的使用起来问题一大堆，还是bclinux 安装好后重启一直显示 使用journalctl -xe也没任何报错 使用systemctl status docker查看docker状态是灰…
阅读更多...
VScode：前端项目中yarn包的安装和使用

VScode：前端项目中yarn包的安装和使用

一、首先打开PowerShell-管理员身份运行ISE 输入命令&#xff1a; set-ExecutionPolicy RemoteSigned 选择“全是”&#xff0c;表示允许在本地计算机上运行由本地用户创建的脚本&#xff0c;没有报错就行了 二、接着打开VScode集成终端&#xff0c;安装yarn插件 输入 npm ins…
阅读更多...
ELK日志分析系统部署文档

ELK日志分析系统部署文档

一、ELK说明 ELK是Elasticsearch&#xff08;ES&#xff09; Logstash Kibana 这三个开源工具组成&#xff0c;官方网站: The Elastic Search AI Platform — Drive real-time insights | Elastic 简单的ELK架构 ES: 是一个分布式、高扩展、高实时的搜索与数据分析引擎。它…
阅读更多...
前端pc和小程序接入快递100（跳转方式和api方式）====实时查询接口

前端pc和小程序接入快递100（跳转方式和api方式）====实时查询接口

文章目录 跳转方式微信小程序&#xff08;我以uniapp为例&#xff09;pc api接入说明关于签名计算成功示例 跳转方式 没有任何开发成本&#xff0c;直接一键接入 可以直接看官方文档 https://www.kuaidi100.com/openapi/api_wxmp.shtml 微信小程序&#xff08;我以uniapp为例…
阅读更多...
Python求均值，方差，标准差

Python求均值，方差，标准差

参考链接&#xff1a;变异系数&#xff08;Coefficient of Variation,COV&#xff09;和协方差&#xff08;Covariance, Cov&#xff09;-CSDN博客 参考链接&#xff1a;pandas中std和numpy的np.std区别_numpy pandas std-CSDN博客 在计算蛋白质谱数据中的每个蛋白对应的变异…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023