4.5.2.2.7. GroupBoxLayout
LIVE DEMO

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

gui groupBox

Component XML-name: groupBox.

An example container description in a screen XML-descriptor:

<groupBox caption="Order">
    <dateField datasource="orderDs" property="date" caption="Date"/>
    <lookupField datasource="orderDs" property="customer"
                 optionsDatasource="customersDs" caption="Customer"/>
    <textField datasource="orderDs" 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 gui_groupBox_minus/gui_groupBox_plus 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:

gui groupBox collapsed

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

    gui groupBox Panel

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

In Web Client with a Halo-based theme, 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);

  • card style name makes a layout look like a card.

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

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

align - caption - collapsable - collapsed - expand - height - id - orientation - showAsPanel - spacing - stylename - width

Predefined styles of groupBox

borderless - card - well