You can add Visual components to your form by dragging them from the Tool Palette, 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.

A preview icon at the bottom right of the Designer (for VCL Forms) shows the positioning of your form as it will appear on the screen at runtime. This allows you to position the forms of your application in relation to each other as you design them.

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.  

When you add an nonvisual component to a form, they are displayed in the component tray at the bottom of the Designer surface. The component tray lets you distinguish between visual and nonvisual components.

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 ToolsOptions 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 FileNewOtherWeb DocumentsHTML Page.

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 will still use the grid size in determining the tolerance. 

This feature is currently only available in VCL (This includes C++).

Starting a Project 

Tour of the IDE 

Adding Components to a Form 

Setting Component Properties 

Using Design Guidelines