Microsoft Visual Basic 2017

for Windows®, Web, and Database Applications

Chapter 2
Program and
Graphical User
Interface Design
 Objectives (1 of 2)
• Create a Visual Basic 2017 Windows Desktop
Application project
• Name and set the Title Bar text in a Windows Form
object and resize a Windows Form object
• Add a Label object to a Windows Form object, name
the Label object, set the text in the Label object, and
change the Font properties of the text in the Label
object
• Add a PictureBox object to the Windows Form object,
name the PictureBox object, and resize the PictureBox
object
 Objectives (2 of 2)

• Add a Button object to the Windows Form object, name

the Button object, set the text in the Button object, and
change the Button object’s size
• Align objects on the Windows Form object
• Save, close, and open Visual Basic projects
• Understand and implement design principles of the
graphical user interface
• Understand and implement the first two phases of the
program development life cycle
 Introduction (1 of 5)

• Before a program can be coded using Visual Basic

2017, it must be designed.
• Design and implement the application to illustrate the
process of creating a computer program as an
integrated development environment using Visual
Basic 2017.
• The application could be a part of a larger menu
application use to select a coffee latte order at your
favorite coffee shop
• The program begins by displaying the Latte Selection
window
Introduction (2 of 5)
 Introduction (3 of 5)
• If the user clicks the Pumpkin Spice button, a picture
of a pumpkin spice latte is displayed
 Introduction (4 of 5)
• If the user clicks the Mocha button, a picture of a
mocha latte is displayed
 Introduction (5 of 5)
• After choosing a latte flavor, the user can click the
Select Latte button and the program informs the user
that a flavored latte has been selected
 Using Visual Studio 2017

• When designing an event-driven program that uses a

graphical user interface (GUI), such as the program in
this chapter, one of the first steps after defining the
purpose for the program is to design the user interface
itself
• Before beginning to design the user interface, however,
the developer should know how to use Visual Studio
and Visual Basic rapid application development
(RAD) tools in the design process
 Create a New Visual Basic 2017 Windows
Desktop Project (1 of 4)
• A project is equivalent to a single program created
using Visual Studio
• A Windows Classic Desktop project is:
– a program with a user interface whose windows are
created using the Windows operating system
• To execute, the user interacts with windows and
components (the user interface)
 Create a New Visual Basic 2017 Windows
Desktop Project (2 of 4)
• Tap or click the New Project button on the Standard
toolbar
• If necessary, tap or click Windows Desktop in the left
pane so that it is selected
• If necessary, tap or click Windows Forms Application in
the middle pane
• Type the project name
• Tap or click the OK button in the New Project window
Create a New Visual Basic 2017 Windows
Desktop Project (3 of 4)
 Create a New Visual Basic 2017 Windows
Desktop Project (4 of 4)
• The Visual Studio window contains several important
features you should know. First, in the portion of the
window known as the work area, a tabbed page named
Form1.vb [Design] contains a Windows Form object
called Form1
• A Windows Form object is the window you will use to
build the program and then display it on your screen
when you execute the program
 Display the Toolbox
• If the window does not already display the Toolbox, tap
or click the Toolbox button in the left margin of the
window. If necessary, tap or click Common Controls to
display the Common Controls tab
 Permanently Display the Toolbox
• If necessary, tap or click the Toolbox button in the left
margin of the window to display the Toolbox. Then, tap
or click the Auto Hide button (Pushpin icon) on the
Toolbox title bar
 View Object Properties (1 of 2)

• Properties can describe a multitude of characteristics

about the object, including its color, size, name, and
position on the screen
• In the Properties window, the property names in the
left list appear in Alphabetical view
• Many developers find the Alphabetical view the easiest
to use when searching for properties
View Object Properties (2 of 2)
 Name the Windows Form Object (1 of 2)

• Tap or click anywhere in the Windows Form object to

select it and then tap or click View on the menu bar
• If necessary, tap or click Solution Explorer on the View
menu to display the Solution Explorer. In the Solution
Explorer window, press and hold or right-click the
Form1.vb file name to display a shortcut menu with the
Rename command
• Tap or click Rename. Type frmLatteSelection.vb and
press the ENTER key
Name the Windows Form Object (2 of 2)
 Set the Title Bar Text in a Windows Form
Object (1 of 2)
• The Text property in the Properties window for the
Windows Form object contains the value displayed in
the title bar of the window
• Click the Windows Form object and then scroll in the
Properties window as necessary until you find the Text
property. Then, double-tap or double-click the Text
property in the right column
• Type Latte Selection and then press the ENTER key
Set the Title Bar Text in a Windows Form
Object (2 of 2)
 Resize a Form
• With the Windows Form object selected, double-click
the Size property in the right column. Type 730, 700
and then press the ENTER key
 Add a Label Object (1 of 2)

• Drag the Label .NET component from the Common

Controls tab in the Toolbox over the Windows Form
object to the approximate location where you want to
place the Label object
• When the Label object is in the correct location,
release the left mouse button
Add a Label Object (2 of 2)
 Name the Label Object (1 of 2)

• With the Label object selected, scroll in the Properties

window until you find the (Name) property. Then,
double-tap or double-click the (Name) property in the
right column
• Type the new name, and then press the ENTER key
Name the Label Object (2 of 2)
Change the Text in a Label Object (1 of 2)

• With the Label object selected, scroll in the Properties

window until you find the Text property. Then, double-
tap or double-click the Text property in the right column
• Type the new text for the Text property and press the
ENTER key
Change the Text in a Label Object (2 of 2)
 Enter Multiple Lines of Text in a Label
Object
• With the Label object selected, tap or click the Text
property name in the left column of the Properties
window. Then, tap or click the arrow in the right column
of the Text property
 Change the Label Font, Font Style, and
Font Size (1 of 2)
• Tap or click the Label object to select it. Scroll until you
find the Font property in the Properties window. Tap or
click the Font property in the left column of the
Properties window. Tap or click the ellipsis button for
the Font property
• In the Font dialog box, scroll in the Font list to the font
you want to use and then tap or click it. Tap or click a
desired font style in the Font style list. Tap or click the
size you want to use in the Size list
• Tap or click the OK button
Change the Label Font, Font Style, and
Font Size (2 of 2)
 Center a Label Object in the Windows
Form Object (1 of 2)
• With the Label object selected, tap or click Format on
the menu bar and then point to Center in Form on the
Format menu
• Tap or click Horizontally on the Center in Form
submenu
Center a Label Object in the Windows
Form Object (2 of 2)
 Delete GUI Objects
• Select the object from the Windows Form Object to
delete by tapping or clicking it
• Press the DELETE key
 Use the Undo Button on the Standard
Toolbar
• Tap or click the Undo button on the Standard toolbar
 Add a PictureBox Object (1 of 2)
• A PictureBox is an object much like a label
• With the Toolbox visible, drag the PictureBox .NET
component on the Toolbox over the Windows Form
object to the approximate location where you want the
PictureBox object to be displayed
• When the pointer is in the correct location, release the
left mouse button
Add a PictureBox Object (2 of 2)
 Name a PictureBox Object
• Select the PictureBox object
• Locate the (Name) property in the Properties window
for the PictureBox object
• Double-tap or double-click the value in the right column
for the (Name) property, type the name, and then press
the ENTER key
 Resize a PictureBox Object
• Double-tap or double-click to the right of the Size
property of the PictureBox object, type the desired
size, and then press the ENTER key
 Add a Second PictureBox Object
• Drag the PictureBox .NET component in the Toolbox
to any location in the Windows Form object, and then
release the left mouse button
 Make Objects the Same Size (1 of 2)
• Select the object whose size you want to duplicate,
hold down the CTRL key, and tap or click the object
you want to resize
• Tap or click Format on the menu bar and then point to
the Make Same Size command on the Format menu
• Tap or click Both on the Make Same Size submenu
Make Objects the Same Size (2 of 2)
 Align the PictureBox Objects
• With the left and the right PictureBox objects selected,
tap or click Format on the menu bar and then point to
Align on the Format menu
• Tap or click Bottoms on the Align submenu
Center Multiple Objects Horizontally in the
Window
• With both PictureBox objects selected, tap or click
Format on the menu bar and then point to the Center
in Form command
• Tap or click Horizontally on the Center in Form
submenu
 Add a Button Object (1 of 2)
• With the Toolbox displayed in the Visual Studio
window, drag the Button control in the Toolbox over the
Windows Form object to the position where you want to
place the button
• When the pointer is positioned properly, release the left
mouse button
Add a Button Object (2 of 2)
Name and Set Text for a Button Object
• With the Button object selected, scroll in the Properties window
until you find the Text property. Double-tap or double-click the
Text value in the right column, type the text you want to display,
and then press the ENTER key
 Change a Button Object’s Size
• Place the pointer over the right edge of the Button object
until the pointer changes to a double-headed arrow
• Drag the pointer to the right to increase the button’s
width, and then release the left mouse button
 Add and Align a Second Button (1 of 2)
• Drag the Button .NET component from the Toolbox to
the desired location on the Windows Form object. Align
the top of the rectangle in the pointer to the top of the
other button until a red line appears under the text of
the buttons
• When the buttons are aligned and spaced as you like,
release the left mouse button
Add and Align a Second Button (2 of 2)
 Aligning Objects Vertically (1 of 2)
• If necessary, click anywhere in the Windows Form
object to deselect any other objects. Then, slowly drag
the Mocha button below the Pumpkin Spice button until
vertical blue snap lines are displayed.
• When the blue lines appear, indicating the buttons are
aligned vertically, drag the Mocha button up or down to
create the proper spacing between the buttons, and
then release the left mouse button.
Aligning Objects Vertically (2 of 2)
 Saving, Closing, and Opening a Visual
Basic Project
• To save the work you have completed, you can tap or
click the Save All button on the Standard toolbar
• The first time you save a project, click the Save All
button on the Standard toolbar to save your program in
the same location with the same name.
 Close Visual Studio 2017
• To close Visual Studio, you can tap or click the Close
button on the right of the title bar in the Visual Studio
window
 Open a Visual Studio Project
• Method 1: Double-tap or double-click the solution file in
the folder where it is stored
• Method 2: With Visual Studio open, tap or click the
Open File button on the Standard toolbar, locate the
solution file, and open it
• Method 3: With Visual Studio open, click File on the
menu bar and then point to Recent Projects and
Solutions on the File menu. Tap or click the name of
the project you want to open
 Program Development Life Cycle
• Set of phases and steps that developers follow to
design, create, and maintain a computer program
– Gather and analyze the program requirements
– Design the user interface
– Design the program processing objects
– Code the program
– Test the program
– Document the program/system
– Maintain the program/system
Phase 1: Gather and Analyze the Program
Requirements (1 of 7)
• Gather project requirements by interviewing users,
reviewing current procedures, and completing other
fact-gathering tasks
• Two types of requirements documentation:
– Requirements document
– Use Case Definition
Phase 1: Gather and Analyze the Program
Requirements (2 of 7)
REQUIREMENTS DOCUMENT
Date Submitted: January 23, 2019
Application Title: Latte Selection
Purpose:
The Latte Selection Program will allow a user to select
a type of latte.
Program Procedures:
From a window on the screen, the user should view
two different latte types and then make a latte
selection.
Phase 1: Gather and Analyze the Program
Requirements (3 of 7)
Algorithms, Processing, and Conditions:
1. The user must be able to view choices for a pumpkin
spice and mocha latte until the user selects a latte
type.
2. When the user chooses a latte type, a picture of the
selected type should appear in the window.
3. Only one picture should be displayed at a time, so if a
user chooses pumpkin spice latte, only its picture
should be displayed. If a user then chooses mocha
latte, its picture should be displayed instead of
pumpkin spice latte.
Phase 1: Gather and Analyze the Program
Requirements (4 of 7)
4. When the user makes a latte selection, a confirming
message should be displayed. In addition, the user
should be prevented from identifying a latte flavor after
making the latte selection.
5. After the user makes a latte selection, the only
allowable action is to exit the window.
Notes and Restrictions:
The user should be able to make latte selection only
after choosing a latte type.
Phase 1: Gather and Analyze the Program
Requirements (5 of 7)
Comments:
The pictures shown in the window should be selected
from pictures available on the web.
Phase 1: Gather and Analyze the Program
Requirements (6 of 7)
• A use case is a sequence of actions a user will
perform when using the program
• The Use Case Definition specifies each of these
sequences by describing what the user will do and how
the program will respond
Phase 1: Gather and Analyze the Program
Requirements (7 of 7)
Use Case Definition
1. User clicks Pumpkin Spice or Mocha button.
2. Program displays a picture of the latte chosen by the user
and enables the latte selection button.
3. User clicks latte flavor buttons to view the flavors of latte as
desired.
Program displays the picture of the chosen latte flavor.
4. User clicks the Select Latte button.
5. Program displays a latte selection confirmation message,
and disables both latte flavor buttons and the Select Latte
button. The Exit Window button becomes active.
6. User exits the program by clicking the Exit Window button.
 Phase 2: Design the User Interface (1 of
3)
• Developers sometimes spend 25 to 40 percent of
program design on the user interface
– Presentation layer
• Use Visual Studio to create the user interface
• Interface designs are often called mock-ups
 Phase 2: Design the User Interface (2 of
3)
• Principles of User Interface Design
– The GUI should be easy to use and follow
– Users will not be satisfied with the application if the user
interface is not easy to use
– Four primary means of interacting with a user interface
are the keyboard, a pointing device such as a mouse, a
touch interface, and voice input
– Use of the interface should feel natural and normal
– Provide the most appropriate object for each
requirement
Phase 2: Design the User Interface (3 of
3)
– Once an object is used for a particular requirement,
then that object should be used for the same
requirement throughout the program interface
– Objects must be arranged in the sequence in which
they are used
– The interface should be kept as simple as possible,
while containing all required functionality
– The user interface should be intuitive
 Sample Program — Phase 2: Design the
User Interface (1 of 3)
• The application will be presented in a window on the
screen, so a Windows Forms App using a Windows
Form object is the appropriate means for creating the
program
• The user will review the choices — a pumpkin spice or
a mocha latte — and then make a selection
• Two pictures must be displayed in the user interface —
a pumpkin spice picture and a mocha picture
 Sample Program — Phase 2: Design the
User Interface (2 of 3)
• When the user makes a latte selection by clicking the
Select Latte button, a message must be displayed to
confirm the latte selection
• After the user makes a latte selection, the only action
available to the user is to exit the window, so an Exit
Window button is required
• Include simple instructions in the window so that the
user is not confused while using the interface
• The user interface should include the following
• items: a Windows Form object that will contain all the
other objects, two PictureBox objects to
Sample Program — Phase 2: Design the
User Interface (3 of 3)
contain pictures of pumpkin spice and mocha lattes, four
Button objects, and three Label objects.
 Summary
• Completed the steps to create the GUI mock-up for the
Latte Selection program
• Many of the required steps are somewhat repetitive;
the same technique is used repeatedly to accomplish
similar tasks
• When you master these techniques and other
principles of user interface design, you will be able to
design user interfaces for a variety of programs