The Horizontal Panel Widget

View Class: HorizontalPanelView
Spec Class: HorizontalPanelViewSpec

The Horizontal Panel Widget arranges other widgets horizontally.
This is especially useful for button panels or multiple selection lists (as in a file- or class browser).
You should always place buttons into a panel, to automatically handle varying button sizes (due to font size differences or national language string differences).

The Basics Section:

ID	Unique symbolic name (ID) of the box. This ID can be used by the application to access the widget via `"builder>>componentAt:#ID"`.
Horizontal layout	Specifies how components are arranged horizontally. See below for a list & description.
Vertical layout	Specifies how components are arranged vertically. See below for a list & description.

The Details Section:

BG-Color	Defines the background color of the widget. After selecting the check toggle the background color can be chosen by selecting the desired colored button. If no color is selected, the widget takes its default background color from the style sheet.
Border	Defines the width of the border.
Level	Defines the width of the 3D-border. Positive values provide a raising, negative values provide a lowering of the widget.
Horizontal Space	Defines the horizontal space between components. (ignored with #spread layout)
Vertical Space	Defines the vertical space between components.
Ignore invisible	If on, invisible components are ignored in the layout of components. If off, invisible components will reserve space. Useful to avoid visible rearrangement of components when some become visible/invisible.
Initially Invisible	Turns on/off that the widget is initially invisible.

Below, the arrangements are described and an example for a panel with 3 button components is shown.
Keep in mind that panels can be used with any type of component - not limited to Buttons (although, panels are most often used for buttons).

Tip:
If you need some extra spacing between components, simply add an empty view with a fix extent.

Horizontal layout:

left - left aligned arrangement.
Each components preferred extent is used - i.e. components are not resized.
Placements starts at the left of the panel (i.e. no left spacing)
The spacing between components is controlled by the Space attribute (in the Details section). However, the spacing is reduced, if required to make all components fit the panel.
leftSpace - left aligned arrangement with initial space.
Like above, but placement starts with an initial left spacing.
fixLeft - left aligned arrangement with fix space.
Like #left, but spacing is not reduced (even if components do not fit the panel)
fixLeftSpace - left aligned arrangement with initial and fix space.
Like #leftSpace, but spacing is not reduced (even if components do not fit the panel)
right - right aligned arrangement.
Analogous to #left - however, components are placed right aligned.
rightSpace - right aligned arrangement.
Like #right but placement starts with an initial right spacing.
center - centered arrangement.
Components are centered within the panel.
spread - spread arrangement.
Components are spread evenly within the panel. The first component is placed at the left, that last at the right of the panel.
spreadSpace - spread arrangement with spacing.
Like #spread, but an additional spacing at the left and right of the panel is added.
fit - make components fit the panel.
Unlike all of the above, this layout ignores the components own preferred extent - instead, all components are resized to fit the panel (the panels space is evenly divided).
fitSpace - make components fit the panel and add spacing around.
Like #fit, but adds spacing to the left and right.
leftFit - arrange from left and make the last component fit the panel.
This starts like #left for all but the last component, taking the preferred extent of each. The last component is resized to fill the panel.

This arrangement is especially useful, if the last component is an InputField or ComboBox.
leftSpaceFit - arrange from left and make the last component fit the panel with spacing.
Like #leftFit, but adds spacing around.

This arrangement is especially useful, if the last component is an InputField or ComboBox.
rightFit - arrange from right and make the first component fit the panel.
Much like #leftFit - however, the first component is resized to fill the panel.

This arrangement is especially useful, if the first component is an InputField or ComboBox.
rightSpaceFit - arrange from right and make the first component fit the panel with spacing.
Like #rightFit, but adds spacing around.

This arrangement is especially useful, if the first component is an InputField or ComboBox.
leftMax - arrange from left and resize components to max.
Like #left, but all components are resized to the size of the largest component.
leftSpaceMax - arrange from left and resize components to max with spacing.
Like #leftMax, but adds spacing around.
rightMax - arrange from right and resize components to max.
Like #right, but all components are resized to the size of the largest component.
rightSpaceMax - arrange from right and resize components to max with spacing.
Like #rightMax, but adds spacing around.
centerMax - arrange centered and resize components to max.
Like #center, but all components are resized to the size of the largest component.
spreadMax - spread and resize components to max.
Like #spread, but all components are resized to the size of the largest component.
spreadSpaceMax - spread and resize components to max. and add spacing
Like #spreadSpace, but all components are resized to the size of the largest component.