Designing User Interfaces

From RAD Studio
Jump to: navigation, search

Go Up to Application Development and RAD Concepts


A graphical user interface (GUI) consists of one or more windows that let users interact with your application. At designtime, those windows are called forms. RAD Studio provides a designer for creating VCL Forms, Web Forms, and HTML pages. The Form Designer and forms help you create professional-looking user interfaces quickly and easily.

Using the Form Designer

When you create a VCL Forms application or a DataSnap server application, the IDE automatically displays the appropriate type of form on the Design tab in the IDE. As you drop components, such as labels and text boxes, from the Tool Palette onto the form, RAD Studio generates the underlying code to support the application. You can use the Object Inspector to modify the properties of components and the form. The results of those changes appear automatically in the source code on the Code tab. Conversely, as you modify code with Code Editor, the changes you make are immediately reflected on the Design tab.

The Tool Palette provides dozens of controls to simplify the creation of VCL Forms, DataSnap servers, and HTML pages. When creating a VCL Form, for example, you can use the Vcl.Menus.TMainMenu component to create a customized main menu in minutes. After placing the component on a VCL Form, you type the main menu entries and commands in the boxes provided. The Vcl.Menus.TPopupMenu component provides similar functionality for creating context menus. There are also several dialog box components for commonly performed functions, such as opening and saving files, setting fonts, selecting colors, and printing. Using these components saves time and provides a consistent look and feel for the dialogs in your application.

As you design your user interface, you can undo and repeat previous changes to a form by choosing Edit > Undo and Edit > Redo. When you are satisfied with the appearance of the form, you can lock the components and form to prevent accidental changes by selecting Edit > Lock Controls.

Setting Form Designer Options

You can set options that effect the appearance and behavior of the Form Designer. For example, you can adjust the grid settings, and the style of generated code and HTML. To set these options, go to Tools > Options > Environment Options > Form Designer and Tools > Options > HTML Options.

Setting Form Designer Guidelines with VCL Components

You can use VCL (with Delphi or C++) to set up components that are "aware" of their relation to other components on a form. For instance, when you drop a component on a form, it will leave a certain amount of space from the border of the form, depending on how the 'padding' property is set.

You can set properties to specify the distance between controls, shortcuts, focus labels, tab order, and maximum number of items (list boxes, menus).

The developer can then use these components to create forms when the Use Designer Guidelines option is enabled. If the Snap to Grid option is enabled, and Use Designer Guidelines is also enabled, the designer guidelines will take precedence.

See Using Design Guidelines with VCL Components to view the procedure for setting these guidelines.

See Also