1. Chapter 2 –Visual Basic, Controls, and Events
Main Topics:
History of the Visual Basic Language
Anatomy of a VB Application
Steps in a Developing VB Application

2. Visual Basic 2010 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.

3. Evolution of Visual Basic
Version 1.0 – Version 2.0 – 1992
Version 3.0 – Version 4.0 – 1995
Version 5.0 – Version 6.0 – 1998
Visual Basic.NET – (NOT BACKWARD COMPATIBLE WITH EARLIER VERSIONS)
Visual Basic 2005 – November 2005
Visual Basic 2008 – November 2007
Visual Basic 2010 – April 2010

4. Anatomy of a VB Application
Graphical User Interface (GUI)
Form – a window containing controls. Usually only one per application (but not always)
Control – a GUI component that are placed on the form
Property – a data item related to a Control that affects its appearance
Event – an action (usually by a user) on a form or control that triggers program behavior

5. Anatomy of a VB Application
Underlying VB Code
Event Procedure – a subroutine that is triggered by an event
Other procedures – could be Functions or Subroutines (in general these are Methods)
Statements – could be assignments, control statements (decisions or loops), or calls to Functions or Subroutines

6. Content Area (contains Controls
Sample Form
Maximize or Restore
Minimize
Close
Title Bar
Overall Form
Content Area (contains Controls

7. Sample Form Label controls
Labels are used to display information to the user. User cannot edit these.

8. TextBoxes are used to allow users the enter information
Sample Form
TextBox controls
TextBoxes are used to allow users the enter information

9. Buttons are almost always used to trigger program actions
Sample Form
Button
controls
Buttons are almost always used to trigger program actions

10. Another Sample Form list box radio buttons check boxes
These types of controls are used for providing choices to the user and allowing selection of one or more of these choices.
radio buttons
check boxes

11. Properties Common control properties include
Color
Size
Text or image content
Font
Different controls have their own special properties as well
Two ways to manipulate a control’s properties:
Via the Properties window in Form Design
Via Code in the program

12. Events
Actions (usually, but not always, from the user) that trigger program behavior
Forms and all controls can generate events. There are many events for each type of object.
Examples: click a button, type text in a text box, load the form, select an item from a list box, etc.

13. How to Develop a Visual Basic Application
Create a Project
Design the Interface for the user.
Via the Form Design Editor
Determine which events the controls on the window should recognize.
All events can be seen in the Form Design Editor
Write the event procedures for those events.
In the Code Editor

14. Visual Basic Start Page

15. Start a New Project

16. New Project Dialog Box
select
click on OK button

17. Initial Visual Basic Screen
If you don’t see a window, you can make it visible via the View menu.

18. Working with Controls
in the Form Design View

19. Toolbox
The Toolbox gives a list of all controls available to place on a form.

20. Properties Window selected control properties settings
Description pane

21. Setting Properties 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.

22. Setting the ForeColor Property
Click on ForeColor.
Click on button at right of settings box.
Click on Custom tab to obtain display shown.
Click on a color.
The 16 white boxes at the bottom of the grid are used to create custom colors. (Explained in Appendix B.)

23. Font Property Click on Font in left column.
Click on ellipsis at right of settings box to obtain display shown.
Make selections.

24. Button Control
The caption on the button should indicate the effect of clicking on the button.
Text property

25. Add an Access Key

26. Label 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. AutoSize is used primarily to obtain a multi-rowed label.

27. The Name Property Used by the programmer to refer to a control in code
Setting for Name property near top of Properties window
Use appropriate 3-character naming prefix
See next slide
Use descriptive names

28. Control Name Prefixes Control Prefix Example button btn btnCompute
label
lbl
lblAddress
text box
txt
txtAddress
list box
lst
lstOutput
By convention, the prefix of a control’s name is set to help identify what type of control it is. This is useful for helping to understand the program code.

29. Fonts
Proportional width fonts, such as Microsoft Sans Serif, use less space for "I" than for "W"
Fixed-width fonts take up the same amount of space for each character – like Courier New
Fixed-width fonts are used for tables.

30. Auto Hide Hides Toolbox when not in use
Vertical push pin icon indicates auto hide is disabled.
Click the push pin to make it horizontal and enable auto hide.
push pin

31. Positioning Controls
proximity line

32. Aligning Bottoms of Controls
snap line

33. Aligning Middles of Controls
snap line

34. Tab Order
The tab indices determine the order in which controls receive the focus during tabbing.
The control whose TabIndex property is set to 0 has the focus when the program begins.
Tab index determines the order in which the control receives the focus while tabbing.
Setting of tab order invoked from Edit window.

35. 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.

36. Working with Events

37. Event 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 which raises an event.
What happens is determined by statements inside the event procedure.

38. Display Events for a Control
Select the control
Click on the Events button ( ) in the Properties window
events button

39. Create an Outline for an Event Procedure
Double-click on a control or
Select a control, click on the Events button in the Properties window, and double-click on an event

40. Structure of an Event Procedure
Private Sub objectName_event(...)
Handles objectName.event
statements
End Sub
(...) is filled automatically with (ByVal sender As System.Object, ByVal e As System.EventArgs)
header
These are parameters of the procedure…we’ll discuss in Ch5

41. Header of Event Procedure
Private Sub btnRed_Click(…) Handles btnRed.Click
Name of the event procedure.
Identifies event

42. Code Editor
This is the Code Editor for the form before any code has been written.
Code Editor tab
Form Designer tab

43. Sample Form
txtFirst
txtSecond
btnRed
Double-click on a control to create its event-procedure outline in the Code Editor

44. Code Editor
When you double-click on a control, its default event procedure will be created in the Code Editor.

45. Code Editor Public Class frmDemo Private Sub txtFirst_TextChanged(...)
Handles txtFirst.TextChanged
txtFirst.ForeColor = Color.Blue
End Sub
End Class
Once you have an event procedure, you can write the statements for the desired program behavior.
In this example, we set the ForeColor property of the txtFirst text box to blue. This makes the letters in the text box blue.

46. IntelliSense
Automatically pops up to help the programmer.
txtFirst.

47. Code for Sample 2-3-Demo Private Sub txtFirst_Leave(...)
Handles txtFirst.Leave
txtFirst.ForeColor = Color.Black
End Sub
Private Sub txtFirst_TextChanged(...)
Handles txtFirst.TextChanged
txtFirst.ForeColor = Color.Blue
Private Sub btnRed_Click(...) Handles btnRed.Click
txtFirst.ForeColor = Color.Red

48. Code for Sample 2-3-Demo
These events are the defaults for the associated controls. Double-clicking the control automatically creates them:
Private Sub txtFirst_TextChanged(...)
Handles txtFirst.TextChanged
txtFirst.ForeColor = Color.Blue
End Sub
Private Sub btnRed_Click(...) Handles btnRed.Click
txtFirst.ForeColor = Color.Red

49. Code for Sample 2-3-Demo
The Leave event is not a default for text boxes. To create it you need to go through the Events portion of the Properties window in the Form Design editor:
Private Sub txtFirst_Leave(...)
Handles txtFirst.Leave
txtFirst.ForeColor = Color.Black
End Sub

50. Event Procedure txtFirst.Leave
Select txtFirst on the form
Click on the Events button in the Properties window
Double-click on Leave

51. Sample Assignment Stmts
txtBox.ForeColor = Color.Red
txtBox.Visible = True
txtBox.Text = "Hello World"
General Form:
controlName.property = setting
These are ways of manipulating properties of controls dynamically, in your code, based on user actions

52. Focus
When you click on a text box, a cursor appears in the text box, and you can type into the text box.
Such a text box is said to have the focus.
If you click on another text box, the first text box loses the focus (Leave event) and the second text box receives the focus (Enter event).

53. Handling Multiple Events
An event procedure can be invoked by two events.
Private Sub Happening(...)
Handles btnRed.Click,txtSecond.Leave
txtFirst.ForeColor = Color.Red
End Sub

54. 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"
This is because all this code is taking place WITHIN the form (frmDemo). So, you need to use self-referencing instead of other-referencing.

55. Summary: Creating a Visual Basic Program
Create the interface; that is, generate, position, and size the controls.
Set properties; that is, configure the appearance of the form and its controls.
Create the event procedures for the form and its controls.
Write the code that executes when events occur.