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.

formeditor1.png

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.

formeditor2.png

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

FormBuilder Tutorial

BBjGui Inspector