DFP4013 Visual Programming

LAB 2: Writing Simple Visual

Applications
Duration : 2 Hours

Learning Outcomes
This Labsheet encompasses of activity 2A,2B, 2C and 2D

By the end of this laboratory session, you should be able to:

• Add a toolbar to a Form
• Create multiple Forms in VB. NET.
• Use suitable Object Controls: Shapes, Textbox, Label, Command Button, List Box,
Combo Box, Option Button, Check Box, Frame, Scroll Box, Frame Controls and
others
• Set the properties of Object Control
• Open the Code Window for that particular object.
• Identify the Event Sequence.
• Write Event Procedures for the object.

Hardware/Software: Visual Studio with latest version

Activity Outcome:

By the end of this lab, students should be able to :

Theory/ Topics

The first thing to note about visual applications is that they are event-driven. This means that
the application appears to do nothing until "something happens" (ie an event occurs) then a
piece of code is executed before the application appears to go back to doing nothing.
Different pieces of code are executed for different events. An event can be something like a
button click, the mouse pointer entering or leaving a control, a key up or down, etc. Thus at
first sight a visual application seems to be a collection of separate little bits of code.
 DFP4013 Visual Programming

Activity 2A
Activity Outcome: Creating an interface to add two numbers.

Building the Adder Example Program

Procedure :

Step 1 - Design the User Interface

Start a new Visual Basic .NET project in the

manner described in the previous lab. Design a
form with three TextBoxes, a Button, and a Label
that looks like that shown. This will be the user
interface for a simple adder, ie the sum of the values in the two leftmost TextBoxes will be
put into the rightmost TextBox whenever the Button is clicked.

Step 2 - Name the All the Controls Control Prefix

ComboBox cb
This is still a very small application, nevertheless it CommonDialog cdc
has three TextBoxes. The default names for these CheckBox chk
TextBoxes are TextBox1, TextBox2, and TextBox3. CommandButton cmd, btn
Which one is which depends on the order in which DriveListBox drv
the TextBoxes were placed on the form. Which DirListBox dir
TextBox contains the sum? You should see that for FileListBox fil
larger applications we are going to get into a serious FlexGrid flx
mess. The solution to this is to rename all the Frame grp
controls meaningfully.
Image img
ImageList imgl
A meaningful name for a control should indicate what
Label lbl
kind of control it is and what it does. The convention
ListBox lst
is to use a prefix to specify the type of control, so a
ListView lv
meaningful name for the first TextBox would be
MaskedEdit msk
txtFirst. Note the capitalisation of the initial letter of
MainMenu mnu
the internal word First, this is the convention in Visual
Basic to make names easier to read in the absence PictureBox pb
of spaces which are not allowed (similar to Pascal). ProgressMeter prg
Here the prefix txt stands for "TextBox". A list of the RadioButton rdb
prefixes conventionally used for the standard controls StatusBar sbr
is shown. Thus name the TextBoxes txtFirst, ScrollBar scr
txtSecond, and txtSum, and the button cmdAdd. Timer tim
The Label control will not be referred to in code so Toolbar tlb
can keep its default name. TreeView tv
TextBox txt
Note that the renaming of controls has to be done before any event handlers are written for
them.
 DFP4013 Visual Programming

Step 3 - Write the Event Handler

This is a very simple application. The only time we want anything to happen is when the
button is clicked. In other words - the only event that needs to be handled is the button click.
Thus all the code for this application will be in the button click event handler.

Double click on the button to open its click event handler as shown:

Try entering this single line of code inside the event handler:

Run the application and try it out with a simple sum (use integer values). Do you get the
expected answer? What you actually get is:

It's actually concatenating the two numbers rather than adding them! The "+" operator is
overloaded, ie it does different things depending on the types of its operands (the operands
of the "+" operator are the values that come before and after it). If the operands are of any
arithmetic type then the "+" operator will perform an addition on them. However if the
operands are strings (the .Text property is a string) it performs a concatenation. Note the
concatenation operator is "&" but "+" works as well. It's probably best to use "&" to show
explicitly that you mean concatenate rather than add. This may help when doing code
maintenance.

So how do we make the application ADD the two numbers? Replace the line of code from
above with the three below:

Dim intFirst As Integer = txtFirst.Text

Dim intSecond As Integer = txtSecond.Text
txtSum.Text = intFirst + intSecond

In line 1 a local variable of type Integer is declared and initialised with the value of the Text
property of the first TextBox. The Text property is a string but is automatically converted to a
integer on the assignement.

Similarly in line 2 for the second TextBox.

 DFP4013 Visual Programming

Line 3 uses the "+" operator with two integer parameters hence it performs an add. The sum
is then assigned to the Text property of the sum TextBox. The sum is automatically
converted from an integer to a string on the assignment. The following shows this working:

The code we have just written isn't idiot-proof. It assumes the user will enter integer values
into the first two TextBoxes (a big assumption); what if she doesn't?

User Enters Floating Point

Numbers:

When the two strings are converted to

integers they are rounded, so the sum
is 3 + 6 which gives 9.

User Enters Non-Numeric Text:

The non-numeric text "two" cannot be

automatically converted to an integer.
When an attempt to do so is made in
the code a run-time error occurs. The
dialog shown appears with information
that is useful to you the programmer.

However this information will mean

nothing to an average user: they will
just be very annoyed that the
application that they were using has
just crashed.

We will do more on run-time errors in

later weeks!

Prefix Data Type

ar Array
by Byte
cur Currency
dbl Double
dec Decimal
dt Date
fl Boolean
 DFP4013 Visual Programming

You will often see a naming convention for variables where int Integer
a type specific prefix is put on the variable name. In the lng long
above example the local variables were integers so the obj Object
prefix "int" was added to indicate this. Beware, using such sng Single
a prefix is for documentation only and doesn't affect the str String
type of a variable. A list of the common prefix's used is var Variant
shown. This convention is less rigorously applied than that
for the names of controls.

Activity 2B
Activity Outcome: Creating an interface to calculate the circumference and area of a circle

Building the Circle Example Program

Procedure :

Step 1 - Design the User Interface

Start a new Visual Basic .NET project in the manner

described in the previous lab. Design a form similar to
that shown. Give the TextBoxes the meaningful names:
txtRadius, txtCircum, txtArea, and give the button the
name: cmdCalculate.

Step 2 - Define a Constant

Use View | Code to bring up the code view and define

a symbolic constant for pi:

Step 3 - Code the Button Click Event Handler

Some very simple code for the button click event handler is shown:

This will result in the user interface looking like:

 DFP4013 Visual Programming

The first line takes the (hopefully) numeric string in the radius TextBox and automatically
converts it to the floating-point type double. The next two lines do the calculations for the
circumference and the area respectively. In both these lines a value of type double is
automatically converted to a string and displayed in the TextBoxes. The answers shown are
correct but are shown to too many decimal places to be easily read. You will see how to
format a string to a specific number of decimal places when we look at the String class in
detail.

Sequence of Statements

Within a piece of code (eg an event handler) the individual statements are normally
executed in the order that they are listed. This is the default flow of control within a program.
To change this there are also "control structures" for decision (selection) and for repetition
(iteration). These are special statements that alter the flow of control. We will look at these in
detail in the following two labs. This next example shows how the sequence of statements is
important.
 DFP4013 Visual Programming

Activity 2C
Activity Outcome: Creating an interface to enter a sum of money and the minimum
combination of coins to make up the sum is calculated.

Change Machine Example

Here's a simple application where the user enters a sum of money and the minimum
combination of coins to make up the sum is calculated:

Procedure :

Start a new project and design the user interface, naming the button cmdCoins, the TextBox
txtIn, and the labels lbl1 through to lbl100.

All the code for this application is in the Button Click event handler (line numbers have been
added to aid the description that follows, these are not part of the code):

01 Dim intChange As Integer = txtIn.Text * 100

02 lbl100.Text = "pound coins = " & intChange \ 100
03 intChange = intChange Mod 100
04 lbl50.Text = "50p coins = " & intChange \ 50
05 intChange = intChange Mod 50
06 lbl20.Text = "20p coins = " & intChange \ 20
07 intChange = intChange Mod 20
08 lbl10.Text = "10p coins = " & intChange \ 10
09 intChange = intChange Mod 10
10 lbl5.Text = "5p coins = " & intChange \ 5
11 intChange = intChange Mod 5
12 lbl2.Text = "2p coins = " & intChange \ 2
13 intChange = intChange Mod 2
14 lbl1.Text = "1p coins = " & intChange

Line 1 declares a local variable of Integer type and initialises it to the value in the TextBox
multiplied by 100. The value in the TextBox is a string which is automatically converted to a
floating-point value (assuming the user enters a number with a decimal point), multiplied by
100, then rounded to the nearest integer when assigned to intChange. Thus at this point the
variable intChange contains the number of pence to be given out as coins.
 DFP4013 Visual Programming

The task now is to work out the minimum combination of coins to give out this change. The
strategy to do this is to divide the change by the value of the highest available coin, then
what remains by the next highest, then the next, and so on.

Line 2 does an integer division of the change by 100 (the highest available coin). This will
yield the number of £1 coins to be given out. This value is written to the appropriate label
concatenated with some explanatory text.

Line 3 works out how much change is outstanding after the £1 coins have been given out. It
does that using the Mod operator which returns the remainder of an integer division.

Lines 4 & 5 work in a similar way to lines 2 & 3 but for 50p coins. Similarly for the rest of the
code. Note that the value in intChange goes down as the numbers of coins of each value are
given out. The important thing to note about this piece of code is that the order of the
statements matters!

Do a "paper and pencil" execution of this code. Choose a value for the user to enter
(something other than £3.46). Go through the code above pencilling in the value of the
variable change as each statement is executed in sequence.

Put the code above in the button click event handler and check that the values you worked
out above are calculated correctly. This isn't the only way of implementing a change
machine application; most applications can be done in many different ways.
 DFP4013 Visual Programming

Activity 2D
Activity Outcome: Creating an interface and apply the usage of tooltips.

Improving Usability using ToolTips

Procedure :

Tooltips are a feature of some Windows applications (eg Visual Studio .NET) where a little
bit of text ( ie the Tooltip) is displayed when the mouse pointer hovers over something
significant. In our VB .NET applications we have the facility to create ToolTips for when the
mouse pointer hovers over a control. Take the Change Machine application as an example:

To create ToolTips for many controls on a form we need just one ToolTip
control (find it in the Toolbox). The ToolTip control is non-visual (ie can't be
seen at run-time), so place it anywhere on the form and it will appear at the
bottom of the form designer.

Like any other control, ToolTips should be given a meaningful

identifier. The ToolTip control has properties that can be
changed in its Properties window. Apart from the name, the
default values are usually OK (mostly they relate to the timings
of the text display), see the Help system for details.

The text that is to appear in the tooltip goes in a new property

of the original control; this property appears after the ToolTip
control has been added to the form. In this example you will
now see a property called ToolTip on ttpCoins in the properties
pane of the TextBox control.

After seeing the tooltip work, check out the effect of changing
the IsBalloon property on the ttpCoins to True.