.jpg)
Content
The purpose of this assignment is to introduce you to the development environment, Microsoft Visual Basic 6.0, that we will be using in this course. After finishing this assignment, you will be able create a simple form and execute a simple program using the system.
Access to Microsoft Visual Basic 6.0
Starting up the MS Visual Studio
Application.
Creating New Project
Workspace
Once you select and open the
Microsoft Visual Basic 6.0, you should see the following “New Project window”
New Project Window.
Initial Look of the MS Visual
Basic 6.0 Environment.
Appearance of MS VB6.0 Environment
1. Form Window
In the middle of the MS
VB window you can see two windows, one called “Project1-Form1(Form)”
and the other “Form 1”.
The latter gray-colored window (“Form 1”) is central to
everything you do in VB. You
can develop a user interface and write VB code in these forms.
2. Toolbox
On the left side is the toolbox to design the form. As you can see, there are several “controls” available for your form design (see the following Figure). For example, the one with sunny landscape in a desert is called “Picture Box”, which can be used to place a picture on the form. Another one with “A” is called “Label”, which can be used to create a label. We don’t cover all the tools in detail here. If you would like to know more about that, see the textbook, Kerman and Brown, p. 33-37. By placing the mouse on each tool, you’ll see a brief title for each tool, (e.g. Label in illustration below).
Toolbox.
If you would like to add a control on the form, you can either (1) double-click a button on the toolbox to place the object at the center of the form in default size, or (2) click a button in the toolbox (be sure to release the left mouse button after selecting your tool), move the cursor to any location on the form, and hold down the left mouse button and stretch out the control, then release it to create the control on the form.
Now, you try. First,
double-click the “command” button
. A command button called “Command1”
will appear in the center of Form1.
Next, click the “label” button and move the cursor to a point on the form.
Go to Form1, left-click the mouse, hold down, drag and release to draw a box within which the
label will appear on the form. You can
move controls using the mouse by dragging and dropping. You can also align the controls from Format\Align
or by using the “form editor” toolbar (View\Toolbars\Form Editor).
Placing Controls.
3. Project Explorer
Project explorer is the window you can see at the top
right corner of the VB window. This window shows the structure
(directory/subdirectory) of the program module (or the “project”). It will be useful once the program structure
gets complicated with multiple forms.
You can open/close the form from this window by double clicking the
subdirectory such as Project1\Form\Form1 (Form 1). If you don’t see this window in your
display, you can obtain it by using View/Project Explorer, or typing Control-R.
4. Properties Window
You can see a Properties Window in the middle of the
right side of the VB window. The Properties Window consists of an “object
box” at the top and “properties list” at the bottom. The object box displays the name of the currently selected object
or control while the “properties list” displays the properties of each control (or
object) on the form. For example,
first, select “label 1” in Form1 by either (1) moving the
cursor onto the control “Label 1” and click once or (2) clicking the down arrow
on the right side of the “object box” to select the “Label1
Label”. Then, change the “caption” property in the property window
to “Are you ready?” And then, you can
see the label on the form also change to “Are you ready?” You can also change other properties such as
alignment, font, and even the color of the object in the property window. The role of each property appears at the
bottom of the property window once you select the name of the property. If you change the selection to “Command1 Command”,
the properties of “Command1” appear in the property window. Let’s change the caption property of “Command1”
to “Yes!”
Changing “Caption” Property.
5. Form Layout Window
The window located in the bottom of the right side is the Form Layout Window. It shows the location of the form when the program is running. If you change the size of the “Form1”, you will see the size of the Form1 change inside the Form Layout Window.
6. Toolbar
Just like in any other Windows application such as Word or Excel, the toolbar represents the primary interface that you will play with in Visual Basic. It gives you quick and one-click access to some of the most common menu items.
1. Source Code
Now that you have seen MS
VB, you should have
realized that we don’t need to write a program to create a user interface.
However, you may have wondered, where is the program??? In VB, the program source code is
hidden somewhere under the user interface. For example, double-click the command
button (“Yes!” or “Command1”) we placed at the center of Form1. You should see the following Code Window
appear.
Source Code Window of the
Command.
This is a VB program. Let’s learn a little bit about the program and the Code Window. The program starts with the line “Private Sub” and ends with “End Sub”. The statement between those two is the main body of the VB program. We see “Command1_Click()” just after the “Private Sub”. This is an "event" that will initiate (start) the program, that is, by clicking on the “Command1” button, the program will run. VB usually requires such events initiated by the user to start programs. This is why VB is called “event-driven” and the flow of the program is controlled by the user. You may also change the initiating “event” from a “Click” event to any other event, such as “Double Click (Dbl Click)”, using the “procedure box” in the upper right-hand corner.
Let’s go back to the program. As an exercise, let’s type the following statement between the “Private
Sub” and “End Sub”
MsgBox$
"Welcome to VB!"
Actually, “MsgBox” is a VB function that creates a message box. We will discuss functions and message boxes in detail later. In this point, let’s just run the program in the following section.
2. Running a Program
Close the code window for “Command1”. And then, either (1) click
on the toolbar, (2)
type F5-key on your keyboard, or (3) select Run\Start
from the menu bar to run the program.
If the program runs correctly, you should see the following window.
Form1 during the Run-time
Mode.
If you click the
button called “Yes!”, you should see the following window:
Result Window.
Just
click “OK” and close the message box.
3. Stop Run-Time Mode
You can either (1) click
on the toolbar, (2)
select Run\End from the menu, or (3) exit the “Form1” form to end
the “run-time mode” and get back to “design mode.” During the “run-time mode”, we cannot
see the toolbox, property window, or the form layout window. Let’s double-click the command button (“Command1”
or “Yes!”) to get to the source code.
Exercise Program (Conversion from Fahrenheit to
Celsius)
We have successfully created and run a VB program to create a text message, so lets create a more useful program, which can covert a temperature from “degrees Fahrenheit” to “degrees Celsius”. Let’s rearrange our form.
1. Form Design
We know how to add and place controls,
right? Let’s add one more label and two
text boxes, and rearrange the position of those controls as follows. Labels are created by clicking on the 
button in the Toolbar, then using the mouse
to draw a box for the label display in Form1.
Text boxes are similarly created by clicking on the 
button in the Toolbar, then using the mouse
to draw a box for the text display (e.g. Text1). You can click on any of these items and resize or relocate them
on your Form1. Edit the Form1 you created earlier, so that
it appears as below.
Form Design (1)
Next,
edit the “Caption” property of the two Labels (Change “Are you ready?”
to “Fahrenheit (degrees F)”; Change “Label2” to “Centigrade (degrees C)”,
change the Command button from “Yes!” to “Convert”, and the title of the form
from “Form1” to “Temperature Converter. You should see the following form.
It is good to leave a reasonable default value for degrees Fahrenheit in
“text1” such as “50” and leave Text2 in the second
Text box blank as it will display the result of your calculation.
Form Design (2)
Now,
we are going to write the code to convert temperatures in degrees Fahrenheit to
degrees Centigrade. To simplify this,
change the “(Name)” property of the “Text1” text box to “txtF”
and the “(Name)” property of the “Text2” text box to “txtC”
for convenience in writing the code.
Change the “(Name)” property of the other
controls (and objects), too. For
example, it is preferable to change “Label1” to “lblF”, “Label2”
to “lblC”, and “Command1” to “cmdConverter.” Actually, the best time to change the (Name)
property and Caption property is just after placing the objects in your
form to avoid messing up the code you’ll create using them.
2. Writing the Code
Now, it’s time to write the code. The first thing you have to do in writing VB source code is to figure out which procedure (or event) would you like the user to perform to start the program (conversion from Fahrenheit to Celsius). In this case, it is obvious that we want the user to click the “Convert” button to do the conversion. So, we have to double-click the “Convert” button and write the code between “Private Sub Command1.Click()” and “End Sub.”
Before writing the code, you
should insert some information and comment about the
program. The information you should
include is “Your Name”, “Title of Program/Assignment”, “Date to be written”, and/or “Due Date
of the Assignment” etc. You may
prefer to add some more information to explain what the program can
do. Anything that is prefaced by a
single quote mark ‘ is considered as a comment and is not part of the executable
program code.
Recommended
Information/Comment in the Source Code
The next thing we have to do is to
figure out the equation required for the conversion from Fahrenheit to
Celsius. As you know,
(Celsius) = ((Fahrenheit) –32) * 5/9 (Eq. 2.1)
The
value in the text box “txtF” is defined as “txtF.Text”, and
similarly, “txtC” is defined as “txtC.Text”. Here, “*.Text” is the extension code
for the “Text” property of each text box (i.e., “txtC” and “txtF”). So, for example, the “Caption”
property of the label called “lblF” is “lblF.Caption”. The “properties and
methods pop-up list box” appears and helps you to complete
the statement once you type “txtF.” Etc.
Properties and Methods Pop-Up List Box
Various
properties and the “properties and methods pop-up list box” will be discussed in
detail later.
So,
let’s go back to the code. The code
should be
txtC.Text = (txtF.Text –32) * 5/9 (Eq. 2.2)
Type
the above code, close the code window, and run the program and make sure it works
correctly. For instance, if you input “50” in the Fahrenheit box, and hit
Convert, the Centigrade temperature should be “10”. Similarly, put in 212 for Fahrenheit and get 100 for Centigrade,
32 for Fahrenheit and get 0 for Centigrade.
You
have created your first computer program for an engineering application!
Results of the Temperature Conversion
3. Compiling and Making “*.exe” Files
In order to run an application outside of the Visual
Basic programming system, it is necessary to compile (or convert) the
application into executable or “*.exe” file. Select File\Make your project name.exe from menu
bar to create “*.exe” file under the directory where you saved your work.
Save the project file and form file under
your subdirectory, and exit the program from either (1) File\Exit (2)
click the x button of the top right corner of the window (as similar to
the other Windows software), or (3) type the Alt-key
and Q-key on your keyboard simultaneously.
Assignment (Make a New Unit Converter Application)
You are now able to draw a simple user interface and write a simple program using Microsoft Visual Basic 6.0. Please create a new application of your own devising that is similar in scope to the one you have just completed, in other words, an application that does a simple calculation to convert information in one set of units to another.
To Be Turned In