5ml User's Guide

5ml User's Guide
Figure 13-9: Dragging Button widgets to the HBox element (with Spacing set to five pixels).
Each element you add to the HBox element appears to the right of the previous element, and also appears as a child to
the parent HBox element in the Page Outline pane on the lower left side of the Project Editor. You can change the order of
the elements by clicking Bring Forward, Send Backwards, and so on (for details on arranging elements, see "Arranging
and Overlapping Page Elements" on page 181).
To change the HBox element's properties, click the element on the page, or click HBox in the Page Outline pane. The
Properties pane for the HBox element appears on the right side of the Project Editor (refer to Figure 13-9 on page 321).
To set the spacing in pixels between elements in the HBox, drag the Spacing slider in the General tab of the Properties
pane — drag to the right to increase spacing, or to the left to reduce spacing. To align the elements vertically within the
HBox element, choose Top, Middle, or Bottom in the Vertical Align drop-down menu.
You can also customize the HBox element by changing properties in the Properties pane:
• The General tab lets you define the element's optional ID.For details, see "Changing General Properties" on page
197.
• The Appearance tab lets you set the HBox element's background, border, and opacity, and add a reflection and
shadow to the element. You can also set the roundness of the border's line style with the Roundness control.
These settings are applied to the entire HBox element; to change the appearance settings for each widget element
within the HBox element, select each element first. For details, see "Changing Appearance Properties" on page
198.
- 321 -