乐趣区

关于javascript:SAP-UI5-ObjectPageLayout-控件使用方法分享

SAP UI5 ObjectPageLayout 控件容许应用程序轻松显示与业务对象 (Business Object) 相干的信息的布局。

ObjectPageLayout 布局由一个低头区域 (题目和内容)、一个可选的 anchor bar 区域和 block content 区域组成。

其中 block content 被包裹在 sections 和 子 sections 中,这些 section 独特组成了 BO 的结构化信息显示。

换言之,ObjectPageLayout 控件用于将对象页面的所有局部放在一起——题目、可选的锚条和节 / 子节区域。

下图是一个例子:

  • headerTitle
  • headerContent
  • sections
  • subSections

header

ObjectPageLayout 实现捕捉头 (snapping header) 的概念。这意味着页眉的上部 (页眉题目) 始终是可见的,而下部 (页眉内容) 能够滚动出视图。
题目显示在题目的顶部,并且始终在页面可滚动内容的上方可见。它蕴含对象的题目和最突出的细节。
页眉内容与页面内容一起滚动,直到它隐没(折叠页眉)。当滚动回顶部时,它再次变得可见(扩大题目)。它蕴含对象的所有附加信息。

如下图所示:

Anchor Bar

中文翻译为锚栏,这是一个主动生成的外部菜单,它显示了各个节和子节的题目,并容许用户滚动到各自的节和子节内容。

Sections, Subsections, Blocks

这些呈现在页眉下方的页面内容,由构造成节和子节的块组成。

如下图所示,定义了 General InformationSuppliers 两个 section,别离各自蕴含一个 SimpleFormTable

ObjectPageLayout 的应用场景

  • 用户须要查看、编辑或创立具备所有详细信息的条目。
  • 用户须要理解对象的详情,并与对象的不同局部进行交互。

最初运行时的成果如下:

退出移动版