CS211 Programming I Visual Basic 2008 Introduction to Visual Basic

CS211 Programming I
Visual Basic 2008
• Language used to create Windows
applications.
• Provides a Graphical User Interface or
GUI.
• The sequence of instructions executed in
the program is controlled by events.
Introduction to Visual Basic
Lab 1
Jan 13 2009
Ching-Hua Chuan
Slides provided by Schneider, modified by Chuan
1
2
How to Develop a Visual
Basic Application
Sample Input Screen
• Design the Interface for the user.
• Determine which events the controls on the
window should recognize.
• Write the event procedures for those events.
3
4
Interface
- Visual Basic Controls
•
•
•
•
•
•
•
•
Start Visual Basic
Invoking Visual Basic
Text Box Control
Button Control
Label Control
List Box Control
Name Property
Help / Fonts / Auto Hide
Positioning and Aligning Controls
•
•
•
•
Start -> Visual Studio -> Visual Basic
Start a new project
Select Windows Forms Application
Name the project
5
Initial Visual Basic Screen
6
Renaming the Form
• Initial name is Form1
• The Solution Explorer window lists a file
named Form1.vb.
• To rename the form, change the name of
this file to newName.vb
• newName should begin with prefix frm.
7
8
Four Controls at Design Time
Toolbox
Button
Text box
Label
ListBox
To select a control, click on it. Sizing handles
will appear when a control is selected.
TextBox
9
Text Box Control
10
Properties Window
Selected
control
• Used for input and output
• When used for output, ReadOnly
property is set to True
Tasks button
Properties
Settings
Sizing handles
11
12
Some Often Used Properties
•
•
•
•
•
•
•
Setting Properties
Text
Autosize
Font.Name
Font.Size
ForeColor
BackColor
ReadOnly
• Click on property name in left column.
• Enter its setting into right column by
typing or selecting from options
displayed via a button or ellipses.
13
Button Control
14
Add an "access key"
• The caption on the button should indicate
the effect of clicking on the button.
• Text property determines caption.
15
16
Label Control
List Box Control
• Used to identify the contents of a text box.
• Text property specifies caption.
• By default, label automatically resizes to
accommodate caption on one line.
• When the AutoSize property is set to False,
label can be resized manually. Used primarily
to obtain a multi-rowed label.
• Initially used to display several pieces of
output.
• In Chapter 9 used to select from a list.
17
18
Positioning and Alignment
Controls
Exercise 1: Implement the Design
Proximity
line
1. New a project named
Lab1-1
2. Rename the form as
frmLab1-1
Snap line
3. Put controls as shown
on the left
19
20
The Name Property
Control Name Prefixes
• Used by the programmer to refer to a control in
code
• Setting for Name property near top of
Properties window.
• Name must begin with a letter, be less than
215 characters long, and may include numbers
and letters.
• Use appropriate 3- or 4-character naming
prefix
Control
Prefix
Example
button
btn
btnCompute
label
lbl
lblAddress
text box
txt
txtAddress
list box
lst
lstOutput
21
Exercise 1: Name the Controls
22
Save and Run a Program
• Save the project.
• In the Solution Explorer double-click on the
file with extension .vb. (The Form Designer
will appear.)
• Press F5 to run the program. (Debugging)
txtFirst
txtSecond
btnRed
23
24
How to Develop a Visual
Basic Application
Tab Order
• Design the Interface for the user.
• Determine which events the controls on the
window should recognize.
• Write the event procedures for those events.
Tab index
The tab indices determine the order in which
controls receive the focus during tabbing.
25
Event
26
Examples of Events
• An event is an action, such as the user
clicking on a button
• Usually, nothing happens in a Visual
Basic program until the user does
something and generates an event.
• What happens is determined by
statements.
txtFirst
txtSecond
btnRed
General Form:
• btnRed.Click
• txtFirst.TextChanged
• txtSecond.Leave
controlName.event
27
28
The three steps in creating a
Visual Basic program:
Sample Form
1. Create the interface; that is, generate,
position, and size the objects.
2. Set properties; that is, configure the
appearance of the objects.
txtFirst
txtSecond
Ex. txtBox.ForeColor = Color.Red
btnRed
3. Write the code that executes when
events occur.
Double Click on txtFirst
29
Code for Walkthrough
30
Code for Walkthrough
Public Class frmDemo
Private Sub txtFirst_TextChanged(...)
Handles txtFirst.TextChanged
End Sub
End Class
31
Public Class frmDemo
Private Sub txtFirst_TextChanged(...)
Handles txtFirst.TextChanged
txtFirst.ForeColor = Color.Blue
End Sub
End Class
32
Sample Form
Code for Walkthrough
Public Class frmDemo
Private Sub txtFirst_TextChanged(...)
Handles txtFirst.TextChanged
txtFirst.ForeColor = Color.Blue
End Sub
txtFirst
txtSecond
btnRed
Private Sub btnRed_Click(...)
Handles btnRed.Click
End Sub
End Class
Double-click on btnRed
33
Code for Walkthrough
34
Event Procedure txtFirst.Leave
Public Class frmDemo
Private Sub txtFirst_TextChanged(...)
Handles txtFirst.TextChanged
txtFirst.ForeColor = Color.Blue
End Sub
• Select txtFirst from Class Name box
drop-down list.
• Select Leave from Method Name box
drop-down list.
Private Sub btnRed_Click(...)
Handles btnRed.Click
txtFirst.ForeColor = Color.Red
End Sub
End Class
35
36
Code for Walkthrough
Code for Walkthrough
Private Sub txtFirst_Leave(...) Handles txtFirst.Leave
End Sub
Private Sub txtFirst_Leave(...) Handles txtFirst.Leave
txtFirst.ForeColor = Color.Black
End Sub
Private Sub txtFirst_TextChanged(...)
Handles txtFirst.TextChanged
txtFirst.ForeColor = Color.Blue
End Sub
Private Sub txtFirst_TextChanged(...)
Handles txtFirst.TextChanged
txtFirst.ForeColor = Color.Blue
End Sub
Private Sub btnRed_Click(...) Handles btnRed.Click
txtFirst.ForeColor = Color.Red
End Sub
Private Sub btnRed_Click(...) Handles btnRed.Click
txtFirst.ForeColor = Color.Red
End Sub
37
38
Handling Multiple Events
Header of Event Procedure
Private Sub btnRed_Click(…) Handles btnRed.Click
Event procedure can be invoked by two events.
Name, can
be changed.
Identifies event
Private Sub Button_Press(…) Handles btnRed.Click
39
Private Sub Happening(...)
Handles btnRed.Click,txtSecond.Leave
txtFirst.ForeColor = Color.Red
End Sub
40
Open and Run an Existing
Program
Altering Properties of the Form
• The following won't work:
frmDemo.Text = "Demonstration"
• The form is referred to by the keyword Me.
Me.Text = "Demonstration"
•
•
•
•
•
Click on Open Project in the File menu.
Navigate to the program’s folder.
Click on the program’s folder.
Double-click on the file with extension .sln.
In the Solution Explorer double-click on the file with
extension .vb. (The Form Designer will appear.)
• Press F5 to run the program.
41
Exercise 2: Hello World!
42
Exercise 3: Welcome!
43