Working with VCL Components

Components are classes that descend from the TComponent class and can be manipulated at design time on the Designer Surface.

The user interface is the most important part of an application, sometimes even more important than the code itself. To build a user interface in Delphi, you have to know how to add components to the Designer Surface and how to modify components using the Object Inspector.

The simplest way to add a component to the Designer Surface is by double-clicking the component on the Tool Palette window. Add a TLabel component to the Designer Surface by double-clicking the TLabel item in the Standard category on the Tool Palette window (see Figure 11-7).

Figure 11-7: Adding a component to the Designer Surface

When you add a component to the Designer Surface, the new component is automatically selected and its properties are displayed in the Object Inspector. The Reference window is also updated to show the relationship between the components on the form.

The double-click method of adding components to the Designer Surface isn't extremely productive because we have to perform additional steps to move the component to the desired location.

Delphi also enables you to automatically place a component at the desired location on the form. To place a component at a specific location on the form, you have to select the component by clicking on it in the Tool Palette. The selected component is shown in purple (see Figure 11-8). Once the component is selected, you can add it to the Designer Surface by clicking at the desired location. You can also place a component at a specific location by dragging and dropping it from the Tool Palette to the Designer Surface.

Figure 11-8: Selected component

When you add components to the Designer Surface using any of the above methods, the components are placed at a default size. If you need a component that is bigger or smaller than the default sized component, you have to use yet another method.

To add a component to the Designer Surface and automatically adjust its size, you first have to select the component on the Tool Palette. Then click on the Designer Surface and draw the outline of the component. When you release the left mouse button, the component will be added at the position and size of the drawn outline (see Figure 11-9).

Figure 11-9: Drawing a component on the Designer Surface

The Tool Palette window also enables us to easily add a larger number of components to the Designer Surface. For instance, if we have to create the user interface for a calculator application, it would be tiresome to add all the necessary buttons one by one.

To add several components to the Designer Surface at once, you first have to select the component on the Tool Palette window by holding the Shift key and clicking on the desired component. A component thus selected appears highlighted with a dark outline (see Figure 11-10).

Figure 11-10: Multiple copy selection

After you have selected the component, you can click on the Designer Surface to add a component of the default size or draw an outline to create a resized component. Every time you click on the Designer Surface, another copy of the component is created. When you finish adding the components, deselect the selected component on the Tool Palette window by clicking on the mouse cursor button to the right of the Categories button on the Tool Palette (see Figure 11-11).

Figure 11-11: The deselect button

The Tool Palette window provides another tool: the Filter tool. Usually, to select a component, you have to know the component's category, scroll to the category, and select the component. The Filter tool enables you to quickly locate a component, regardless of the category. You only need to know the component's name. For instance, if you want to select the TButton component, click on the Filter button and start typing TButton. The Tool Palette filters the components and displays all components that start with the letters you typed (see Figure 11-12).

Figure 11-12: Filtering components on the Tool Palette