为列表-详细信息应用调整路由器配置

学习目标

为列表-详细信息应用调整路由器配置。

调整路由器配置

在为列表-详细信息（List-Detail）应用设计路由时，一项重要的更改是路由 Config 部分的内容。

以下是必须更改的三个重要属性：

controlId 必须包含用作根控件的控件 id，该控件用于显示 UI 方面（UI aspect）。在使用 FlexibleColumnLayout 控件的实现中，controlId 属性包含 sap.f.FlexibleColumnLayout 控件的 id，该控件嵌入在 sap.m.App 控件中。
controlAggregation 属性必须包含由 controlId 属性所定义控件的默认聚合名称。当显示新的 UI 方面时，将填充指定的聚合。
clearControlAggregation 属性必须设置为 true，以允许每次选择都替换（而不是追加）中间窗格中的前一个内容。

使用灵活列布局的应用的 manifest.json 文件中路由部分的 config 部分

使用列表-详细信息模式时，另一个可能略有变化的配置是 targets 部分。

使用灵活列布局的应用的 manifest.json 文件中的 targets 部分

目标级别的 controlAggregation 将覆盖路由 config 对象中针对该特定目标的 controlAggregation 属性。如该图所示，值 midColumnPages 被赋给 NotFound 和 Carrier 目标配置的 controlAggregation。这意味着在运行时，这些目标的视图将显示在 sap.f.FlexibleColumnLayout 的 midColumnPages 聚合中。

为列表-详细信息应用调整路由器配置

业务示例

在本练习中，你将学习如何使用 SAPUI5 为列表-详细信息应用调整路由器配置。

注意

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

前提条件

你需要已完成上一个练习，以实现应用的根视图。

步骤

检查路由配置并进行修改，使以下路由配置参数配置正确。

路由配置

配置参数	值
controlAggregation	`beginColumnPages`
controlId	`layout`
clearControlAggregation	`true`
bypassed target	["overview","notFound"]

打开 *manifest.json* 文件。
找到路由配置 config。
确保其中包含所列出的配置参数。
你的实现应如下所示：

"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"async": true,
"viewPath": "student.com.sap.training.advancedsapui5.listdetail.view",
"controlAggregation": "beginColumnPages",
"controlId": "layout",
"clearControlAggregation": true,
"transition": "slide",
"bypassed": {
"target": [
"overview",
"notFound"
]
}
},

检查 overview 目标并添加以下属性。此外，移除 clearControlAggregation 配置参数。

列表目标

属性	值
viewLevel	`1`
controlAggregation	`beginColumnPages`

找到 overview 目标并检查，确保它具有所有列出的属性和值。
移除 clearControlAggregation 配置参数。
你的实现应类似以下代码：

"overview": {
"viewType": "XML",
"transition": "slide",
"ControlAggregation": "beginColumnPages",
"viewLevel": 1,
"viewId": "Carrier",
"viewName": "Carrier"
},

找到 flights 目标并添加所列出的属性和值。

flights 目标

配置参数	值
controlAggregation	`midColumnPages`

找到 flights 目标并检查，确保它具有所有列出的属性和值。
你的实现应类似以下代码：

"flights": {
"viewType": "XML",
"transition": "slide",
"viewId": "Flights",
"viewName": "Flights",
"viewLevel": 2,
"controlAggregation": "midColumnPages"
},

找到 flights 路由，并将 overview 目标添加到该路由中。
找到 flights 路由，并将 overview 目标添加到其中。
你的代码应如下所示：

,
{
"name": "flights",
"pattern": "carriers/{carrid}",
"titleTarget": "",
"greedy": false,
"target": [
"overview",
"flights"
]
}

找到 notfound 目标并添加所列出的属性和值。

flights 目标

配置参数	值
controlAggregation	`midColumnPages`

找到 notfound 目标并检查，确保它具有所有列出的属性和值。
你的实现应类似以下代码：

"notFound": {
"viewId": "NotFound",
"viewName": "NotFound",
"transition": "show",
"controlAggregation": "midColumnPages"
}

结果

当你预览应用时，列表仍应正常显示，但目前你无法再导航到详细信息。

请注意，由于我们并未在真实的 SAP Fiori 环境中测试该应用，如果你使用 Dev Tools 调试应用，控制台会出现错误。请忽略任何有关资源预加载的消息。