Form Designer
Go Up to Getting Started with RAD Studio
The Form Designer or Designer, is displayed automatically when you are creating or editing a form. The Form Designer runs automatically when you create a graphical application that uses a .dfm file. To open the Form Designer, click the Design tab at the bottom of the main editing window.
The appearance and functionality of the Designer changes, depending on the type of form you are creating or editing. For example, if you are using an HTML Element, you can display the HTML Tag Editor in the Designer by selecting View > Tag Editor .
Contents |
Visual Components
You can add Visual components to your form by dragging them from the Tool Palette, located in the lower-right section of the IDE, onto the form you are creating. These are the components that will be visible to the end user at runtime. The objects on the Tool Palette change dynamically, depending on the type of application or form you are designing.
The tool palette includes controls such as buttons, labels, toolbars, and listboxes for each of the various tool categories; types of applications if you're working at the project level, such as DLL wizards, console or logo applications; and web controls, HTML elements, and data components when you're working on a web application.
Form Positioner Preview 
The Form Positioner allows you to position the forms of your application in relation to each other as you design them. The Form Positioner Preview icon, located at the bottom right of the Designer, shows the positioning of your form as it will appear on the screen at runtime.
To activate the Form Positioner, click the Preview icon
. As you move your form in the Form Positioner, a tooltip displays the x,y coordinates of the upper left corner of the form.
In the x,y coordinates:
- x represents the Left property of the form.
- y represents the Top property of the form.
For example, the coordinates 0,0 indicate that the form is located in the upper left corner of the screen.
Nonvisual Components and the Component Tray
Nonvisual components are attached to the form, but they are only visible at design-time; they are not visible to end users at runtime. You can use nonvisual components as a way to reuse groups of database and system objects or isolate the parts of your application that handle database connectivity and business rules.
HTML Designer
Use the HTML Designer to view and edit Web Forms or HTML pages. You can change the default layout in the HTML Designer to be either 'Grid Layout' or 'Flow Layout'. Choose Tools > Options and then select HTML Options from the tree on the left side. Now you will see the Default Page Layout Options that allows you to select either Grid Layout or Flow Layout option. This Designer provides a Tag Editor for editing HTML tags alongside the visual representation of the form or page. You can also use the Object Inspector to edit properties of the visible items on the HTML page and to display the properties of any current HTML tag in the Tag Editor. A combo box located above the Tag Editor lets you display and edit SCRIPT tags.
To create a new HTML file, choose File > New > Other > Web Documents > HTML Page .
Design Guidelines
If you are creating components for a form, you can register an object type and then indicate various points on or near a component's bounds that are "alignment" points. These "alignment" points are vertical or horizontal lines that cut across the bounds of a visual control.
When you have the alignment points in place, you can supply UI guideline information so that each component will adhere to rules such as distance between controls, shortcuts, focus labels, tab order, maximum number of items (listboxes, menus), etc. In this way, the Form Designer can assist the Code Developer in adhering to established UI guidelines.
If the Snap to Grid option is enabled, and Use Design Guidelines is also enabled, the design guidelines will take precedence. This means that if a grid point is within the tolerance of the new location and a guideline is also within that distance away, then the control will snap to the guideline instead of the grid position, even if the guideline does not fall on the grid position. The snap tolerance is determined by the grid size. Even if the Snap to Grid and Show Grid options are disabled, the Designer still uses the grid size in determining the tolerance.
This feature is currently only available in VCL (This includes C++).
Taking a Snapshot of Your Form
The IDE generates a graphic image of the form when you choose Edit > Copy while the focus is on the Form Designer.
A design-time image of the form is copied to the clipboard using the CF_BITMAP format. You can paste the graphic image into any application that accepts this format (for instance, MSPaint, Paint.net, Photoshop, and so forth).
In addition to the graphic image, the component stream (containing values from the Object Inspector) is generated, part of the text representation of the selected component(s). You can paste this text into any text editor.
Context Menu
Right-clicking on a form in the Form Designer invokes the following context menu commands.
| Item | Description |
|---|---|
|
Edit |
Select from the following editing subcommands, which apply to the Form Designer contents:
|
|
Control |
Controls the front/back layers of the selected control. Choose from the following subcommands: |
|
Position |
Sets the alignment, size, and scale of the selected control. Choose from the following subcommands:
|
|
Reverses right and left. Choose from the following subcommands:
| |
|
Tab Order |
Invokes the Edit Tab Order dialog box. |
|
Creation Order |
Opens the Creation Order dialog box. |
|
Revert to Inherited |
Resets the properties, methods, and events of the selected control to the values of the base class control. If a form inherits design features and properties from another form, you can choose Revert To Inherited from the Form context menu to restore the form to its original state. For example, if a form inherits a certain button placement from another form and you then move the button, Revert To Inherited returns the button to its original position. |
|
Add to Repository |
Opens the Add to Repository dialog box. |
|
View as Text |
Opens the current source file in the Code Editor window. |
|
DFM Text |
Toggles the display of the DFM file (VCL forms file) in text or form. |