Introduction to Visual Basic .NET
A version of the Hello World program
in Visual Basic .NET
CIS 530 (Blum)
1
Objective
• Our main objective is to become familiar
with the VB .NET Integrated Development
Environment (IDE or environment for short)
• To accomplish this task, let us design an
interface and write the associated program
that has the user enter his or her name, then
click a button and view a message
welcoming him or her.
CIS 530 (Blum)
2
Start/Programs/Microsoft Visual Studio
.NET/Microsoft Visual Studio .NET
CIS 530 (Blum)
3
After a splash screen, one sees the Start
Page. Click the New Project button
CIS 530 (Blum)
4
New Project Dialog Box: Choose Visual
Basic as the Project Type
CIS 530 (Blum)
5
New Project Dialog Box: Choose
Windows Application as the Template
CIS 530 (Blum)
6
New Project Dialog Box: Give your
project a name
CIS 530 (Blum)
7
New Project Dialog Box: Click Browse
to choose a location for your project
CIS 530 (Blum)
8
Project Location Dialog Box: Use the Look
in: drop-down box to select a folder
CIS 530 (Blum)
9
Project Location Dialog Box: Use the
Create New Folder button (if you want)
CIS 530 (Blum)
10
New Folder Dialog Box: Enter the name
of the new folder, then click OK
CIS 530 (Blum)
11
Project Location Dialog Box: Click Open
CIS 530 (Blum)
12
New Project Dialog Box: Click OK
CIS 530 (Blum)
13
HelloWorld: Form1.vb (Design)
CIS 530 (Blum)
14
Click the Save All button to see what we
have so far
CIS 530 (Blum)
15
Windows Explorer
Folder we made
Folder Visual Studio made
CIS 530 (Blum)
16
What is a form?
• A simple answer is that it’s a window – a surface
upon which we will build a graphical user
interface (GUI).
• A more complex answer is that there are a number
of things called forms
– A Form base class – all of the generic code for a
window provided by Visual Studio
– A specific, programmer-designed class Form1 – the
programmer adds specific features for the particular
project
– A form object – an instantiation of the above
CIS 530 (Blum)
17
“Form1” in four places
• “Form1” appears in four places
– It is the name of the class we are making
– Form1.vb is the name of the file containing the
code for the class
– “Form1” is the default value of the text
property, which corresponds to what is written
at the top of the window
– It is the start-up object
CIS 530 (Blum)
18
Change the name of the class: click on
the form then find the (Name) property
in the Properties Window
Properties
Window
(Name) property
CIS 530 (Blum)
19
Next change the name of the startup object
• If you change the name of the class, you
must change the name of the startup object.
• The startup object is a property of the
project that tells it where to start.
– The only other option we would have for the
startup object at this time is Sub Main
CIS 530 (Blum)
20
Right click on the project (one level
down) found in the Solution Explorer
and choose Properties
CIS 530 (Blum)
21
On the HelloWorld Property Pages, use
the drop-down list to choose FrmHello
as the Startup object and click OK
CIS 530 (Blum)
22
Return to the Properties Window, find
the Text property and change it
CIS 530 (Blum)
23
One can list the properties by category or
alphabetically
Click here to alphabetize
CIS 530 (Blum)
24
Categorizing the properties
Click here to categorize
CIS 530 (Blum)
25
Right click on the file in the Solution
Explorer and choose Rename
CIS 530 (Blum)
26
It’s traditional (though in VB not strictly
necessary) to give the file and the class the
same name
CIS 530 (Blum)
27
Change the BackColor property of
FrmHello
• Click in the box to the right of BackColor in
the Properties Window
• A drop-down arrow will appear
• Use the tab to select the palette from which
you can choose the color
CIS 530 (Blum)
28
Palettes
CIS 530 (Blum)
29
FrmHello after BackColor chosen
CIS 530 (Blum)
30
Customize the form with some controls
• A control is an object (typically visible) that
one places on a form to facilitate interaction
with a user. It may be
–
–
–
–
A label to display a message
A textbox for the user to enter text
A button for a user to click
Etc.
• The standard controls are in the toolbox.
CIS 530 (Blum)
31
Place the mouse over the hammer and
wrench icon on the left.
CIS 530 (Blum)
32
Click on the tack icon at the top of the
toolbox
CIS 530 (Blum)
33
Click on the label button on the toolbox, it will
appear depressed. Move the cursor over to the
form it will appear as a crosshairs and a letter A
CIS 530 (Blum)
34
Place the crosshairs where you want the upper lefthand corner of the label, drag across to where you
want the lower right-hand corner and release.
Upper left:
begin drag
here
Lower right:
end drag here
CIS 530 (Blum)
35
Click on the plus sign to the left of the label’s
Font property. Make sure Label1 appears in
the drop-down box of the Properties Window
CIS 530 (Blum)
36
This shows all of the individual
properties related to the label’s font.
CIS 530 (Blum)
37
Change the Font Size to 28.
CIS 530 (Blum)
38
Use the drop-down list to make the Font
Bold property True.
CIS 530 (Blum)
39
Use the drop-down list to select the alignment of the
text, choose MiddleCenter (vertical/horizontal) by
clicking on the square
CIS 530 (Blum)
40
Result of Label Text Alignment
CIS 530 (Blum)
41
Change the label’s text property to
“Welcome”
CIS 530 (Blum)
42
Change the (Name) property of the label
to lblWelcome.
CIS 530 (Blum)
43
Hungarian notation
• The naming of the form as FrmHello and
the label as lblWelcome follow a naming
convention known as Hungarian notation.
• Hungarian notation consists of a standard
(three-letter) prefix that identifies the type
of object followed by a name that starts
with a capital letter and has some meaning
within the project.
CIS 530 (Blum)
44
Search for list of Hungarian notation
prefixes
CIS 530 (Blum)
45
Choose link concerned with VB
CIS 530 (Blum)
46
Hungarian notation (this reference is for
version 6.0, but most of the prefixes are
still useful)
CIS 530 (Blum)
47
Add a second label, lblName, that prompts
the user to enter his or her name
CIS 530 (Blum)
48
Add a textbox, click on the Textbox button on
the toolbox, use the crosshairs icon to drag the
textbox into the desired location
CIS 530 (Blum)
49
Name the textbox, txtName
CIS 530 (Blum)
50
Clear out the text of the textbox.
CIS 530 (Blum)
51
Add a button: click the Button button and use
the crosshairs to position the button on the
form
CIS 530 (Blum)
52
One change in Hungarian from VB 6.0 to VB
.NET is the prefix for buttons from cmd (for
CommandButton) to btn (for Button)
CIS 530 (Blum)
53
Name the button btnOK
CIS 530 (Blum)
54
Change the Text property to “OK”
CIS 530 (Blum)
55
Change the font size property to 12 and
the font bold property to True
CIS 530 (Blum)
56
Add another label
CIS 530 (Blum)
57
New label directions
•
•
•
•
•
Set the label (Name) property to lblMessage.
Set the Font Size property to 24.
Set the Font Bold property to True.
Set the TextAlign property to MiddleCenter.
Clear out the Text property.
CIS 530 (Blum)
58
Result of setting label properties
CIS 530 (Blum)
59
Design time versus Run time
• Thus far we have just set various properties in
design time (while the programmer constructs the
interface).
• In order for something to happen in response to
the user’s action, some property or properties must
be change in run time (while the user executes the
program).
• The user’s action, in this case a click, is an
example of an event.
CIS 530 (Blum)
60
Events
• Events can be raised
– In response to the users action
• Mouse events (clicking)
• Keyboard events (pressing a key)
– By an object belonging to the program
• A timer raises events periodically
– By the system
• Various errors (overflow, can’t find a file, etc.)
CIS 530 (Blum)
61
Event-driven programming
• When the order in which code is executed is
determined to a large extent by the events
that occur, such programming is said to be
event driven.
• The design of graphical user interfaces
(GUIs) is generally event-driven
programming.
CIS 530 (Blum)
62
The Click Event
• Thus far code has been generated by the
environment, but we have not written any
ourselves.
• In order for something specific to happen
when the user clicks the button, we must
write the code for the button’s click
method, a set of statements that the system
executes when the button is clicked.
CIS 530 (Blum)
63
Going over to code Method 1: Go to the
View/Code menu item
CIS 530 (Blum)
64
Going over to code Method 2: Click on
the View Code button
CIS 530 (Blum)
65
FrmHello Code
CIS 530 (Blum)
66
To obtain the button’s click event, first
choose btnOK from the Class Name dropdown list
CIS 530 (Blum)
67
Next choose the Click method from the
Method Name drop-down list.
CIS 530 (Blum)
68
These actions provide the programmer with a
template in which to enter code
CIS 530 (Blum)
69
Right-hand side of method’s first line
CIS 530 (Blum)
70
Leave it be
• We will not explain at this stage what all of
these words mean.
• For now we live by the motto that what the
environment provides is usually correct and
we will not attempt to alter it.
CIS 530 (Blum)
71
Going over to code Method 3: Double
click on the button in design view
CIS 530 (Blum)
72
Doubling clicking the button moves one to Code
View and generates the btnOK’s Click method shell
CIS 530 (Blum)
73
What should happen
• When the user clicks the OK button, we would
like the text property of the Message label to
change from an empty string to say “Hello ”
followed by the name the user entered in the
Name textbox.
• The “when” is handled by our choice of the
btnOK_Click method, it is called and executed
when the user clicks the OK button.
CIS 530 (Blum)
74
Type the name of the object whose properties we
want to change and then a “dot” immediately after
CIS 530 (Blum)
75
Two points
• One can type “lblmessage” even though the
name of the label is “lblMessage”
– VB is not case sensitive
• After typing the dot, a drop-down list of the
labels properties and methods appears.
– We can chose the desired property (Text) from
the list
– If we misspelled the name, we would get no list
CIS 530 (Blum)
76
Enter the line of code
CIS 530 (Blum)
77
lblMessage.Text = "Hello " & txtName.Text
• The line above is called a statement, a unit
of code
• In particular, it is an assignment statement.
The equal sign breaks it into two pieces.
– The expression to the right is evaluated.
– The quantity on the left (in this case the Text
property of lblMessage) is then set equal to
(assigned) the value found on the right
CIS 530 (Blum)
78
lblMessage.Text = "Hello " & txtName.Text
• The ampersand (&) on the right denotes the
string concatenation operation.
• A sequence of characters is known as a
string.
• Concatenation creates a longer string by
placing the second immediately after the
first
– “Hello ” & “Kitty” gives “Hello Kitty”
CIS 530 (Blum)
79
lblMessage.Text = "Hello " & txtName.Text
• The first string in the above concatenation is
spelled out by the programmer (“literally”)
and is known as a literal string.
• The second string in the above
concatenation is a string-valued property of
the label.
• Another possibility (not seen above) would
be to have a string-valued variable.
CIS 530 (Blum)
80
Preparing to run the program: on the
menu choose Build/Build Solution
CIS 530 (Blum)
81
Note the appearance of the Output window
where we are informed of our success or failure
to build a solution
CIS 530 (Blum)
82
Running the program: Choose Debug/Start
Without Debugging from the menu
CIS 530 (Blum)
83
Program running
First starts.
CIS 530 (Blum)
User enters name.
84
Program running
User clicks OK.
CIS 530 (Blum)
Nothing to do with the program.
85
Closing (stopping) the program
Nothing to do with program
CIS 530 (Blum)
86