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 isvertical
.
-
collapsable
– if the value is set totrue
, the component’s content can be hidden using / buttons.
-
collapsed
– if set totrue
, component’s content will be collapsed initially. It is used withcollapsable="true"
.An example of a collapsed
GroupBox
:The expanded state change events of the
groupBox
component can be intercepted with the help of theExpandedStateChangeListener
interface.
-
outerMargin
- sets the outer margins outside the border ofgroupBox
. If set totrue
, the outer margins will be added on all sides of the component. To set the outer margins for all sides individually, settrue
orfalse
for each side ofgroupBox
:<groupBox outerMargin="true, false, true, false">
If the
showAsPanel
attribute is set to true,outerMargin
is ignored.
-
showAsPanel
– if set totrue
, the component will look like Vaadin Panel. The default value isfalse
.
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 thegroupBox
: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