Programming in Delphi uses components, like the button and label. And so, it
comes with a library of them, known as the Visual Component Library (VCL). In this
course, we'll be going through some of the more useful ones to start you off.
Before we start rattling off our list of components, let's go through some of the
properties which are common to most components. These won't be explained too much later, because
they usually do the same thing to all the controls.
If the component displays text, that text is usually its Caption. If you change it,
the displayed text changes too. For example, if we changed the caption of a form,
its title bar would change too.
If you're in a creative mood, Delphi lets you break free from monochrome
windows and displays. Simply change the Color property, and the component will
usually change its colour.
- Height, Width, Top, Left
As you might have guessed, these properties determine where the component is placed,
and how large it is. If you change them, the component resizes or re-positions
When a component isn't applicable, or shouldn't be modified by the user at runtime,
you should turn its Enabled to false so that the user can't do anything about it.
Of course, that doesn't mean that you, the programmer, can't touch it either...
When something should be there, but not be seen, set its Visible to false. You can
still modify any of its visual properties, but because it's invisible, those changes
can't be seen.
This property sets up which pop up menu to appear when the user right-clicks on the
- TabStop, TabOrder
Even though Windows naturally demands the use of a mouse, some users find using
the keyboard more convenient and efficient. So be sure to set TabStop and TabOrder
right for those die-hard keyboarders. TabStop determines whether pressing the Tab
key will ever activate it. TabOrder is the order in which the controls are selected
When you first create components, they are given names like Form1 and Label2. As you
might have realized, these names aren't very descriptive, making coding difficult and
error-prone. So, whenever you need to, rename your components. lblMyName is much
more understandable than something like Label12!
Sometimes, you'll need to store information inside the component itself. That's
where Tag comes in - it can store an integer number from -2147483648 to 2147483647,
and how you use it is entirely up to you. Tag is merely a storage place and does
not affect the component in any way.
Of course, like properties, there are a few standard events that can occur.
The code you write can be attached to any one of these events, so that it'll be
executed when that event occurs.
- OnClick, OnDblClick, OnMouseDown, OnMouseUp, OnMouseMove
The mouse can cause lots of events. By clicking it on the component, you get an
OnClick. Double-clicking it causes an OnDblClick. Pushing the mouse button down
causes an OnMouseDown while releasing it causes an OnMouseUp. Merely moving
the mouse over a component will cause an OnMouseMove.
- OnKeyPress, OnKeyDown, OnKeyUp
If the component is selected and a key is pressed, an OnKeyPress will occur. When
the key is down, an OnKeyDown occurs. When released, an OnKeyUp occurs.
- OnEnter, OnExit
When focus is given to a component, an OnEnter is generated. When the user leaves it,
guess what? An OnExit is generated! With these two, you can make a component change
its appearance only when it acquires focus.
Now that we've got that over with, let's start going! We won't be doing a complete
runthough of all the components, but we'll cover enough of them for you to get a
head-start. Good luck!
Button Pushing Jobs
Buttons are everywhere. On a dialog, on a toolbar, on the title bar, buttons
are simplest form of interaction between human and software. Imagine the power a
new user feels when he sees the screen sink in with the touch of a mouse... Opps,
that's a bad joke. But quite honestly, the button is an extremely flexible gadget.
You might be surprised at how many times buttons do a better job than some other
A note about the caption. An ampersand is a special character when it comes to
buttons and so on. Instead of displaying the ampersand, what Windows does is to
make the letter after the ampersand become a shortcut key and show it as underlined
on the screen. For example, O&K will look like OK and pressing k will
If cancel is true, clicking on the button is equivalent to pressing Esc.
If default is true (and only one button on each form can have a button with default true),
pressing enter will select it no matter which other button has the focus.
A Delphi program can have more than one form, but only one appears unless you show
the others. One way of doing so is to call ShowModal.
The form will be shown modally, that is, you can't switch back to the first one without
closing the modal form first. What ModalResult does for a button on a modal form is to
close the modal form and return the ModalResult value back to the first form. For more
details, press F1 while ModalResult is selected in your Object Inspector.
Not surprisingly, there is no OnDblClick for the button because buttons react
immediately after each click. Other components, however, wait a moment after each click
to determine whether it's an OnClick or OnDblClick.
A Group of Boxes Or A Box Of Groups?
Using RAD development systems has its benefits, but quite honestly, it breeds
bad programming habits in the long run. One of them is being messy, and this
messiness is reflected in some programs' interface design. Dispersed checkboxes,
haphazardly placed buttons, and unnecessary repetition. Well, what can we do?
Enter the GroupBox, this component holds your related components together, so
nothing goes out of place.
Of course, there's a little catch to this. The GroupBox is supposed to hold
components together, but to do this, the components must be inside the GroupBox.
To test whether this is so, simply try to remove the component from the GroupBox.
If clips at the edge of the GroupBox, then everything's all right, otherwise you'll
have to do this dastardly trick to get it in.
If the component is cannot be seen, try selecting it from the Object Inspector,
then manually changing its Left and Top properties. This will bring it back in
- Cut the component (Ctrl-X)
- Select the GroupBox
- Paste it in (Ctrl-V)
Radio Buttons Don't Play Music
When you have series of choices, but you only want the user to choose one, use
radio buttons. For radio buttons to work, you must place those which you want to have
in a set into a GroupBox. When you run the program, you'll realize that only one
radio button in each set can be selected at one time.
Slightly useless property for you to define where the text caption for each radio button
goes. For instance, a value of taLeftJustify will place the caption at the left.
This is the most important property of all. This property tells us whether the radio
button is selected. If it is, then that the option the user selected.
Also, if your GroupBoxes seem to only contain radio buttons, you should consider
using the RadioBox, which is dedicated solely to radio buttons. Find out more from
I'll pay by Check, if I may, sir.
Checkboxes don't really need elaboration. They allow for the user to select
multiple choices. You don't have to put them into a GroupBox, because their states
are not dependant on one another.
This property allows you to select cbGrayed to gray a checkbox. Notice that
the checkbox is not disabled! It's just an extra state of the checkbox
which means that what it's representing is unsure.
This allows the user to gray a checkbox by clicking.
The label is labelled label.
Labels serve two purposes. Firstly, they provide captions for components without their own
captions. Secondly, they serve as static text for people to read. It can also function
as a shortcut key provider for another component. We'll see how below.
This property defines whether the text is left, right, or center aligned.
This lets the label resize automatically.
If you decide to add a shortcut key with the ampersand (&), set this property
to the control that should receive focus.
If you decide that the ampersand is that important to have on the screen, turn
Allows word-wrapping to occur.
Note that this property does not determine the font's colour. To change that, expand
the Font property and change the Color under Font instead. This Color changes the background
colour of the label instead.
This makes the background transparant, allowing other components under it
to be visible.
The End Of It All
And yes, this marks the end of our runthrough. Of course, there're a whole lot
more components to learn, but with Online Help, getting the hang of them is a snap.
There are three ways to get online help immediately:
Of course, you can always search through the index, but isn't this much faster?
Hope to see you again soon, over and out.
- To get help on a specific component, select it and press F1.
- To get help on a property or an event, select it and press F1.
- To get help on code, move your input cursor to the term and press F1.