Introducing GroupBox
GroupBox is the component used to visually separate areas. It does not have UI elements under it as the Div component does but just gives the effect that the UI elements in the GroupBox area appear as a group.
GroupBox can display a title in the border area, and the purpose of grouped UI elements is expressed as the title to clarify the meaning.
Example
The following is a screenshot of a calendar application called Trello. It is divided into three areas titled Basics, Intermediate, and Advanced, and related UI elements are placed accordingly. In this case, using the GroupBox makes it easy to implement division between areas.
Creating GroupBox
1
Creating GroupBox Component
Select GroupBox from the toolbar, and drag it to an appropriate size on Form to create it. If you just click on the form when the component is selected, then it will be created with the default size.
Set the text property to "GroupBox" in the Properties window.
2
Checking with QuickView
Run it with QuickView (Ctrl + F6). GroupBox is the component with the purpose to give visual effects, so it does not perform any action.
Grouping UI Elements
GroupBox makes multiple UI elements on the screen look like a group. It is not actually linked to the UI elements, but only gives visual effects.
Example
The following shows several UI elements wrapped using GroupBox to look like a group. GroupBox has no effect on UI elements.
Core features used in the example
- text
This is the property that sets the title of GroupBox.
How to implement an example
1
Creating GroupBox Component
Place the GroupBox component from the toolbar appropriately as shown in the example figure. Select the component and click on the form to create it in the default size.
2
Setting Title
Property | Value |
|---|---|
text | GroupBox |
3
Placing UI Elements (Components)
Place the components appropriately as shown in the example.
4
Checking with QuickView
Run it with QuickView (Ctrl + F6). Check if GroupBox with the title set and each component are displayed normally.
Applying GroupBox Style
The GroupBox component is the structure in which box-shaped groupboxcontents is placed in a virtual rectangular area and groupboxtitle that displays text is placed. In order to specify the visible style, you need to specify the style of groupboxcontents or groupboxtitle.
Example
GroupBox placed on the left shows the style applied, and the right shows GroupBox with only the font property modified in the default state.
Core features used in the example
- font
When setting the font property of the GroupBox component, it is also applied to groupboxtitle under the component. Therefore, when the font property is changed in the component, it is reflected in the text of the groupboxtitle.
How to implement an example
1
Creating GroupBox Component
Place 2 GroupBox components on the screen. For the GroupBox component placed on the left, the Div component is placed first, followed by the GroupBox component. The GroupBox component is configured of a box shape, but since the text displaying the title is located between the box area and the outer area, the background color of the form and the box area is usually the same, and the background color of the text area is processed as transparent.
2
Specifying Style Property
Set the cssclass property value of the left GroupBox component to "sample_groupbox_03". For the right GroupBox component, modify the Font-related property values appropriately.
3
Editing xcss File
Open the xcss file and add the code below. You can add the selector in the Advanced tab or enter code value directly in the Text tab.
.GroupBox.sample_groupbox_03 .groupboxcontents
{
background : greenyellow;
-nexa-border : 3px solid violet;
}
.GroupBox.sample_groupbox_03 .groupboxtitle
{
background : greenyellow;
-nexa-icon : URL("theme://images/rdo_WF_Radio.png");
}4
Checking with QuickView
Run it with QuickView (Ctrl + F6). Checks if the specified style has been processed.