Layout Designer UI

Layout Designer Window Components

The Layout Designer main window provides a menu and three panes. The menu provides options for creating and saving forms, editing, and alignment.

The Controls pane in the upper left lists all available control types. As controls are added to the form, the names of those controls are displayed under the appropriate control type. Controls are divided into three groups: simple property controls, simple non-property controls, and complex controls. When a control is selected in the Form Layout Area, the Property pane in the lower left displays the properties for the selected object as a set of attribute/value pairs. The Tools Palette, to the left of the Form Layout Area, provides tool buttons for drawing each of the available controls. You can also drag/drop controls to the Form Layout Area from the Properties tab of the Controls pane.

When you are drawing controls in the Form Layout Area, all of the control tool buttons in the Tools Palette turn the mouse pointer into a cross-hair, enabling you to draw an object of the selected type on the form. After you draw the control, the pointer arrow is restored and the new control is automatically selected. If you click on a control tool button in the Tools Palette and then change your mind, you can use the Pointer tool button to restore the pointer arrow, enabling you to select, resize, and move objects already created on the form.

Understanding the Form Layout Area

The Form Layout Area provides the space on which you will design your forms, a toolbar, and two tool palettes.

• The Form Layout Area is the space in which you will draw your form.
• The Editing Toolbar at the top of this pane provides quick access to various editing functions.
• The Simple Control Tool Palette in the Controls Pane enables you to draw controls such as text labels, check boxes, and radio sets in the Form Layout Area.
• The Tools Palette enables you to draw complex controls in the Form Layout Area. Complex controls are groups of simple controls that work together, such as a user list control complete with Add and Remove buttons.

This Form Layout Area displays an approximation of the way the form will be rendered at runtime. Ultimately, the rendering engine for the platform on which the form is run will determine its runtime appearance. While it is important to size, align, and arrange the controls as you want them to appear at runtime, it is equally important to set the alignment and positioning properties for the controls correctly. Although many of the alignment property values do not influence the position of an element in the Form Layout Area, these values are used by the rendering engine of the target platform to position the element at runtime. By default, the layout area presents a dialog with a single tab that is labeled Page 1.