为列表-详细信息应用构建列表视图

学习目标

为列表-详细信息应用构建列表视图。

DynamicPage 控件

在完成应用基础部分的实现之后，我们可以继续实现各个视图。我们从列表视图开始，也就是应用初次启动后应显示的视图。我们将使用 sap.f.DynamicPage 来实现基本布局。

观看此视频以进一步了解列表视图中使用的 sap.f.DynamicPage 控件的结构。

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

使用 DynamicPage 控件的理由

你需要一个始终可见的标题，以及一个具有可配置展开/吸附（Expanding/Snapping）功能的页眉。如果你不需要展开/吸附功能，最好使用 sap.m.Page 这样更轻量的控件。
你正在显示内容为非自适应（不会拉伸以填充可用空间）的 sap.m.FlexBox，建议将 FlexBox 的 fitContainer 属性设置为 false。如果你正在显示 sap.ui.table.Table，请记住它是非自适应的，在移动设备等较小屏幕上可能会导致 DynamicPage 出现不可预期的行为。
在以下情况下不支持 DynamicPageTitle 的吸附：当 DynamicPage 有滚动条时，控件通常会滚动到吸附点——即 DynamicPageHeader 被完全滚出视图的位置。然而，当存在滚动条但内容不足以到达吸附点时，就无法通过滚动实现吸附。
你在 DynamicPage 的内容中使用了 sap.ui.layout.form.Form、sap.m.Panel、sap.m.Table 和 sap.m.List 控件，如果希望在 sap.f.DynamicPageHeader 的内容与 DynamicPage 的内容之间实现垂直对齐，则需要调整它们的左侧文本偏移。有关更多信息，请参阅 content 聚合的文档。

DynamicPage 的自适应行为

DynamicPage 的自适应行为取决于所显示内容的行为。要调整 DynamicPage 的内容内边距，可以使用 sapUiContentPadding、sapUiNoContentPadding 和 sapUiResponsiveContentPadding 这几个 CSS 类。

此图展示了使用 sap.f.DynamicPage 实现概览视图的效果：

包含 DynamicPage 控件和 Table 的列表视图定义。

为列表-详细信息应用构建列表视图

业务示例

在本练习中，你将为应用定义列表视图内容。该视图将实现一个 sap.f.DynamicPage 对象。该页面将显示从实体集 UX_C_Carrier_TP 获取的承运商列表。

注意

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

前提条件

你需要已完成上一个练习以调整路由器配置。

步骤

打开 *Carrier.view.xml* 文件，移除 page 元素，并添加命名空间 sap.f，其 XML 别名为 f。
按如下方式更新代码：

<mvc:View controllerName="student.com.sap.training.advancedsapui5.listdetail.controller.Carrier"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
xmlns="sap.m"
xmlns:f="sap.f">

向视图中添加一个带有 sap.f.content 聚合的 sap.f.DynamicPage 元素，并设置以下属性。 | 属性 | 值 | | --- | --- | | id | dynamicPageOverviewId | | headerExpanded | true | | toggleHeaderOnTitleClick | true |
在 View 定义内添加以下代码：

<f:DynamicPage id="dynamicPageOverviewId" headerExpanded="true" toggleHeaderOnTitleClick="true">
<f:content>
</f:content>
</f:DynamicPage>

在 sap.f.content 聚合内创建一个 sap.m.List 控件，并为 List 元素分配以下值：

sap.m.List 控件的属性-值对

属性	值
id	`list`
items	`{/UX_C_Carrier_TP}`
busyIndicatorDelay	`0`
growing	`true`
growingThreshold	`20`
growingScrollToLoad	`true`
mode	`SingleSelectMaster`
selectionChange	`onSelect`

在 content 聚合内添加以下代码：

<List id="list"
items="{/UX_C_Carrier_TP}"
busyIndicatorDelay="0"
growing="true"
growingThreshold="10"
growingScrollToLoad="true"
mode="SingleSelectMaster"
selectionChange="onSelect">
</List>

向 sap.m.List 控件添加 items 聚合，并向 items 聚合添加类型为 sap.m.ObjectListItem 的控件，设置以下属性：

sap.m.ObjectListItem 元素的属性-值对

属性	值
id	`objectListItem`
title	`{Carrname}`
intro	`{Carrid}`
type	`Inactive`

在 List 元素内用以下实现扩展你的代码：

<items>
<ObjectListItem
id="objectListItem"
title="{Carrname}"
intro="{Carrid}"
type="Inactive">
</ObjectListItem>
</items>

你的实现现在应如下所示：
预览应用。应显示承运商列表。
如前所述预览应用。应显示承运商列表。