Panel - Group Box

Panel - Group Box - Layout

This compound component is used to layout other components. Each contained component can be "attached" to either left, right, top, bottom or the center part of the group box.

Component at design time

Drag and drop a
Snap To Border component onto the page:

The
Snap To Border component looks like this on the page:

Component at runtime

The
Snap To Border component varies at runtime depending upon the components added.

Properties and All Attributes views

The Properties view for a component shows the most common set of attributes you can set on a component, and, depending on the component, you might also see options for adding controls, actions, or other components. To open the Properties view, click

Window | Show View | Properties.

These common attributes for the Snap To Border component display on the hx:panelLayout tab in the Properties view. See the All Snap To Border attributes table for a complete list of attributes. Additional configuration options for panel items are on the hx:panelLayout>Items tab:
Table 1. Snap To Border configuration options

Configuration option

Description

Order of items in the panel

Allows you to specify the order of components within the panel, using the Move Up and Move Down buttons.

The All Attributes view shows a table of all the attributes you can set on a component, which includes those attributes you can access from the Properties view. To switch to the All Attributes view, click the
All Attributes icon in the upper right corner of the Properties view.

Table 2. All Snap To Border attributes

Attribute name

Represented in Properties view by

Description

align

Layout of the panel>Horizontal Alignment

Specifies whether the component should be aligned to the left, center or right.

bgcolor

Layout of the panel>Background Color

Specifies the background color in 6 digit hexadecimal RGB values beginning with a # symbol, or by entering a color name, for example, black, white, or blue.

binding

Not represented

An expression that binds the component's instance (usually a user interface component) to a bean property (usually in the backing file).

border

Not represented

Specifies, in pixels, the size of the border for the table.

dir

Not represented

Specifies the component's direction when rendered at runtime. The values can be either:

ltr - left to right

rtl - right to left
If the direction is not specified, a direction appropriate to the encoding of the component is used.

frame

Not represented

Specifies which sides of the frame surrounding a table will be visible:

above

below

hsides

lhs

rhs

vsides

box

border

height

Size: Height

Specifies the height of the component in either pixels or percentage. To specify percentage, append % to the value.

id

ID

Assigns a name to a component. Should be a unique name within a JSP.

lang

Not represented

The language of the component's value(s) and text content. If omitted, the language is inherited from the containing tags (notably the view. Specified as an ISO-standard language abbreviation code. For example, "en" for English, "en-US" for American English, "fr" for French, "de" for German.

Note: This does not "translate" the text in the component, rather, it identifies the language of the component so that operations such as searching, sorting, collating and the like are done correctly.

rendered

Not represented

Can be set to true or false:

false - Component will not be rendered to the browser at runtime.

true - Component will get rendered. This is the default value.

styleClass

Style: Classes

Space-separated list of CSS style classes to be applied when this element is rendered. This value must be passed through as the class attribute on generated markup. Defines the classes (such as style sheets) of the selected component. This may be done manually, or by clicking the button and selecting the desired Classes from within the window.

style

Style: Props

Specifies CSS style information for the component (for example, style="font-size : 8pt ; color : red"). Defines the properties (such as font and color) of the selected component. This may be done manually, or by clicking the button and selecting the desired properties from within the window.

summary

Not represented

Specifies a summary details string for user agents rendering to non-visual media.

title

Accessibility>Title

Specifies the title text, shown in browser as a tooltip at runtime. Used by a browser as the alternative text of a component if the alternative text is not specified.

width

Size: Width

Specifies the width of the component in either pixels or percentage. To specify percentage is to be used append % to the value.

Attribute name	Represented in Properties view by	Description
align	Layout of the panel>Horizontal Alignment	Specifies whether the component should be aligned to the left, center or right.
bgcolor	Layout of the panel>Background Color	Specifies the background color in 6 digit hexadecimal RGB values beginning with a # symbol, or by entering a color name, for example, black, white, or blue.
binding	Not represented	An expression that binds the component's instance (usually a user interface component) to a bean property (usually in the backing file).
border	Not represented	Specifies, in pixels, the size of the border for the table.
dir	Not represented	Specifies the component's direction when rendered at runtime. The values can be either: ltr - left to right rtl - right to left If the direction is not specified, a direction appropriate to the encoding of the component is used.
frame	Not represented	Specifies which sides of the frame surrounding a table will be visible: above below hsides lhs rhs vsides box border
height	Size: Height	Specifies the height of the component in either pixels or percentage. To specify percentage, append % to the value.
id	ID	Assigns a name to a component. Should be a unique name within a JSP.
lang	Not represented	The language of the component's value(s) and text content. If omitted, the language is inherited from the containing tags (notably the view. Specified as an ISO-standard language abbreviation code. For example, "en" for English, "en-US" for American English, "fr" for French, "de" for German. Note: This does not "translate" the text in the component, rather, it identifies the language of the component so that operations such as searching, sorting, collating and the like are done correctly.
rendered	Not represented	Can be set to true or false: false - Component will not be rendered to the browser at runtime. true - Component will get rendered. This is the default value.
styleClass	Style: Classes	Space-separated list of CSS style classes to be applied when this element is rendered. This value must be passed through as the class attribute on generated markup. Defines the classes (such as style sheets) of the selected component. This may be done manually, or by clicking the button and selecting the desired Classes from within the window.
style	Style: Props	Specifies CSS style information for the component (for example, style="font-size : 8pt ; color : red"). Defines the properties (such as font and color) of the selected component. This may be done manually, or by clicking the button and selecting the desired properties from within the window.
summary	Not represented	Specifies a summary details string for user agents rendering to non-visual media.
title	Accessibility>Title	Specifies the title text, shown in browser as a tooltip at runtime. Used by a browser as the alternative text of a component if the alternative text is not specified.
width	Size: Width	Specifies the width of the component in either pixels or percentage. To specify percentage is to be used append % to the value.