1.
Objects,
Properties & Events
| Forms | Textbox, Label Command button | Running Code In a Form |
| Events | Form Modes | Summary |
| Practice | Exercise | Assignment |
Learning
On
completion of this chapter you will know:
1. What are objects
2. How objects are used to interface
with the user
3. What properties of an object mean
4. How changing the property of an
object can alter that object
5. The nature of events
6. How to use events to control the
running of programme
code
7. How programme code can alter the properties of
objects
Introduction
Up to now
we have not added any visual elements to our programming. The reason for this is that we wanted to
concentrate on the programming concepts and techniques such as programme structure, use of Case structure etc
without being distracted by visual elements.
For this reason data was inputted into the programme using the InputBox function and the result of the
processing was displayed in the Immediate Window.
It is now
time for us to look at forms and the controls that we can put on forms in order
to create an interesting and dynamic interface for the computer user. After looking at the nature of forms and the
objects we can place on them, we shall look at using a form to process a simple
payroll application like the one we did in Chapter 2.
A look at Forms
Figure 11‑1
You create
a form in exactly the same way as you create a Module. Simply click on Insert and from the drop down menu click on Form. The form will appear
as in Figure 11‑1 above. The form itself is the grey rectangle with
the dotted grid. In the bottom left
corner we have the properties box. This
shows the properties of form. A form has
35 properties altogether but only 11 of them are shown above. We never use the full 35 properties anyway –
in fact we rarely use any more than five properties of the form. The most commonly used ones are Name,
Caption, Height and Width.
As stated
earlier, changing the properties of an object changes the object itself.
Currently, referring to Figure 11‑1, the Caption property has a value
of UserForm1. We can see this by looking at the writing in the blue band at the
top of the form. Also we can examine the
value of the Caption property in the Properties box at the bottom left of the
screen. The BackColor
property is shown as grey and the Height property is shown as 180. Altering any of those properties will alter
the appearance of the form.
Figure 11‑2
To alter
the BackColor property we click on that property and
then click on the down-pointing arrow.
This gives us a range of colours as shown in Figure 11‑2 above. Simply selecting one of the colours will put that colour as
the background colour of the form. Figure 11‑3 below shows the form with the
background colour changed to white, the Caption
property changed to Sample form for teaching and the Height property changed to
270.
Figure 11‑3
The Textbox, Label and Command Button controls
Textboxes, labels and command buttons are the most common controls that appear on forms, and they are the first that we will examine for creating an application. As stated above we shall use them in order to create a graphical version of the payroll example we used in Chapter 2.
Figure 11‑4 below shows a form with labels, textboxes and a single command button attached. To the right of the form is a panel which is labelled Toolbox. This panel is shown in more detail in Figure 11‑5. Let us examine this panel first as we shall be using it to get all of the controls that we place on the form.
Here we are interested in only three controls, Label, Command button and Textbox. In order to create any of those controls on the form we simply click on the icon in the Toolbox and then draw that object on the form using the mouse.
Figure 11‑4 shows five labels, five textboxes and one command button drawn on the form.
Figure 11‑4
Figure 11‑5
Now let us examine the form itself in Figure 11‑4. As stated earlier this form will be used to create a visual version of the payroll application we started with at the beginning of the book. At that basic level we started with the following data items:
1. Hours
2. Rate
3. Gross
4. Tax
5. Net
In the programme we needed five variables to hold the values of those data items, we used the InputBox function to get data from the user for hours and rate and we used the Debug.Print function to display the values of the gross, tax and net in the Immediate Window. In the form we shall use the first two textboxes for the user to enter the values for the hours and rate and the final three textboxes to display the values of the gross, tax and net. The user will enter hours and rate into the first two textboxes, and then click on the command button. This will run the code behind the form. This code will read the values in the first two textboxes, perform the calculation and then display the gross, tax and net in the last three textboxes. This means that the textboxes will be referred to in the code. Because of this we need to give them meaningful names. We could, of course, call them Hours, Rate, Gross, Tax and Net – and the programme would work perfectly with those names. However when naming textboxes, or any other controls on the form that will be referred to in the code we follow the same convention as we did with naming variables, i.e. the first three letters of the name describes the type of control we are naming. As we are naming textboxes, those three letters will be txt. Thus our five textboxes will be named txtHours, txtRate, txtGross, txtTax and txtNet.
The command button is used to run the code that calculates the pay and thus it should be named cmdCalculate.
There is no need to name the labels to the left of the textboxes since they will not be referred to in the code.
Figure 11‑4 shows the first textbox and, from the properties window, we can see that it is named txtHours.
As stated the labels to the left of the textboxes need not be named but their Caption properties have to be changed in order to describe the textboxes to the right. Thus their Caption properties have been altered to Hours, Rate, Gross, Tax and Net.
Creating and running Code in a Form
Finally we shall look at the command button and how we can use it to create and run the code. If your display is as in Figure 11‑4 then double click on the command button. Once you do this your display will change to that shown in Figure 11‑6 below, except that at this stage you should not have the procedure calculatePay. Also, if instead of Private Sub cmdCalculate_Cick, you have Private Sub CommandButton1_Click then you have forgotten to name your command button. If this occurs then return to the form by using View/Object, then name the command button and double click on it once more to return to the Code view.
Figure 11‑6
The area between Private Sub cmdCalculate_Cick and End Sub should be blank. We could insert the code for calculating the pay here and it would work fine. From the point of view of overall programme design, this is not a good idea. The reason is that if the same code had to be run from a different form then we would have to enter the same code into the click event of that form. If we once put the code into a separate procedure and then call it from the click event of our button, then if we need to use the same procedure elsewhere we simply call from the click event of the other form control and have no need to make a second copy of it.
The complete code is shown both in Figure 11‑6 and, for clarity, in Listing 11‑1 and Listing 11‑2. The code in lines 1 – 3 hardly needs explaining. Line 1 indicates that it is the click event of the command button and line 2 calls the procedure Sub calculatePay.
Listing 11‑1
|
1 |
Private
Sub cmdCalculate_Click() |
|
2 |
calculatePay |
|
3 |
End
Sub |
Listing 11‑2
|
1 |
Sub
calculatePay() |
|
2 |
Dim sngHours As Single |
|
3 |
Dim curRate As Currency |
|
4 |
Dim curGross As Currency |
|
5 |
Dim curTax As Currency |
|
6 |
Dim curNet As Currency |
|
7 |
sngHours = Val(txtHours.Text) |
|
8 |
curRate = Val(txtRate.Text) |
|
9 |
curGross = sngHours * curRate |
|
10 |
curTax = curGross * 0.25 |
|
11 |
curNet = curGross - curTax |
|
12 |
txtGross.Text = curGross |
|
13 |
txtTax.Text = curTax |
|
14 |
txtNet.Text = curNet |
|
15 |
End
Sub |
Sub
calculatePay is shown in Listing 11‑2.
If we compare this code to that in Listing 3‑1 we see that the two pieces of code
are almost identical. The only
differences are in lines 7 and 8 and lines 12, 13 and 14. In the example in Chapter 3 the values were given by the user
through the two InputBox
functions. In our current example the
user enters the values for hours and rate in the textboxes txtHours and
txtRate. When we run the procedure
calculatePay, it reads the values we
have entered into those two textboxes.
In line 7
we have: sngHours = Val(txtHours.Text)
The textbox
txtHours
is the place where we put the value of the hours worked by an employee. One of the properties of a textbox is the Text property. When we first load up the form all of the
textboxes are blank. This means that
their Text properties are null. Once we enter something into the textbox via
the keyboard the Text property
changes. Thus if we entered 20 as the value
of the hours worked, then the Text
property of txtHours would change to “20”. Similarly entering 10 into the textbox txtRate
would cause the Text property of
that box to change to “10”. Note that
even though we enter numeric characters once they are in the textbox they are
treated as text. Thus when the code in
line 7 reads the Text property of txtHours it reads
text data and not numeric data. Before
this is stored in the variable sngHours it must be converted to
numeric format. The Val function does this for us.
Thus the sequence of events in line 7 is:
1. The Text property of txtHours is read
2. The Val function converts this property into a number
3. This number is stored in the
variable sngHours
The exact
same logic applies to line 8.
Now let us
have a look at how the results of the calculation are displayed on the
form. Remember that the user did not
enter any data into the textboxes txtGross, txtTax or txtNet. Thus their Text properties are null.
The programme, however, can not only read these properties, it can also
change it. Thus in order to display the
value of the gross at line 12 the programme sinply
changes the Text property of txtGross to the value of the variable curGross. The values of the tax and net are displayed
in their respective textboxes in exactly the same way.
Figure 11‑7 below shows what the form would
look like after calculating pay, where 20 hours were worked at a rate of K10
per hour.
Figure 11‑7
Events – an Introduction
In the example above we used the procedure cmdCalculate_Click in Listing 11‑1in order to call the procedure calculatePay in Listing 11‑2. The former procedure is generated by the system itself. We can read its name as the Click event off the control cmdCalculate.. Events are things that happen. In programming they are things that happen to controls placed on forms. There are many types of events that can happen to many types of controls. Later we shall be looking at more of those events but for now we concentrate on the click event off commandbuttons. The click event of a particular object occurs whenever we use the mouse to click on that object. Thus if we have a button named cmdCalculate on a form and we click on it then the Click event of cmdCalculate occurs. What this means is that a procedure named cmdCalculate_Click will run.
Modes of a Form
Forms have two modes: Design Mode and Form Mode. The Design Mode is used when we are designing a form i.e. when we are adding labels, textboxes, etc. to it. We attach code to it also in the same mode. Thus the form we see in Figure 11‑1 to Figure 11‑4 is in the Design Mode.
Once we have completed our design and run the application by pressing F5, then we see the form as in Figure 11‑7. This version of the form is the Form View. This is the view in which we can processs that data that the form was designed for in the first place.
Summary
A form is an easy way for a programme and a user to communicate. This communication is normally done through the different controls that are on the form. The most common controls are Textboxes, Labels and Command Buttons. In the example shown in Figure 11‑7 the textboxes are used both for the user to communicate with the programme and for the programme to communicate with the user. The user communicates with the programme by entering the values of hours and rate into the textboxes txtHours and txtRate. The command button is also for the user to communicate with the programme. Once the user clicks on the command button the code in the Click event of that button runs.
Practice
Part 1
Create a form like that shown in Figure 11‑7. Add labels, textboxes and a command button and name them as they are named above. Next double click on the command button to get into the code part of the form. Now copy into it the code from Listing 11‑1 and Listing 11‑2. Check that the programme runs correctly.
Part 2
Modify the code for Part 1 as follows:
1. Create an extra textbox that will hold the employee’s full name. Name the textbox appropriately
2. Alter the programme code so that the employee’s name is stored in a string variable.
3. Add an extra button to the form for saving the payroll data to a text file named “Workers”. The code will have the following steps:
a. The file is opened in Append mode.
b. The contents of the textboxes are written to the file
c. The file is closed.
Exercise 11
1. Write a description of a Form. In your work pay attention to how the form can be used for input and output of data. Also mention the different objects that can be placed on the form and their uses.
2. What are the Visual Basic conventions for naming textboxes, and command buttons.
3. Explain how to get a code running by clicking on a command button.
Assignment Part 9
Create a form to process the same data you were processing in Assignment Part 8. Here there is no addition to the processing. Instead you will create a form which will receive the input data from the user. It then performs the same processing as before. Some of the output will, however be different. Instead of printing the results to the Immediate Window it will instead print them to the appropriate text boxes of the form.
From above you should be able to work out that the form must contain textboxes for all of the input items as well as for all of the outputs that are listed in showData. It must also contain a command button on whose click event the procedure Sales will run. The following alterations must be made to the procedure Sales:
1. The While loop structure has to be removed.
2. All of the lines that use the InputBox function have to be altered so that they read their data from the form’s textboxes instead.
The only other alteration that needs to be made to the code is that the procedure showData will display its data in the appropriate textboxes of the form instead of printing them to the Immediate Window.
The same test data can be used here as was used for Part 8.