Form Designer
Go Up to Using the Code Editor and the IDE
Go Up to Getting Started with Appmethod
Contents
The Form Designer (or Designer) is displayed automatically when you are creating or editing a form, such as a 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.
The Form Designer (or Designer) is displayed automatically when you are creating or editing a form, such as an HD FireMonkey Application.
The Form Designer runs automatically when you create a graphical application that uses a form file (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 can change, 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 Form Designer Window
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 Desktop Application or a VCL Forms 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.
Here is a FireMonkey Form as it appears in the Form Designer, when you create a FireMonkey Desktop Application:
|
FireMonkey Form |
|
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.
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.
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.
Nonvisual Components
Nonvisual components such as a GestureManager 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.
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.
Context Menu
When you right-click a form in the Form Designer, the context menu is displayed.
- 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 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:
|
|
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 FMX. | |
|
Converts the style properties of the current application to match the Windows Metro style properties. | |
|
Edit Default Style (FireMonkey desktop controls) |
Opens the FireMonkey Style Designer. For more information, see Customizing FireMonkey Applications with Styles. |
Shortcut Keys on the Form Designer
The following shortcut keys can be used to move and resize the components on the Form Designer.
| Shortcut | Action |
|---|---|
|
|
Moves the selected component slowly |
|
|
Moves the component faster |
|
|
Changes focus among components |
|
|
Changes the size of the component |
|
|
Selects the parent component |
|
|
Moves forward to the next Editing tab |
|
|
Moves backward to the previous Editing tab |