GroupBoxLayout - CUBA Platform. Developer’s Manual

3.5.2.2.7. GroupBoxLayout

GroupBoxLayout is a container that enables framing the embedded components and setting a universal header for them. Additionally, it can collapse content.

Component XML-name: groupBox.

An example container description in a screen XML-descriptor:

<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 attributes:

caption – group header.

orientation – defines components placement direction − horizontal or vertical. The default value is vertical.

collapsable – if the value is set to true, the component’s content can be hidden using / buttons.

collapsed – if set to true, component’s content will be collapsed initially. It is used with collapsable="true".

An example of a collapsed GroupBox:

The expanded state change events of the groupBox component can be intercepted with the help of the ExpandedStateChangeListener interface.

outerMargin - sets the outer margins outside the border of groupBox. If set to true, the outer margins will be added on all sides of the component. To set the outer margins for all sides individually, set true or false for each side of groupBox:
```
<groupBox outerMargin="true, false, true, false">
```
If the showAsPanel attribute is set to true, outerMargin is ignored.

showAsPanel – if set to true, the component will look like Vaadin Panel. The default value is false.

By default, the groupBox container is 100% wide, similar to vbox.

In Web Client, you can set predefined styles to the groupBox component using the stylename attribute either in the XML descriptor or in the screen controller. When setting a style programmatically, select one of the HaloTheme class constants with the LAYOUT_ or GROUPBOX_ prefix. The following styles should be used combined with showAsPanel attribute set to true:

borderless style removes borders and the background color of the groupBox:

groupBox.setShowAsPanel(true);
groupBox.setStyleName(HaloTheme.GROUPBOX_PANEL_BORDERLESS);

well style makes container look "sunken" with shaded background:

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

There is an additional predefined style for the groupBox container - light. A Groupbox with the light style has only the top border, as shown in the picture below.

You can use keyboard shortcuts in Groupbox. Set the shortcut and the action to be performed using the addShortcutAction() method:

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

Attributes of groupBox: align - caption - captionAsHtml - collapsable - collapsed - contextHelpText - contextHelpTextHtmlEnabled - css - description - descriptionAsHtml - expand - box.expandRatio - height - htmlSanitizerEnabled - id - orientation - outerMargin - settingsEnabled - showAsPanel - spacing - stylename - width
Predefined styles of groupBox: borderless - light - well
API: add - addExpandedStateChangeListener - addShortcutAction - applySettings - getComponent - getComponentNN - getComponents - getOwnComponent - getOwnComponents - indexOf - remove - removeAll - saveSettings - setOuterMargin - setSpacing