为列表-详细信息应用程序实现根视图

学习目标

• 实现列表-详细信息应用程序的根视图。

灵活列布局

如前面的课程所述，应用程序应实现一个根视图——通常命名为 App——作为视图组合的中心起点。

观看此视频，进一步了解如何为列表-详细信息应用程序实现 App 视图。

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

App 视图 Xml

下图将向您展示 *App.view.xml* 文件的实现。

App 视图控制器

如视频中所述，使用一个模型来控制 sap.f.FlexbileColumnLayout 控件的行为。在 App 视图控制器的 onInit 函数中实例化并初始化该模型是一种非常常见的做法。

实现列表-详细信息应用程序的根视图

业务示例

在本单元练习中，您将学习如何使用 SAPUI5 实现列表-详细信息应用程序。您将从一个全屏应用程序开始，并将其更改为列表-详细信息应用程序。

首先，您将实现该应用程序的根视图。

前提条件

在开始本练习之前，您应从 Github 下载准备好的文件：https://github.com/SAP-samples/sapui5-development-advanced-learning-journey..

注意

SAP Business Technology Platform 及其工具是云服务。由于云软件的特性，步骤流程以及字段和按钮的命名可能与练习解决方案不同。

任务 1：导入并查看基础列表-详细信息应用程序

步骤

1. 将 *listdetail.tar* 项目导入您的 Business Application Studio。

2. 在您的培训文件中找到 *listdetail.tar* 文件。

3. 如先前培训中所示，登录培训用的 SAP Business Application Studio。

4. 选择菜单 File→Open Folder...。

5. 选择或输入 /home/user/projects/ 文件夹，然后选择 OK。

6. 选择菜单 File→Import Project..。

7. 选择 *listdetail.tar* 文件并选择 OK。

8. 预览该应用程序。目前它与之前的全屏应用程序相同

9. 右键单击 *webapp* 文件夹并选择 Preview Application。

10. 选择 start local... 应显示承运商列表。

任务 2：定义应用程序的主视图

步骤

1. 打开应用程序主视图，并在 App 元素内添加一个 sap.f.FlexibleColumnLayout 元素，其属性和值如下： | 属性 | 值 | | --- | --- | | id | layout | | layout | {mainView>/layout} | | backgroundDesign | Translucent |

2. 在项目 view 文件夹中打开 *App.view.xml* 文件。

3. 将带前缀 f 的 sap.f 命名空间添加到 *App.view.xml* 文件中。在 xmlns="sap.m" 之后添加以下代码：

xmlns:f="sap.f"

3. 在 App 元素内添加一个 sap.f.FlexibleColumnLayout 元素，使用给定的属性-值对：

<f:FlexibleColumnLayout
id="layout"
layout="{mainView>/layout}"
backgroundDesign="Translucent">
</f:FlexibleColumnLayout>

4. 保存您的更改。您的代码现在应如下所示：

任务 3：为灵活列布局实现应用程序控制器

在此任务中，您将实现 App 视图的控制器，以将用于布局的 JSON 模型链接到该应用程序。

步骤

1. 打开 *App.controller.js* 文件。将 sap/ui/model/JSONModel 添加到命名空间。

2. 打开位于项目 controller 文件夹中的 *App.controller.js* 文件。

3. 按如下方式更新代码：

sap.ui.define(
[
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
],
function(BaseController, JSONModel) {
...

2. 实现 onInit 函数。创建一个带 layout 属性的 JSON 模型，并将创建的模型分配给 App 视图。

3. 将以下代码添加到 onInit 函数中：

var oViewModel = new JSONModel({
layout : "OneColumn"
});
this.getView().setModel(oViewModel, "mainView");

结果

注意

您暂时还无法测试这些更改。您的应用程序应仍像之前一样工作。