FormBuilder/AppBuilder: Form Editor
Description
The Form Editor provides a graphical interface to select/manipulate the windows/controls with FormBuilder.
Location
The Edit Window Action displays the Form Editor.
Use
Click the controls in the BBjGui Inspector to select them visually in the FormEditor and vice-versa.
To select multiple controls |
Press the Ctrl key while left clicking the mouse. |
To unselect the selected controls |
Press Esc. |
To display an item's context sensitive action items |
Right-click the item. |
Move one or more controls via the Property Editor by selecting them or by dragging a control with the mouse. When selecting a control or group of controls, eight dots border the control to help size the control (if allowed). Use the numeric edit box to toggle Snap to Grid to the top of the FormEditor Component and to edit the grid size.
Along with the Snap to Grid configuration, the top of the FormEditor contains a variety of alignment toolbuttons. A tootip describes the alignment operation of the toolbutton. To display a tooltip, hover the mouse over a toolbutton.
Many of alignment operations employ the concept of Most-Selected. After selecting multiple controls, one control has black border dots while the remaining selected control has white borders.
Available Alignment Operations
Make Same Height |
Resizes all selected controls to the same height as the Most-Selected control. |
Make Same Width |
Resizes all selected controls to the same width as the Most-Selected control. |
Align Left Sides |
Moves all selected controls so their left sides are at the same X location as the Most-Selected control. |
Align Right Sides |
Moves all selected controls so their right sides are at the same X location as the Most-Selected control. |
Align Centers |
Moves all selected controls so their horizontal centers are at the same X location as the Most-Selected control. |
Align Tops |
Moves all selected controls so their tops are at the same Y location as the Most-Selected control. |
Align Bottoms |
Moves all selected controls so their bottoms are at the same Y location as the Most-Selected control. |
Align Middles |
Moves all selected controls so their vertical middles are at the same Y location as the Most-Selected control. |
Make Horizontal Space Equal |
Distributes the horizontal interspace between the controls. The left-most and right-most controls are not moved. |
Make Horizontal Space Greater |
Increases the horizontal interspace between the controls by 5 pixels. |
Make Horizontal Space Less |
Decreases the horizontal interspace between the controls by 5 pixels. |
Remove Horizontal Space |
Removes the horizontal interspace between the controls. |
Make Vertical Space Equal |
Distributes the vertical interspace between the controls. The top and bottom controls are not moved. |
Make Vertical Space Greater |
Increases the vertical interspace between the controls by 5 pixels. |
Make Vertical Space Less |
Decreases the vertical interspace between the controls by 5 pixels. |
Remove Vertical Space |
Removes the vertical interspace between the controls. |
Center Horizontally |
Moves all selected controls horizontally to the middle of the form without adjusting their interspace. |
Center Vertically |
Moves all selected controls vertically to the middle of the form without adjusting their interspace. |
Multiple nodes selected in the BBjGui Inspector will display the properties the nodes have in common.
Remarks
Enable/disable and size the Snap Grid via the AppBuilder Options.
See Also
BBjGui Inspector