使用 XML 视图

学习目标

  • 创建和使用 XML 视图

模型视图控制器（MVC）

SAPUI5 中使用模型视图控制器 (MVC) 概念将信息呈现与用户交互分离。这种分离便于应用程序的开发和修改。

观看视频，了解 MVC 中模型、视图和控制器各自的角色。

视频：本节含 SAP 官方视频（视频 ID 1_n4jtkyua），需在 learning.sap.com 在线观看。

视图与模型之间的关系将在课程的后续部分介绍。

视图类型

为实现视图，SAPUI5 提供了预定义的视图类型。

它们列在图 Supported View Types 中。

可用的预定义视图类型：XML 视图、JSON 视图、带类型视图。

XML 视图和 JSON 视图是声明式视图，其中 UI 以 XML 格式或 JSON 格式描述。实现可以在文件中完成，也可以作为 XML 或 JSON 字符串完成。

而带类型视图则使用 JavaScript 以编程方式实现。这意味着该视图是使用单独的视图类定义的。

注意

建议使用 XML 视图，因为 XML 视图强制将 UI 定义与应用程序逻辑（必须在控制器中实现）明确分离。这使代码更具可读性且更易于维护。

因此，本培训课程专门聚焦于 XML 视图，所有示例和练习中都使用 XML 视图。有关 JSON 视图和带类型视图的信息，请参阅文档。

XML 视图

视图名称

如果使用 XML 字符串定义 XML 视图，则不需要文件。

另一方面，如果在文件中定义 XML 视图（这更为常见），则文件名以 *.view.xml* 结尾。例如，在图 Simple XML View 中，文件名是 *App.view.xml*。

示例 XML 代码。

通常，视图存储在项目结构的 *view* 文件夹中。文件名、文件在项目结构中的位置以及模块 Id 前缀共同决定视图的名称。该视图名称对应于 SAPUI5 模块名称，之后可以通过该模块名称加载并实例化视图（见下文）。

示例

假设在项目的 *index.html* 文件中，引导脚本里指定了以下属性：

data-sap-ui-resourceroots='{"sap.training.exc": "./"}'

这会将项目的 *webapp* 文件夹注册为资源位置，并将其分配给模块 Id 前缀 sap.training.exc。如果图中所示的 *App.view.xml* 文件现在存储在项目的 *webapp/view* 文件夹中，则得到的视图名称如下：

sap.training.exc.view.App

该视图名称的前缀 sap.training.exc 指向 *webapp* 文件夹。紧随 sap.training.exc 之后的 view 段将 *view* 子文件夹指定为文件的位置，而视图名称中的最后一段代表文件名，其后缀 *.view.xml* 会在 SAPUI5 加载视图时自动添加。

视图实现

XML 视图中使用的每个控件都由一个以该控件名称为名的 XML 标签表示。

<View> 标签用作 XML 视图中的根节点。该标签对应于 sap.ui.core.mvc.View 控件。视图中使用的 SAPUI5 控件库及其相应子包的名称，通过 <View> 标签的 xmlns 属性映射到 XML 命名空间。

注意

控件可以位于控件库的子包中。例如，sap.ui.core.mvc.View 位于 sap.ui.core 库中，但其完整包名是 sap.ui.core.mvc。即使 sap.ui.core 已经定义为命名空间，你也必须将此子包指定为 XML 命名空间。

在所示示例中，需要两个命名空间映射：View 来自包 sap.ui.core.mvc，而所使用的 Text 控件来自 sap.m 库（请比较 Demo Kit 中的 API Reference）。

sap.ui.core.mvc 命名空间使用别名 mvc 定义，因此 <View> 标签以此 mvc 别名作为前缀。

注意

从技术上讲，你可以为命名空间定义任意别名。但惯例是使用包名的最后一部分（即示例中的 mvc）。

可以将所需命名空间之一定义为默认命名空间（xmlns="..."）。此时该命名空间的控件标签不需要前缀。

在该示例中，视图上放置了一个 sap.m.Text 控件。为此使用的 <Text> 标签不包含前缀，因为 sap.m 库被映射到默认命名空间。

XML 视图中控件的属性值以控件 XML 标签的属性形式指定。属性名称对应于特性的名称。例如，sap.m.Text 控件的 text 特性指定为 text="value"。

注意

控件可用的特性名称可以在 API Reference 中查找。它们在那里列在相应控件的 Properties 部分中。现有特性也会在 SAP Business Application Studio 中通过编辑器里的 Auto Completion 功能显示。

视图实例化

为实例化 XML 视图，SAPUI5 在 sap.ui.core.mvc.XMLView 类中提供了工厂方法 create。在图 Instantiating an XML View 所示的示例中，创建 XML 视图的模块因此依赖于 sap/ui/core/mvc/XMLView 模块。

包含 id 和 viewName 特性的示例代码，如下文所述。

向 create 方法传递一个包含所需配置选项的对象。所有可用选项的完整列表可在 Demo Kit 中的 API Reference 里找到。

在所示示例中，使用了以下两个特性：

  • id id 特性可用于为视图实例指定 Id。如果未传递 id 特性，SAPUI5 将生成一个 Id。

  • viewName viewName 特性用于传递要加载的 XML 视图的名称（见上文）。如前所述，文件后缀 *.view.xml* 由 SAPUI5 自动添加。

create 方法通过模块系统异步加载视图。与同步加载相比，异步加载的优势在于 UI 不会在加载过程期间冻结，并且在视图初始化期间功能不会被阻塞。

由于加载过程是异步的，create 方法不会返回视图实例本身，而是返回一个以该视图实例解析的 Promise。

因此，如示例所示，在返回的 Promise 上调用 then 方法，为成功情况注册一个回调函数。一旦视图实例可用，就会调用该函数，并通过接口（oView）将实例传递给它。

在回调函数的实现中，可以通过调用 placeAt 方法将视图实例添加到 UI 区域。

创建和使用 XML 视图

业务场景

在本练习中，你将创建一个包含 Hello World Text UI 元素的 XML 视图。然后，你删除上一练习中所创建模块里用于创建 Hello World Text UI 元素并将其放置在 HTML 页面上的代码。取而代之，你将在那里实例化该 XML 视图并将其放置在 HTML 页面上。*模板：*Git 仓库：https://github.com/SAP-samples/sapui5-development-learning-journey.git，分支：*sol/3_modules模型解决方案：*Git 仓库：https://github.com/SAP-samples/sapui5-development-learning-journey.git，分支：sol/4_views

任务 1：实现 XML 视图

步骤

  1. 在 *webapp* 文件夹的子文件夹 *view* 中创建一个名为 *App.view.xml* 的新文件。

  2. 打开项目结构中 *webapp/view* 文件夹的上下文菜单。

  3. 选择 New File。

  4. 在出现的字段中，输入 App.view.xml 并按 Enter。

结果

该 App.view.xml 文件已创建并显示在编辑器中。 2. 将以下代码添加到 *App.view.xml* 文件中，以定义包含 Hello World Text UI 元素的 XML 视图：

<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Text text="Hello World"/>
</mvc:View>

结果

XML 视图应实现如下：

最终 XML 视图的屏幕截图。

任务 2：实例化 XML 视图

步骤

  1. 确保 *index.js* 模块已在编辑器中打开。

  2. 删除 *index.js* 模块中用于创建 Hello World Text UI 元素并将其放置在 HTML 页面上的代码。

  3. 删除以下行：

new Text({ text: "Hello World" }).placeAt("content");

结果

该 index.js 模块现在应如下所示： 更新后的 index.js 文件的屏幕截图。 3. 按如下方式修改 *index.js* 模块的实现，以实例化上面创建的 XML 视图并将其放置在 HTML 页面上：

sap.ui.define(["sap/ui/core/mvc/XMLView"], function (XMLView) {
"use strict";
XMLView.create({
id: "App",
viewName: "sap.training.exc.view.App"
}).then(function (oView) {
oView.placeAt("content");
});
});

注意

请注意更改后的依赖项数组和工厂函数参数。index.js 现在依赖于 sap/ui/core/mvc/XMLView 而不是 sap/m/Text。

结果

该 index.js 文件应实现如下： 更新后的 index.js 文件的屏幕截图。 4. 通过从 SAP Business Application Studio 启动应用来进行测试运行。

  1. 右键单击你的 sapui5-development-learning-journey 项目中的任意子文件夹，然后从出现的上下文菜单中选择 Preview Application。

  2. 在出现的对话框中选择名为 start-noflp 的 npm 脚本。

  3. 在已打开的应用程序中，检查包含 sap.m.Text UI 元素的 Hello World 文本的 XML 视图是否显示在 HTML 页面上。