Home ESF Logo Text Only Quick link to main content

Home | Services | Events | Features | Interviews | Profiles | Reviews | News | Resources | Press | Archive

Section 1: The Delphi IDE

If you are going to obtain a working knowledge of Delphi, then you are going to spend a considerable time, with your head buried in the IDE. In this section we will provide a guided tour of some of its more important features.

Delphi's IDE contains all the facilities you need to create, compile and run software for Windows. As already stated it is a truly visual development environment. When first run, the IDE creates four separate windows. The first is the main menu and button bar. This provides access to the main features of the software, and includes the component palette - a series of buttons sitting on categorised tabs, each representing a different component. This area of the environment is pictured below.








Figure 3 The Delphi IDE Button Panel, Menu and Component Palette

The second important window created is the default main form for the application. Initially this is titled Form1, but the name can (and should) be changed to something more descriptive. The user can add components to this form at "design time" by clicking on the required component in the component palette, and then clicking somewhere on the form. Most components can then be positioned more accurately by dragging and or stretching the resize handles.





















Figure 4 The Default Main Form with Alignment Grid

Most components have a large number of "properties". These properties (attributes of the component that can be changed at run time or design time or both) are displayed in the third important window. This is titled "object inspector", and appears aligned to the left of the screen by default. The contents of this window are "context sensitive", i.e. change to reflect the component that is currently selected. The properties of an object commonly include things like its height, colour, position and caption. As you change the properties of an object by editing them with the object inspector, you will see them change immediately.






























Figure 5 The Object Inspector Panel Showing Some of the Properties of Form1

Once you have designed your interface using the available components, and changed their properties so that they look the way you want them to look, it is necessary to provide some code to ensure that they generate the effect you wanted. The code you write is entered in the code editor window. This is syntax sensitive, and in Delphi 4 runs a compiler thread in order to be able to make suggestions as to what you might want to type next. This facility can be a help, but in large projects, can slow down your typing to the extent that you feel the need to disable it.


































Figure 6 The Code Editor Window, Showing Syntax Highlighting

You will type your code into this area, but as you progress through the course, you will also find that Delphi does a lot of the typing for you. Certainly, I didn't type any of the code that appears in the picture above. This is part of the Delphi philosophy. If the environment can do it for you, then it will. If you have never programmed under Windows before, then you will not be aware of the amount of code that Delphi is in effect "writing for you". Certainly it is a great deal more than you see in the code window above.
It's time to try a first experiment... and write a Delphi pro gram for Windows.

Exercise 1:

The program will be very simple. We will write "Hello world" - What Else!?. The specification for our program is as follows. We will have a single form which will contain two buttons:

The first button will have the caption "Say Hello World". Pressing this button will make the text hello world appear in red on the form, in a large font. The second will have the caption close on it, and clicking on it will exit our application.

In addition, we will have the application display "Hello World1" in the title bar of the main window.

Because Delphi uses components, there is no need for us to write much code to make all of this happen. In fact only two lines are required, with some careful user interface design. So the re you have it, "Hello World" for Windows in only two lines... Who said developing for Windows was hard?

The following steps and images will guide you through the process:

1. Start Delphi if it is not already running
2. From the component palette of the main tool window, select the button icon as shown below:








3. Now click on the form somewhere to position the first button.
4. Repeat steps 2 and 3, to create the second button, creating a form something like this one:

























Note that Delphi has named these "button" components Button1 and Button2 by default, and has given them a caption which is the same as their default name.
5. We want to rename the buttons, and provide new captions. It is as important to rename buttons, forms and all your other componentry as it is to pick sensible variable names in other programming languages.

HINT - Typically programmers name their components after a combination of what the control is for and what it is. Commonly, a three (sometimes more) l etter combination is appended or prepended to the component name. e.g. for Buttons "btn" is often used, for forms, "frm" for Lists "lst" etc... So a close button will often end up with the name CloseBtn or btnClose.

We will name the button that will close our application "CloseBtn". The button that will show the text, we will call the "HelloBtn". We make these changes by selecting the component we want to change, and then referring to the object inspector. The properties are displayed in alphabetical order. First we will change the Name property, then the Caption property. It may be necessary to change the width of the buttons to accommodate the full width of the caption. This adjustment can be made by typing a new value for the "Width" property in the object inspector, or by dragging the resize handles of the buttons in the form editor.



















































Figure 7 The Hello World Form after Adding and Editing the Buttons

6. The next step involves adding the text item to the form, which will do the job of presenting the hello world text. We will use the property editor to make the text larger, and to change the colour. First click on the text label component in the palette, and drop the component on to the form.
7. Change the name of the text label component to HelloLbl, and the caption property to "Hello World"
8. Find the "Font" property, and click on the three dots to its right.
9. In the resulting dialog box, change the size of the font to 60, the "Colour" property to clRed, and the font name to Times New Roman.
10. Make the visible property of the text "False". Note that this does not make the text disappear whilst we are designing the form. It will not be visible when the form is first shown on the screen though.
11. Return to the form designer, and position the text so that it is central on the form
At this stage we have all of the user interface design complete. Now we must make the buttons do something. Every control is able to respond to a number of events. Controls have default behavior (a button will go down when clicked for example), but the response to being clicked is something that the programmer provides. In our case we want clicking on the "Say Hello World" button to make our text visible. Most controls have a "default event". If you double click on a control, the IDE will assume you want to specify the behavior of the control you double clicked for that default event. The default event for a button is being clicked. So if you double click on the close button, the text editor window will appear, with a procedure framework already in place, and will then wait for you to add your required behavior in code form.
12. Double click on the Close button on the form designer.
13. In the procedure, type the command close
14. Double click on the Say Hello World button
15. In the procedure, type the following: HelloLbl.Visible := True;
After these changes, your code window should look like this:




















































Figure 8 The Completed Hello World Code

We are now ready to run our program for the first time.
16. Go to the main menu and select the Project option. On the project menu select compile Project1. If you wish you can short cut this process by typing Ctrl-F9. Delphi will now compile your project, and link it, to create an executable. You can run this executable without leaving the IDE by pressing the green "play" button on the button bar. At this point, Delphi may insist on you saving your work. If it does, save the unit as main.pas, and the project as HelloWorld.dpr. It is advisable to create a folder sp ecifically for these examples, as there will be many of them during the course. Make one top level directory called Projects, and then for each example a sub folder in projects called Ex1, Ex2 etc...

Exercise 1a

1. Hide the Hello world message (set the visible property to false)
2. Move the message up, down, left or right by 20 pixels each time the button is clicked (change the top, or left property by adding or subtracting 20)
3. Change the caption of the message to something else (set the caption property)




Home | Services | Events | Features | Interviews | Profiles | Reviews | News | Resources | Press | Archive
About ITWales | Privacy Policy

All material on this website ©2002-2008 ITWales
spacer

Search ITWales

Advanced Search
envelope Subscribe to
ITWales Updates
Click Here!