LESSON 5
Visual Basic
Output, Format & Calculations
Visual Basic is used to provide solutions for the needs of home, business industry and the scientific
community. It is used to interact and control commonly used applications such as Microsoft Access, Excel,
and Word. Before you start writing programs in Visual Basic, you need to familiarize yourself with its
interface and the tools.
MENU BAR AND TOOLBAR
The Menu Bar and Toolbar include buttons for many of the most common commands used in Visual Basic,
such as Open Project, Run program, and Stop program. It also contains buttons that display the Properties
window, the toolbox, and other elements in the Visual Basic development environment.
PROJECT WINDOW
The Project Window lists the collection of files used to build a
program. The collection of files is called a project. Using the Project
Window you can choose to view the code or the object which is
highlighted in the window. The property window is usually found
below the window. The properties of the object highlighted in the
window and the contents in the object are shown. For example if a
form is highlighted, its properties are shown (as seen to the right) but
if a textbox in the form is clicked its properties are shown.
TOOLBOX
The toolbox allows you to build your screen interface for your
program. Using the toolbar, you can add pictures, buttons, words
and different types of objects that display information.
Now open the VB program and click OK when the “New Project”
window pops up. Find the toolbox. (If it is not visible, go to the
toolbar and click on the View menu and select Toolbox.) Practice
bringing objects (such as the label Box and type your name in the
caption property) onto the form by clicking on the button on the
toolbox, and then clicking and dragging on the form. As you can see,
the objects can be made to be any size you wish. The objects will be
discussed in more detail in the Objects section. It is not necessary to
save this activity.
FORM
The form is the basis of your program. All labels, textboxes,
command buttons and such, are placed on it. When the program is
running, the form is the Primary operation. It has a Visual Basic
name, as well as a filename and a caption.
DPCDSB
Computer Science TIK2O1
Page - 1 -
LESSON 5
Visual Basic
Output, Format & Calculations
VB Name-usually begins with the prefix “frm” (which stands for “form”), and is used in within the program.
Filename – the name that you give to the form when you save it.
Caption – the text that is shown at the top of the form; it helps to clarify the content of the form.
The caption and Visual Basic name of the form can be changed when the program is not running. To
change the name of the form, click on the form and go to the property box. Click on Name and type
“frmVBName.” In order to change the caption, you must scroll down in the property box until you reach
Caption. Click on this and type “This is where the caption goes" Note that this now shows up in the Project
Window, in place of Form1.
The form also has a general declarations section. If you double-click on the form, it will come up on the
screen in a separate window. This is the area where information that must be available to more than one
object are placed (for example: Variables & Constants).
OBJECTS IN VISUAL BASIC
COMMAND BUTTONS
Command buttons determine when the user wants to do something; such as exit the application. Mostly you
will perform these tasks to add a command button to an application:
1) Locate and size the command button on the form.
2) Change the command button's Name and Caption properties.
3) Add code to the command button's Click event procedure.
The command button control supports many properties, you will normally only set the Name and Caption
properties. The command button supports many events, but we will focus on the Click event. A command
button resides on most forms just so the user can click the button to execute lines of code.
DPCDSB
Computer Science TIK2O1
Page - 2 -
LESSON 5
Visual Basic
Output, Format & Calculations
Setting the Caption property often requires that you change the font property the text size and style on the
caption. You might want to align the caption text (center, left-justify or right-justify). To do this, change the
Alignment property.
LABELS
Labels hold the primary text that appears on a form. Often, programmers use labels to place titles around the
form and to label text boxes so users know what to type into the text box. Visual Basic supports several other
ways to put text on forms, but when you use the Label control, your code can subsequently, at runtime,
change the label's text / data, so that different output can appear.
USING THE LABEL
1) Locate the label on the form and resize it as needed.
2) Name the label using the “lbl” prefix. Change its caption, as you desire.
3) The Autosize property determines whether the size of the label changes automatically to
accommodate your caption (TRUE) or remains the same size regardless of your caption (FALSE).
Suppose that you design a label that contains this long caption:
This is a Visual Basic tutorial, which will help you become familiar with its environment and help
develop program code.
A label is rarely wide enough or tall enough to hold a caption this long. Thus, you can use the Autosize
property to force the label to automatically expand.
TEXT BOXES
Text boxes accept user input and simple for your users to use. Its tool is found on the right hand side of the
toolbox, near the top. The user uses this control simply by clicking on it, or by setting focus to it using the tab
key, and typing the text.
USING THE TEXT BOX
1) The text box is brought onto the form and sized.
2) The name of the text box is changed to a meaningful name with the prefix “txt”
3) Clear its Text property.
In order to “collect” the value entered into the text box; you must refer to the text property using the
txtname.text
PICTURE BOX
The picture box is often confused with the image box. The picture box is located near the top right corner of
the toolbox, and is used to place graphics into your computer. The types of files that can be imported into a
picture box are bitmaps, icons and metafiles. In a picture box, the image cannot be resized to fit into the box.
Shapes and lines can be drawn in a picture box.
USING THE PICTURE BOX
1) Bring the picture box onto the form and click on it.
2) Go to the property box and select the name property. Give the picture box a name that begins with
the prefix “pic”.
3) Select the Picture property. Go to the path of the picture you want, and select the picture. OR…
Click on the tool you wish to use for drawing in the box.
NOTE: The picture does not stretch to fill the box
DPCDSB
Computer Science TIK2O1
Page - 3 -
LESSON 5
Visual Basic
Output, Format & Calculations
IMAGE BOX
The image box is very similar to the picture box. Its tool is found near the bottom left corner of the toolbox.
You can import the same types of files into an image box as you can with a picture box. The difference is
that when you bring other controls or draw shapes or lines within the borders of the image box, they will not
become a part of the image. As well, when the Stretch property of the image box is set to “true,” the
imported picture will fill the box. Essentially, the image box is used for holding graphics.
USING THE IMAGE BOX
1) Bring the image box onto the form and select it.
2) Go to the property box and select the name property. Give the image box a name that begins with
the prefix “img”.
3) Select the Picture property. Go to the location of the picture file that you wish to use, and select the
picture file.
4) To fill the whole image box, set the Stretch property to “true”.
DPCDSB
Computer Science TIK2O1
Page - 4 -
LESSON 5
Visual Basic
Output, Format & Calculations
Assignment:
CREATE THE W EATHER FORECAST
PROGRAM
1) Using the Tool Bar create the
given form:
8 Command Buttons,
1 Image, and
1 Label Box
.
2) Click on each item
on the form and
name them so that
we will can refer to cmdShowRain
them in the
program code.
3) The weather
forecast label does
not have to be
named since we
will not refer to it.
cmdShowCloud
cmdShowSun
cmdShowSnow
imgWeather
cmdShowLighting
cmdIncrease
cmdStopProgram
DPCDSB
Computer Science TIK2O1
cmdDecrease
Page - 5 -
LESSON 5
Visual Basic
Output, Format & Calculations
4) Double Click on the First Command Button (Caption = Rain) and enter the following line of Code,
Between the lines Private Sub and End Sub:
imgWeather.Picture=LoadPicture("c:/Program Files/Microsoft Visual Studio/Common/Graphics/Icons/Elements/Rain.ico")
5) This will cause the program to load the file Rain.ico from the specific path from the hard drive. You will
have to ask your teacher the specific path for your system. All program files are not always loaded in the
same location (locally on your hard drive or on the fileserver), in the same path, or you may even have a
different version of Visual Basic and the specific picture (icons) are not even available.
6) Now use copy and paste (Highlight the desired text and Right Click) put the imgWeather.Picture =
LoadPicture(…) code in every Private Sub Show_ Click().
7) You are not to type the Private Sub … and End Sub text. That text will be there when you double click
on the Command button. You will have to edit the Rain.ico to the correct image name(s), you should not
have to edit the path. See the Code below:
Private Sub cmdShowRain_Click()
imgWeather.Picture=LoadPicture("h:/041-333-123/Rain.ico")
End Sub
Private Sub cmdShowCloud_Click()
imgWeather.Picture=LoadPicture("h:/041-333-123/Cloud.ico")
End Sub
Private Sub cmdShowSun_Click()
imgWeather.Picture=LoadPicture("h:/041-333-123/Sun.ico")
End Sub
Private Sub cmdShowLighting_Click()
imgWeather.Picture=LoadPicture("h:/041-333-123/Litening.ico")
End Sub
Private Sub cmdShowSnow_Click()
imgWeather.Picture=LoadPicture("h:/041-333-123/Snow.ico")
End Sub
8)Double click on the Exit Button and type end. The end command will stop the execution of the program
and return you to the form and program code. Note that the Caption EXIT has the X underlined. You
can have your X underlined by typing E&XIT in the caption (under properties). This feature will allow
you to Press ALT and the letter underlined to execute the line(s) of code instead of Clicking the mouse.
This feature can come in handy when the mouse does not respond. You are still able to end the
program without turning your computer off.
Private Sub cmdStopProgram_Click()
End
End Sub
9)Double click on the Increase and then Decrease Button.
Type the following code:
DPCDSB
Computer Science TIK2O1
Page - 6 -
LESSON 5
Private Sub cmdIncrease_Click()
imgWeather.Height = 2000
imgWeather.Width = 2000
End Sub
Visual Basic
Output, Format & Calculations
Private Sub cmdDecrease_Click()
imgWeather.Height = 300
imgWeather.Width = 300
End Sub
10)Right Click on the image picture and change the Stretch property to
True. This will allow the Image to stretch (increase or decrease in
size). Your increase and decrease button will not work correctly until
stretch property is set to True.
11)Double-check the code of the program. Spelling / typos errors will
cause the program not to run. Click on the Run button
the Program will execute.
If the EXIT button does not work simply click on the END button
DPCDSB
Computer Science TIK2O1
Page - 7 -
LESSON 5
Visual Basic
Output, Format & Calculations
Assignment:
Create the DONUT Program
Note
1) The two empty
label boxes must
be named
lblOneDozen &
lblTwoDozen.
2) Use the Caption
given on the form
for the three other
label boxes, not
named
Double click on the "Quit" Command Box and type end. Do not type the Private Sub & End Sub lines, they
should appear when you double click.
Private Sub cmdQuit_Click()
End
End Sub
Double click on the "Display" Command Box and type
Private Sub cmdDisplay_Click()
' Author: Your Full Name
' Date:
Today's Date
' Course: TIK2O1
' Program: Displays the cost of One & Two Dozen Donuts when each donut costs $0.75
lblOneDozen = 12 * 0.75
lblTwoDozen = 24 * 0.75
End Sub
The result (Output) can look better if the format were to be used. There are two basic format types: currency
and ####.##. Try editing the output lines to include the calculations in a currency format.
'Currency is $ plus 2 decimal places
lblOneDozen = Format(12 * 0.75, "currency")
lblTwoDozen = Format(24 * 0.75, "currency")
Now replace the words currency with ###.##. This format would allow for 2 decimal places and an amount
no larger than 999.99. The currency format allowed for the Dollar sign to be displayed.
DPCDSB
Computer Science TIK2O1
Page - 8 -
LESSON 5
Visual Basic
Programming Rubric
/28
Output, Format & Calculations
Name:
Criteria
Understanding
logic and syntax
errors
TF3.05K
1
Limited success in
explaining the
difference between
logic and syntax
errors.
2
Some success in
explaining the
difference between
logic and syntax
errors.
Writing
arithmetic
expressions
TF3.03K
Demonstrates
limited ability to
define and write
arithmetical
expressions
Demonstrates some
ability to define and
write arithmetical
expressions
Determining
order of
operations
TF3.03K
Demonstrates
limited ability to
determine the order
in which the
operations are
performed;
Demonstrates
limited ability to write
numbers and
characters in such a
way that computers
recognize them
Demonstrates some
ability to determine
the order in which
the operations are
performed;
Internal
documentation
SP3.09K
Demonstrates
limited ability to
incorporate internal
documentation to a
specific set of
standards
Demonstrates some
ability to incorporate
internal
documentation to a
specific set of
standards
Problem solving
SP1.05K
Demonstrates
limited ability to
solve problems with
various tools.
Demonstrates some
ability to solve
problems with
various tools.
Outputting
according to
program design
SPV.04K
SP3.04K
Demonstrates
limited ability to write
output statements
that conform to
program design.
Demonstrates some
ability to write output
statements that
conform to program
design.
Outputting
numbers and
characters
SP3.01K
DPCDSB
Demonstrates some
ability to write
numbers and
characters in such a
way that computers
recognize them
3
Considerable
success in
explaining the
difference between
logic and syntax
errors.
Demonstrates
considerable ability
to define and write
arithmetical
expressions
4
High degree of
success in
explaining the
difference between
logic and syntax
errors.
Demonstrates strong
ability to define and
write arithmetical
expressions
Demonstrates
considerable ability
to determine the
order in which the
operations are
performed;
Demonstrates
considerable ability
to write numbers
and characters in
such a way that
computers recognize
them.
Demonstrates
considerable ability
to incorporate
internal
documentation to a
specific set of
standards
Demonstrates
considerable ability
to solve problems
with various tools.
Demonstrate
extensive ability to
determine the order
in which the
operations are
performed;
Demonstrates strong
ability to write
numbers and
characters in such a
way that computers
recognize them
Demonstrates
considerable ability
to write output
statements that
conform to program
design.
Demonstrates strong
ability to write output
statements that
conform to program
design.
Computer Science TIK2O1
Demonstrates strong
ability to incorporate
internal
documentation to a
specific set of
standards
Demonstrates strong
ability to solve
problems with
various tools.
Page - 9 -