Microsoft Visual Basic:

Reloaded

Chapter Two
Creating a User Interface
 2

Overview

■ Classes and Objects

■ Properties, Methods and Events
■ Namespaces
■ Encapsulation
■ Planning an Application - TOE Chart
■ Descriptive and Output Labels
■ Suggested Naming Conventions
■ GUI Design Tips and Other Tips
■ Access Keys, Tab Order, Splash Screens and
Dialog Boxes
 2009 Pearson Education, Inc. All rights reserved.
 3

Classes and Objects

■ In Object Oriented Programming, a class is

analogous to a blueprint for an object. It can be
used to create many objects again and again.

■ Each time you add a control to a form (like a

button or text box), you create instances of the
class represented by those controls. Those
controls are considered objects.

 2009 Pearson Education, Inc. All rights reserved.

 4

Properties, Methods and Events

■ Each object has specific Properties, Methods

and Events

■ Properties: Attributes that describe the object

■ Events: Characterizes how an object can
respond
■ Methods: Defines actions an object can take
■ Function – returns a result when called
■ Sub – does not return a result when called

 2009 Pearson Education, Inc. All rights reserved.

 5

Object Example

 2009 Pearson Education, Inc. All rights reserved.

 6

Object Example

Properties
■ Balloon.Color = Red
■ Balloon.Diameter = 10
■ Balloon.Inflated = True

Methods
■ Balloon.Inflate
■ Balloon.Deflate
■ Balloon.Rise(5)

 2009 Pearson Education, Inc. All rights reserved.

 7

Object Example

Event

Sub Balloon_Puncture()
Balloon.MakeNoise("Bang") Balloon.Deflate
Balloon.Inflated = False
End Sub

 2009 Pearson Education, Inc. All rights reserved.

 8

Common Form Controls (Objects)

■ Buttons
■ Text Box
■ Labels
■ Radio Buttons
■ Check Box
■ Combo Box
■ List Box
■ Tool Tip
■ Numeric Up Down

 2009 Pearson Education, Inc. All rights reserved.

 9

Common Control Properties

■ BackColor
■ Enabled
■ ForeColor
■ Location
■ Name
■ Size (Height, Width)
■ Text
■ Visible

Can “manually” set these for now, but we’ll see

how to manipulate the properties with code soon.
 2009 Pearson Education, Inc. All rights reserved.
 10

Methods – Example of a Function

Public Function Add( ByVal var1 as Integer, ByVal

var2 as Integer) As Integer
Dim result as Integer
result=var1 + var2
Return result
End Function

 2009 Pearson Education, Inc. All rights reserved.

 11

Methods – Example of a Sub

Public Sub MySub()

MessageBox.Show(“ this is a non value returning
method ”)
End Sub

 2009 Pearson Education, Inc. All rights reserved.

 12

Default Control Events

■ Button: Click
■ Text Box: TextChanged
■ Radio Button: CheckedChanged
■ Check Box: CheckedChanged
■ Combo Box: SelectedIndexChanged

■ Double click on the control in design view to

automatically open the code window with the
default event for that control.

 2009 Pearson Education, Inc. All rights reserved.

 13

Default Event for Button

Private Sub Button1_Click(ByVal sender As

System.Object, ByVal e As System.EventArgs)
Handles Button1.Click

End Sub

 2009 Pearson Education, Inc. All rights reserved.

 14

Other Command Button Events

■ Enter
■ TextChanged
■ KeyDown
■ MouseEnter
■ MouseLeave
■ MouseHover

■ And many more (68 in all) which can be explored

in the Object Browser, Properties Window or
Code Window
 2009 Pearson Education, Inc. All rights reserved.
 15

Namespaces

■ The .NET Framework Class library stores pre-

developed classes to facilitate program
development. The classes are organized into
directory-like structures called Namespaces.

Name of object
(Welcome) Namespace
(System.Windows.Forms)
Welcome Class type of object
application GUI (Form)
objects

Figure 3.43 | Component object box expanded to show Figure 3.44 | The name and class of an object are
the Welcome application’s objects. displayed in the component object box.

 2009 Pearson Education, Inc. All rights reserved.

 16

Namespace Examples

■ System: the root for primitive data types and

other namespaces in the .NET base class library

■ System.Data.SQLClient: this namespace

contains classes that are optimized for
interacting with MS SQL Server

■ System.Windows.Forms: this namespace

contains types involved in creating standard
Windows applications. Classes that represent
forms and controls reside here as well.
 2009 Pearson Education, Inc. All rights reserved.
 17

My Namespace

■ The “My” namespace stores the most common

classes from the .NET framework in one
collection.
■ This namespace allows a programmer to access
the .NET framework classes and parts of a
project.
■ Example using the My namespace reference:

My.Computer.Audio.Play("c:\windows\media\Windo
ws XP Startup.wav")

 2009 Pearson Education, Inc. All rights reserved.

 18

Common Tasks using My Namespace

■ Displaying a splash screen

■ Getting the computer name
■ Getting network settings
■ Verifying a web site is up and running
■ Reading a text file into a string
■ Sending something to print on the default printer
■ Getting application settings

 2009 Pearson Education, Inc. All rights reserved.

 19

Encapsulation

■ You don’t need to know HOW something works

in detail, all you need to know is how to call it in
code.

■ The 1 line of code used to create the basic web

browser is a great example of Encapsulation.
myBrowser.Navigate(txtURL.Text)

■ Every control added to a form is automatically

created by Visual Studio without having to
instantiate the classes in code. Easy!
 2009 Pearson Education, Inc. All rights reserved.
 Planning an Application

■ Plan the application before creating the user

interface
■ Work jointly with the user to ensure the success of
the application
■ TOE (Task, Object, Event) chart:
Shows application’s tasks, objects, and events
■ Tasks, objects, and events should be identified in
the first three steps of planning
■ Sunshine Cellular Company:
Takes orders by phone for cell phones priced at $100 each
Two colors: blue and silver
Currently the salespeople calculate the order total
 2009 Pearson Education, Inc. All rights reserved.
 Planning an Application

Figure 2-2: Current order form used by Sunshine Cellular

 2009 Pearson Education, Inc. All rights reserved.

Figure 2-3: Tasks entered in a TOE chart

 2009 Pearson Education, Inc. All rights reserved.

Figure 2-4: Tasks and objects entered in a TOE chart

 2009 Pearson Education, Inc. All rights reserved.

Figure 2-5: Completed TOE chart ordered by task

 2009 Pearson Education, Inc. All rights reserved.

 Planning an Application

Figure 2-6: Completed TOE chart ordered by object

 2009 Pearson Education, Inc. All rights reserved.

 26

Labels

■As the control’s name indicates, Labels are often

used to identify other controls on the Form.

■Descriptive Labels help the user understand

each control’s purpose.
■Output Labels display program output.

 2009 Pearson Education, Inc. All rights reserved.

 27

Descriptive and Output Labels

Output Label (recessed appearance)

Descriptive Label

 2009 Pearson Education, Inc. All rights reserved.

 28

Suggested Naming Conventions

■Change the Form name to a unique and
meaningful name for easy identification.
■Capitalize the first letter of the Form name
because Form is a class.
■Objects (such as controls) should begin with
lowercase letters.
■Change the Form’s title to help users identify the
Form’s purpose.
■Form titles should use book-title capitalization.

 2009 Pearson Education, Inc. All rights reserved.

 29

Suggested Naming Conventions

■ Use standard suffixes for names of objects
(controls and Forms) so that you can easily tell
them apart.
■ Append the suffix Form to Form names.
■ Append the Label suffix to all Label control
names.
■ Append the Button suffix to Button control names.
■ When entering values for a Label’s Text
property, you should use sentence-style
capitalization.

 2009 Pearson Education, Inc. All rights reserved.

 30

GUI Design Tips

■ Choose short, descriptive Form titles. Capitalize

words that are not articles, prepositions or
conjunctions. Do not use punctuation.
■ Use 9pt Segoe UI font to improve readability for
controls that display text.
■ Use colors in your applications, but not to the
point of distracting the user.
■ Use Labels to display text that users cannot
change
■ Ensure that all Label controls are large enough
to display their text.
 2009 Pearson Education, Inc. All rights reserved.
 31

GUI Design Tips

■ Make TextBoxes wide enough for their expected
inputs.
■ Each TextBox should have a descriptive Label
indicating the input expected from the user.
■ Place each descriptive Label either above or to
the left of the control that it identifies.
■ A descriptive Label and control it identifies
should be aligned on the left if they vertically
arranged.
■ The TextAlign property of a descriptive Label
should be set to MiddleLeft. This ensures that
text within groups of Labels align.
 2009 Pearson Education, Inc. All rights reserved.
 32

GUI Design Tips

■ Align the left or right sides of a group of
descriptive Labels if the Labels are arranged
vertically.
■ If several output Labels are arranged vertically
to display numbers used in a mathematical
calculation (such as in an invoice), set the Text-
Align property to MiddleRight.
■ Output Labels should be distinguishable from
descriptive Labels. This can be done by setting
the BorderStyle property of an output Label to
Fixed3D.

 2009 Pearson Education, Inc. All rights reserved.

 33

Other Helpful Features and Tips

■ Snap Lines
■ Format Menu Options
■ Lock Controls
■ Align
■ Sizing
■ Spacing
■ Centering
■ Manually Resize Labels
■ Change the Form file name (Form1.vb) to a
name that describes the application’s purpose.

 2009 Pearson Education, Inc. All rights reserved.

 34

Other Helpful Tips

■ Clear the an output Label’s value initially or

provide a default value. When the application
performs the calculation for that value, the
Label’s Text property should be updated to the
new value. You’ll learn how to do this in the next
chapter.

■ To save time, Copy and Paste new controls that

are similar to existing controls. They will
automatically contain the same properties as the
existing controls.
 2009 Pearson Education, Inc. All rights reserved.
 Assigning Access Keys

■ Access key allows user to select an object using

Alt + access key.
■ Assign access keys to each control that can
accept user input (exceptions: OK and Cancel
buttons)
Each access key should be unique
■ Include & in front of the character to be used as
the access key:
&Calculate Order  Calculate Order

 2009 Pearson Education, Inc. All rights reserved.

 Controlling the Tab Order

■ TabIndex property determines the order in

which a control receives the focus when the
Tab key is pressed
Starts at 0
Assigned by default as the order in which controls are
added to the form at design time
Should be set to the order in which the user will want to
access the controls
■ Focus: the state of being able to accept user
input
■ Set TabIndex using the Properties window or
the Tab Order option on the View menu
 2009 Pearson Education, Inc. All rights reserved.
 Splash Screens

■ Splash screen: appears when an application is

started
■ Used to introduce the application
■ Used to hold the user’s attention while the program
is being loaded into memory

 2009 Pearson Education, Inc. All rights reserved.

 Splash Screens (cont’d.)

Figure 2-13: How to add a new splash screen to a project

 2009 Pearson Education, Inc. All rights reserved.

Splash Screens (cont'd.)

Figure 2-16: How to specify the splash screen

 2009 Pearson Education, Inc. All rights reserved.

Splash Screens (cont'd.)

Figure 2-17: Project Designer window

 2009 Pearson Education, Inc. All rights reserved.
 Dialog Boxes

■ Use tools in the Dialogs section of the toolbox for

commonly used dialog boxes:
Color, Font, Save As
■ These controls do not appear on the form
■ Component tray stores controls that do not appear
in the user interface during run time
■ Dialog boxes are modal
They remain on the screen until the user closes the dialog box
No input from keyboard or mouse can occur in the primary
window until the dialog boxes is closed
■ Write code to display the dialog box and to use
values selected in the dialog box by the user
 2009 Pearson Education, Inc. All rights reserved.
 Dialog Boxes (cont'd.)

Figure 2-21: Primary window and Font dialog box in Notepad

 2009 Pearson Education, Inc. All rights reserved.

 Dialog Boxes (cont’d.)

■ Default button: activated when user presses Enter

key when the button does not have the focus
■ Cancel button: activated when user presses Esc
key when the button does not have the focus

■ AcceptButton property
A form property that designates the name of the default button
Only one per form
Should be the button that is most often selected by the user
(unless the tasks performed by this button are both
destructive and irreversible)

 2009 Pearson Education, Inc. All rights reserved.