8.1 设定背景：SAP UI5 在 Fiori 中的作用

SAP UI5 是构建 SAP Fiori 应用的核心技术框架。它是一个现代化的、基于 JavaScript 的框架，专为创建响应式、跨平台的企业应用而设计。SAP UI5 在 Fiori 生态系统中具有举足轻重的地位，因为每个 Fiori 应用都是使用 SAP UI5 构建的。该框架基于开放标准，包括 JavaScript、CSS 和 HTML5，并基于 OpenAjax 进行编译，因此可以与其他流行的 JavaScript 库集成使用。

8.2 SAP UI5 的主要特性和架构

SAP UI5 的特点是设计良好的数据模型、对性能优化的高度重视以及可扩展的 UI 组件模型，允许开发人员创建新的控件。

SAP UI5 的高级架构由一个核心 JavaScript 框架（包含 jQuery）以及一系列库、控件和主题组成。该框架还包含可选的服务器端组件，用于执行诸如主题生成之类的任务。最常用的控件库为应用程序 UI 提供了构建模块：

• sap.ui.commons： 包含传统桌面应用程序的基本控件，例如按钮和文本字段。
• sap.ui.table： 提供强大的表格和网格控件，用于显示大型数据集。
• sap.ui.ux3： 包含针对特定、较旧的 UX3 设计模式的控件。
• sap.m： 这是 Fiori 最重要的库，其中包含一套全面的响应式控件，旨在在移动设备和桌面设备上无缝运行。

8.3 模型-视图-控制器（MVC）范式

SAP UI5 基于模型-视图-控制器 (MVC) 软件设计模式构建，该模式将应用程序逻辑与用户界面分离。这种关注点分离是一种最佳实践，可使应用程序更易于开发、测试和维护。

• 型号： 模型负责管理应用程序数据。它保存数据，并且独立于用户界面。当模型中的数据发生更改时，它会通知所有绑定的视图控件进行更新。
• 视图： 视图负责定义和渲染用户界面。SAP UI5 提供多种视图类型：XML、JavaScript、JSON 和 HTML。分析各种视图类型的优缺点至关重要。 XML视图 这是 SAP 推荐的方法，因为它强制将 UI 的声明式结构与 Controller 中的命令式应用程序逻辑完全分离。这提高了代码的可读性和可维护性，尤其是在团队环境中。相比之下， JavaScript 视图 XML 提供了最大的程序灵活性，但存在将表现形式和逻辑混淆的风险，这会使代码随着时间的推移更难管理和调试。JSON 和 HTML 视图是其他声明式选项，但 XML 是 Fiori 开发的主要选择。
• 控制器： 控制器充当模型和视图之间的中介。它包含应用程序逻辑，响应视图中的用户交互（例如按钮点击），并相应地更新模型中的数据。

8.4 数据绑定和常用设计模式

数据绑定

数据绑定是一种在模型和视图之间同步数据的机制。它在用户界面控件（例如文本字段）和模型中的数据源之间建立连接。这样，当底层应用程序数据发生更改时，用户界面就能自动更新。SAP UI5 支持双向数据绑定，这意味着如果用户更改用户界面控件中的值，模型中的应用程序数据也会自动更新。

SAP UI5 支持三种主要数据模型类型：

• JSON 模型： 支持 JavaScript 对象表示法 (JSON) 格式数据的客户端模型。
• XML模型： 用于处理 XML 格式数据的客户端模型。
• OData模型： 该服务器端模型是与通过 SAP NetWeaver Gateway 创建的 OData 服务相对应的关键客户端模型。它处理 HTTP 请求的复杂性、响应的解析以及网络通信的抽象化，使应用程序开发人员无需操心这些细节。它是与 SAP 后端通信的 Fiori 应用程序的主要模型类型。

UI5 设计模式

为确保一致性和易用性，SAP 为使用 UI5 构建应用程序定义了几个通用设计模式：

• 主从图： 非常适合平板电脑和桌面应用程序，可以在所选项目的详细信息旁边显示工作项列表（主列表）。
• 主主从： 用于需要三级向下钻取的场景，例如从一个区域导航到该区域内的客户，再导航到该客户的特定订单。
• 全屏： 最适合处理复杂、数据密集型任务或大型可视化，用户需要最大的屏幕空间来集中注意力。
• 多流： 一种灵活的模式，适用于复杂的应用程序流程，可能需要结合其他设计模式的元素来构建完整的应用程序。

---------------------------

总而言之，SAP Fiori 代表了一种变革性的用户体验策略，它将企业软件从复杂、功能导向的模式转变为简单、基于角色且令人愉悦的模式。它基于强大而灵活的架构，由 SAP UI5 等现代开发框架提供支持，并从底层设计之初就旨在简化和增强用户与核心企业业务流程的交互方式。