SAP UI5 应用的主 - 从 - 从 (Master-Detail-Detail) 布局模式的实现步骤

所谓 SAP UI5 应用的主-从-从布局模式，意思是屏幕水平方向分为左，中，右三部分。

每个部分分别显示 Master，Detail 第一层和 Detail 第二层数据。

下面这个 gif 是具备这种布局方式的一个具体例子：

该应用程序提供以下功能：

• 基于 sap.f.FlexibleColumnLayout 控件的最多三列布局。此布局具有预定义的布局类型和它们之间的定义路由，可以在应用程序的主从模式之间平滑导航。

• 基于 sap.f.DynamicPage 控件的 Master 页面，其中列出了可用产品并具有过滤和排序选项。

• 基于 sap.uxap.ObjectPageLayout 控件的详细信息页面，其中包含有关母版页中所选对象的详细信息，它实现了 ObjectPageLayout 控件的动态标题。

• sap.f.Avatar 控件用于标题区域以显示所选产品的图像。

• 通过向下滚动页面内容或单击/点击标题区域，可以折叠标题标题区域（捕捉到标题）。标题区域也可以固定，以便在用户向下滚动页面内容时保持可见。

• 标题区域右侧有一组动作。标题区域可以在标题被捕捉时显示特定内容。

• 浮动页脚位于页面底部，位于页面内容的顶部。它在右侧保存最终操作。

• 基于 sap.f.DynamicPage 的详细信息页面，用于显示详细信息页面中所选对象的更多详细信息。

• 一个基于 sap.f.DynamicPage 的简单关于页面，用于从详细信息页面显示所选对象的更多详细信息，即 Detail 第二层数据。

所谓 Dynamic Page，就是一种布局控件(Layout control)，可以用来实现一个最终用户看到的网页，由标题、具有动态行为的抬头区域、内容区域和可选的浮动页脚区域组成。

• DynamicPageTitle - 由左侧的标题、中间的内容和右侧的操作组成。 显示的内容会根据 DynamicPageHeader 的当前模式而变化。

• DynamicPageHeader - 一个通用容器，可以包含单个布局控件并且不关心内容对齐和响应性。 抬头区域在展开(expanded)和收起两种模式下工作，并且可以借助不同的属性调整其行为。

• 内容区域 - 一个通用容器，可以有单个 UI5 布局控件，不关心内容对齐和响应性。

• 页脚 - 位于底部，有一个小的偏移量，用于附加操作，页脚浮动在内容上方。 它可以是任何 sap.m.IBar 控件。

具体实现步骤如下。