3.5.2.2.12. 标签页面板

在线示例

API 文档

TabSheet 容器是一个标签页面板。该面板一次只显示一个标签页的内容。

gui tabsheet

该组件的 XML 名称：tabSheet

下面是一个标签页面板的 XML 描述示例：

  1. <tabSheet>
  2.     <tab id="mainTab" caption="Tab1" margin="true" spacing="true">
  3.         <dateField dataContainer="orderDc" property="date" caption="Date"/>
  4.         <lookupField dataContainer="orderDc" property="customer" optionsContainer="customersDc" caption="Customer"/>
  5.     </tab>
  6.     <tab id="additionalTab" caption="Tab2" margin="true" spacing="true">
  7.         <textField dataContainer="orderDc" property="amount" caption="Amount"/>
  8.     </tab>
  9. </tabSheet>

tabSheet 的 description 属性定义了一个提示信息，当用户将光标悬停在标签页区域上或单击标签页区域时，提示信息会显示在弹出窗口中。

gui tabsheet description

tabSheet 组件应该包含 tab 元素来描述标签页。每个标签页都是一个具有类似于 vbox 的垂直组件布局的容器。

tab 元素属性:

  • id – 标签页标识符。请注意，标签页不是组件，它们的 ID 仅在 TabSheet 中使用，以便在控制器中引用标签页。

  • caption – 标签页标题。

  • description - 提示文本，当用户将光标悬停在具体标签页上或单击具体标签页时，提示文本会在弹出窗口中显示。

    gui tabsheet tab description

  • closable - 定义是否显示用于关闭标签页的 x 按钮。默认值为 false。

  • icon - 定义一个主题目录中的图标位置或图标集中的图标名称。有关使用图标的详细信息，请参阅图标。

  • lazy – 设置标签页内容延迟加载。

    当界面打开时，延迟标签页不会加载其内容，这样可以减少内存中的组件数量。只有当用户选择某个标签页时，才会加载标签页中的组件。另外，如果延迟标签页包含使用加载器的数据容器的可视化组件，加载器不会被触发。因此，界面会打开得更快，并且只有当用户通过选择标签页请求数据时才会加载其中的数据。

    请注意，当界面打开时，在延迟标签页上的组件是不存在的。因此，它们不能注入到控制器中，并且不能通过调用控制器的 init() 方法中 getComponent() 方法来获得。只有在用户打开标签页后才能访问延迟标签页中的组件。可以使用 TabSheet.SelectedTabChangeListener 拦截这个操作，例如：

    1. @Inject
    2. private TabSheet tabSheet;
    4. private boolean detailsInitialized, historyInitialized;
    6. @Subscribe
    7. protected void onInit(InitEvent event) {
    8.     tabSheet.addSelectedTabChangeListener(selectedTabChangeEvent -> {
    9.         if ("detailsTab".equals(selectedTabChangeEvent.getSelectedTab().getName())) {
    10.             initDetails();
    11.         } else if ("historyTab".equals(selectedTabChangeEvent.getSelectedTab().getName())) {
    12.             initHistory();
    13.         }
    14.     });
    15. }
    17. private void initDetails() {
    18.     if (detailsInitialized) {
    19.         return;
    20.     }
    21.     detailsInitialized = true; (1)
    22. }
    24. private void initHistory() {
    25.     if (historyInitialized) {
    26.         return;
    27.     }
    28.     historyInitialized = true; (2)
    29. }
    1在这里使用 getComponentNN(“comp_id”) 方法获取标签上的组件
    2在这里使用 getComponentNN(“comp_id”) 方法获取标签上的组件

    默认情况下，标签页不是 lazy 延迟加载，在界面打开时就会加载所有内容。

    可以使用 isUserOriginated() 方法来跟踪 SelectedTabChangeEvent 事件的来源。

    标签页布局样式

    在具有 Halo-based 主题的 Web 客户端中，可以使用 XML 描述或界面控制器中的 stylename 属性为 TabSheet 容器设置预定义样式：

    1. <tabSheet stylename="framed">
    2.     <tab id="mainTab" caption="Framed tab"/>
    3. </tabSheet>

    当以编程方式设置样式时，请使用 HaloTheme 类中的以 TABSHEET_ 为前缀的常量：

    1. tabSheet.setStyleName(HaloTheme.TABSHEET_COMPACT_TABBAR);
    • centered-tabs - 使得标签页在标签栏内居中。如果所有标签页完全适合标签栏（即没有标签栏滚动），效果最佳。
  1. -   `compact-tabbar` - 减少标签栏中标签页周围的空白。
  4. -   `equal-width-tabs` - 为标签栏中的所有标签页提供相等的宽度（即所有标签页的展开比例都为 1）。如果标签页标题不适合标签页会被缩短。应用此样式时标签页滚动将会被禁用（所有标签页将同时显示）。
  7. -   `framed` - 在整个组件周围以及标签页栏中的各个标签页周围添加边框。
  10. -   `icons-on-top` - 在标签页标题上显示标签页图标（默认情况下，图标位于标题的左侧）。
  13. -   `only-selected-closeable` - 只有选中的标签页显示关闭按钮。不会阻止以编程方式关闭标签页，它仅仅是对用户隐藏了关闭按钮。
  16. -   `padded-tabbar` - 为标签栏中的标签页周围添加少量内边距，以便它们不会紧挨着组件的外边缘。

TabSheet 的展示可以使用带 $cuba-tabsheet-* 前缀的 SCSS 变量进行自定义。可以在创建一个 主题扩展 或者一个 自定义主题 之后在可视化编辑器里修改这些变量的值。

tabSheet 的属性

caption - captionAsHtml - contextHelpText - contextHelpTextHtmlEnabled - css - description - descriptionAsHtml - box.expandRatio - height - id - stylename - tabCaptionsAsHtml - tabIndex - tabsVisible - visible - width

tab 的属性

caption - closable - description - enable - expand - margin - icon - id - lazy - spacing - stylename - visible

tabSheet 的预定义样式

centered-tabs - compact-tabbar - equal-width-tabs - framed - icons-on-top - only-selected-closeable - padded-tabbar

API

add - addSelectedTabChangeListener - getComponent - getComponentNN - getComponents - getOwnComponent - getOwnComponents - remove - removeAll