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, such as a VCL Forms Application or an HD FireMonkey Application. The Form Designer runs automatically when you create a graphical application that uses a form file, either a .dfm or an .fmx file. To shift focus to the Form Designer when you have a visual project open in the IDE, 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.
FireMonkey and VCL Have Similar Form Designers but Different Forms
Here are the FireMonkey Form and the VCL Form as they appear (separately) in the Form Designer, when you create either a FireMonkey or a VCL application:
|
FireMonkey Form |
|
|
VCL Form |
|
The two forms look different, simply because a VCL form is a native Windows form, while a FireMonkey form is platform-neutral and is custom drawn by the FireMonkey tools. For example, a VCL form displays the standard Windows buttons for Minimize, Resize, and Close commands. In a FireMonkey form, however, placeholders appear in place of these platform-specific buttons.
Despite these visual differences, the Form Designer works almost the same for FireMonkey and VCL. One difference is that several different context menu commands are supported for FireMonkey and for VCL.
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 run time. 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 are working at the project level, such as DLL wizards, console or logo applications; and web controls, HTML elements, and data components if you are working on a web application.
For visual and nonvisual components in the Form Designer, you can view and set properties and events by using the Object Inspector.
Form Positioner Preview (VCL only) 
The Form Positioner, part of the VCL Form Designer only, allows you to position forms in relation to each other as you design your application. The Form Positioner Preview icon, located at the lower-right corner of the Designer, shows the positioning of your form as it will appear on the screen at run time.
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
Nonvisual components are attached to the form, but they are only visible at design time; they are not visible to end users at run time. 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.
FireMonkey Mobile Form Designer
When you are creating or editing a FireMonkey mobile form, a form designer with special features for mobile development is displayed. For details, see FireMonkey Mobile Form Designer.
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 the 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 (VCL Only)
When you are arranging components on a form, design guidelines appear on the Form Designer on or near a component's bound. Design guidelines are vertical or horizontal lines that cut across the bounds of a visual control (top, bottom, right, left, center, and text guidelines). You can use the design guidelines as "alignment" points to align adjacent controls.
When you mouse-over a control, a popup window displays UI guideline information, so that you can see how each component will adhere to rules, such as position of origin (horizontal, vertical), size of the selected control, tab stop, and relative order of an item (in groups, listboxes, or menus).
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.
To enable or disable design guidelines, set the Use designer guidelines field on the Tools > Options > Environment Options > Form Designer dialog box. The design guidelines feature is available only in VCL applications (for both Delphi and C++).
For more information, see Using Design Guidelines with VCL Components.
Taking a Snapshot of Your Form (VCL Only)
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 is generated (containing values from the Object Inspector), as part of the text representation of the selected components. You can paste this text into any text editor.
Context Menu
When you right-click a form in the Form Designer, the context menu is displayed. The context menu commands are available for both VCL and FireMonkey, unless otherwise noted in the following table.
- Note: This section only covers context menu entries when editing a form. For data modules, see Context Menu for Data Modules.
| Item | Description |
|---|---|
|
Items Editor (certain FireMonkey components) |
Opens the Items Designer with focus on the selected control. |
|
Add Item (certain FireMonkey components) |
Allows you to add an item to the selected control on the form. For example, if you add a TEdit control to a FireMonkey Metropolis UI form, you can right-click the TEdit control, select Add Item, and add an embedded glyph such as TPasswordEditButton. |
|
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: |
|
(only if enabled in Tools > Options > LiveBindings) |
Opens the LiveBindings Wizard. |
|
Opens the LiveBindings Designer. | |
|
Position |
Sets the alignment, size, and scale of the selected control. Choose from the following subcommands:
|
|
(VCL forms) |
Reverses right and left. Choose from the following subcommands:
|
|
Tab Order |
Invokes the Edit Tab Order dialog box. |
|
Creation Order (nonvisual components) |
Opens the Creation Order dialog box. |
|
Resets the properties, methods, and events of the selected control to the values of the base class control. See Revert to Inherited. | |
|
Add to Repository |
Opens the Add to Repository dialog box. |
|
Opens the current form file as text in the Code Editor window. See View as Text. | |
|
Saves the form file either in text form (enabled) or in binary form (disabled). See Text DFM or Text FMX. | |
|
Converts the style properties of the current application to match the Windows Metro style properties. See Developing Metropolis UI Applications. | |
|
Edit Default Style (FireMonkey controls) |
Opens the FireMonkey Style Designer. For more information, see Customizing FireMonkey Applications with Styles. |
|
Test Dialog (VCL only) |
For any of the modal VCL dialogs, tests the dialog. That is, if you right-click an OpenDialog on the Form Designer and select Test Dialog, the standard File Open dialog is displayed. |