3.5.2.2.7. GroupBoxLayout

GroupBoxLayout - контейнер, позволяющий выделить рамкой содержащиеся в нем компоненты, и задать им общий заголовок. Кроме того, он умеет сворачивать свое содержимое.

gui groupBox

XML-имя компонента: groupBox.

Пример описание контейнера в XML-дескрипторе экрана:

<groupBox caption="Order">
    <dateField dataContainer="orderDc" property="date" caption="Date"/>
    <lookupField dataContainer="orderDc" property="customer" optionsContainer="customersDc" caption="Customer"/>
    <textField dataContainer="orderDc" property="amount" caption="Amount"/>
</groupBox>

Атрибуты groupBox:

  • caption - заголовок группы.

  • orientation - задает направление расположения вложенных компонентов − horizontal или vertical. По умолчанию vertical.

  • collapsable − значение true позволяет пользователю скрывать содержимое компонента с помощью значков gui_groupBox_minus/gui_groupBox_plus.

  • collapsed − если указано значение true, то содержимое компонента будет свернуто сразу после открытия экрана. Используется совместно с collapsable="true".

    Пример свернутого GroupBox:

    gui groupBox collapsed

    Изменения состояния компонента groupBox (сворачивание и разворачивание) можно отслеживать с помощью интерфейса ExpandedStateChangeListener.

  • outerMargin - устанавливает внешние поля вокруг границы groupBox. Если указано значение true, внешние поля будут добавлены ко всем сторонам компонента. Чтобы задать внешние поля индивидуально, укажите значения true или false для каждой стороны groupBox:

    <groupBox outerMargin="true, false, true, false">

    Если атрибут showAsPanel установлен в true, outerMargin игнорируется.

  • showAsPanel – если указано значение true, то компонент будет выглядеть как Vaadin Panel. Значение по умолчанию - false.

    gui groupBox Panel

Контейнер groupBox по умолчанию имеет ширину 100% аналогично vbox.

В веб-клиенте к компоненту groupBox можно применить предопределенные стили. Стили задаются в XML-дексрипторе или контроллере экрана с помощью атрибута stylename. Чтобы применить стиль программно, выберите одну из констант класса HaloTheme с префиксом компонента LAYOUT_ или GROUPBOX_. Следующие стили должны использоваться совместно с атрибутом showAsPanel, имеющим значение true:

  • стиль borderless удаляет рамку и фон контейнера groupBox:

    groupBox.setShowAsPanel(true);
    groupBox.setStyleName(HaloTheme.GROUPBOX_PANEL_BORDERLESS);
  • стиль well делает контейнер "утопленным" с затемнением фона:

    <groupBox caption="Well-styled groupBox"
              showAsPanel="true"
              stylename="well"
              width="300px"
              height="200px"/>
    gui groupBox Panel 2

Существует дополнительный предопределенный стиль контейнера groupBox - light. Этот стиль можно задать с помощью атрибута stylename. Groupbox со стилем light имеет только верхнюю границу, как показано на рисунке ниже.

gui groupBox light

В компоненте Groupbox можно использовать горячие клавиши. Задать сочетание клавиш и вызываемое действие можно с помощью метода addShortcutAction():

groupBox.addShortcutAction(new ShortcutAction("SHIFT-A", shortcutTriggeredEvent ->
        notifications.create()
                .withCaption("SHIFT-A action")
                .show()
));