likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 28

所谓 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 控件。

具体实现步骤如下