Form and components

In the development environment we will create applications by designing the look of the application, i. e. what our program window will look like, we will run and debug, i. e. test and repair, our programs. We design the look of the application using the components and their placement in the Form as follows:

Select a component from the palette of components by clicking on the component icon.
Place the selected component on the Form by clicking or dragging the component on the Form.

Components are building elements from which we create (build) applications. They serve to interact with the program, to enter input data and to display output values, or to manage the application runtime. They are divided into several groups, e. g. Standard, Additional, System, etc. We will most often use components Button, Image, Edit (Figure 5).

Figure 5: Components

The Form window is visible as soon as a new application is created. If we do not see it, we can find it by pressing the F12 button or in the main menu View -> Toggle Form/Unit View.

From the Standard entry, we add a button in the Form under the name TButton (Figure 6).

Figure 6: Button Creation

The button is bounded by black squares and it can be moved or resized. If we have the button Button1 selected from the Form, the Object Inspector window will change as well. Button dimensions are saved in the items Height and Width. They can be changed by clicking on their values. The label of the button is embedded in the item Caption.

The Object Inspector (Figure 7) is formed by two columns: the left one contains the setting name (e. g. Height), in the right column is the current value (e. g. 240).

We can change the information in the right column to change the design of the button or its behaviour. Let´s change the setting of the Caption in the Object Inspector to the text e. g. BUTTON. Note that at the same time the description on the button has changed as well.

Figure 7: Object Inspector

In the Object Inspector we can also change the following properties of the components:

Caption - text on the button

Font - the button text font setting

Height - button height

Width - button width

Left - x-axis coordinate of the button position

Top - y-axis coordinate of the button position

Warning: we do not recommend changing the item Name yet!

We can have many buttons in the Form, they can have different sizes and titles (Figure 8). Buttons can be easily deleted. First press it so it is marked, then press the Del (Delete) button.

Figure 8: Buttons

Another component which we will often use is an Image. It is found in the Additional component group (Figure 9).

Figure 9: Image

An empty square appears which can be dragged and moved on the Form by using the black squares. The settings for Image1 appeared in the Object Inspector window. Again, its height, width, etc can be adjusted. You can draw and write on the Image by using graphic commands that we get to know later.