Form Designer

From Appmethod Topics
Jump to: navigation, search

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: Code, Design, and History Tabs

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

FireMonkey Form

VCL 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 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:

  • Undo
  • Cut
  • Copy
  • Paste
  • Delete
  • Select All

Control

Controls the front/back layers of the selected control. Choose from the following subcommands:

LiveBindings Wizard

(only if enabled in Tools > Options > LiveBindings)

Opens the LiveBindings Wizard.

Bind Visually...

Opens the LiveBindings Designer.

Position

Sets the alignment, size, and scale of the selected control. Choose from the following subcommands:

Flip Children

Reverses right and left. Choose from the following subcommands:

  • All--reverses all the elements on the form
  • Selected--reverses only the selected elements

Tab Order

Invokes the Edit Tab Order dialog box.

Creation Order

(nonvisual components)

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. See Revert to Inherited.

Add to Repository

Opens the Add to Repository dialog box.

View as Text

Opens the current form file as text in the Code Editor window. See View as Text.

Text FMX

Saves the form file either in text form (enabled) or in binary form (disabled). See Text FMX.

Convert to Metropolis UI Form

Converts the style properties of the current application to match the Windows Metro style properties.

Edit Default Style
Edit Custom Style

(FireMonkey desktop 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.

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

Ctrl + Arrow Key

Moves the selected component slowly

Ctrl + Shift + Arrow key

Moves the component faster

Tab or Arrow Key

Changes focus among components

Shift + Arrow Key

Changes the size of the component

Esc

Selects the parent component

Ctrl + Tab

Moves forward to the next Editing tab

Ctrl + Shift + Tab

Moves backward to the previous Editing tab

See Also