3.5.2.2.1. 折叠布局

在线示例

API 文档

Accordion 是可折叠内容的容器,允许在隐藏和显示大量内容之间切换。

gui accordion

该组件的 XML 名称:accordion

界面 XML 描述中的折叠布局示例:

  1. <accordion id="accordion" height="100%">
  2. <tab id="tabStamford" caption="msg://tabStamford" margin="true" spacing="true">
  3. <label value="msg://sampleStamford"/>
  4. </tab>
  5. <tab id="tabBoston" caption="msg://tabBoston" margin="true" spacing="true">
  6. <label value="msg://sampleBoston"/>
  7. </tab>
  8. <tab id="tabLondon" caption="msg://tabLondon" margin="true" spacing="true">
  9. <label value="msg://sampleLondon"/>
  10. </tab>
  11. </accordion>

accordion 组件应包含用于描述标签页的 tab 元素。每个标签页都是一个容器,具有类似于 vbox 的垂直组件布局。如果应用程序界面的空间有限或标签页的标题太长而无法显示在 TabSheet 中,则可以使用 Accordion 容器。Accordion 具有平滑切换的动态效果。

tab 元素的属性:

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

  • caption – 标签页标题。

  • icon – 指定一个主题目录中的图标地址或图标集中的图标名称。有关使用图标的推荐做法,请参阅图标

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

    在打开界面时,延迟加载的标签页不会立即加载其内容,这样可以减少内存中的组件数量。仅当用户选择标签页时,才会加载标签页中的组件。此外,如果延迟标签页中包含的可视化组件带有连接到 JPQL 查询的数据源,则也不会执行此查询。因此,界面可以更快地打开,只有当用户选中标签页请求数据时才会加载数据。

    请注意,刚打开界面时,延迟加载标签页上包含的组件并不存在。因此,这些组件不能被注入到控制器,也不能在控制器的 init() 方法中使用 getComponent() 方法来获取。只有在用户打开延迟加载的标签页后,才能访问其中的组件。可以使用 Accordion.SelectedTabChangeListener 处理标签页选中事件,例如:

    1. @Inject
    2. private Accordion accordion;
    3. private boolean tabInitialized;
    4. @Subscribe
    5. protected void onInit(InitEvent event) {
    6. accordion.addSelectedTabChangeListener(selectedTabChangeEvent -> {
    7. if ("tabCambridge".equals(selectedTabChangeEvent.getSelectedTab().getName())) {
    8. initCambridgeTab();
    9. }
    10. });
    11. }
    12. private void initCambridgeTab() {
    13. if (tabInitialized) {
    14. return;
    15. }
    16. tabInitialized = true;
    17. (1)
    18. }
    1初始化代码写在这。在这里使用 getComponentNN(“comp_id”) 获取延迟加载标签页上的组件。

    默认情况下,标签页是非延迟的,这表示当界面打开时标签页中的内容将立即被加载。

  • 在使用了基于 Halo 主题的 Web 客户端,可以通过将 borderless 预定义样式应用到 stylename 属性来移除 accordion 组件的边框和背景。

    1. accordion.setStyleName(HaloTheme.ACCORDION_BORDERLESS);

accordion 标签页可以包含其它可视化组件,比如网格、表格等:

  1. <accordion id="accordion" height="100%" width="100%" enable="true">
  2. <tab id="tabNY" caption="msg://tabNY" margin="true" spacing="true">
  3. <table id="nYTable" width="100%">
  4. <columns>
  5. <column id="borough"/>
  6. <column id="county"/>
  7. <column id="population"/>
  8. <column id="square"/>
  9. </columns>
  10. <rows datasource="newYorkDs"/>
  11. </table>
  12. </tab>
  13. </accordion>

gui accordion 2


accordion 的属性

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

tab 的属性

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

API

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