Microsoft Visual Basic 2012 CHAPTER TWO Program and Graphical
User Interface Design
Slide 2
2 Chapter 2: Program and Graphical User Interface Design2
Objectives Open and close Visual Studio 2012 Create a Visual Basic
2012 Windows Application project Name and set the Title Bar text in
a Windows Form object; 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; change the Font properties of the text in
the Label object Add a PictureBox object to the Windows Form
object; name the PictureBox object; resize the PictureBox
object
Slide 3
2 Chapter 2: Program and Graphical User Interface Design3
Objectives Add a Button object to the Windows Form object; name the
Button object; set the text in the Button object; change the Button
object size Align Objects on the Windows Form object Save 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
Slide 4
2 Chapter 2: Program and Graphical User Interface Design4 Open
Visual Studio 2012 In Windows 8, open the Search charm and type
Visual Studio 2012. In Windows 7, tap or click the Start button on
the Windows taskbar, point to All Programs on the Start menu, and
then tap or click Microsoft Visual Studio 2012 on the All Programs
submenu Tap or click Microsoft Visual Studio 2012
Slide 5
2 Chapter 2: Program and Graphical User Interface Design5 Open
Visual Studio 2012
Slide 6
2 Chapter 2: Program and Graphical User Interface Design6
Create a New Visual Basic 2012 Windows Application Project Tap or
click the New Project button on the Standard toolbar If necessary,
tap or click Windows in the left pane so 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
Slide 7
2 Chapter 2: Program and Graphical User Interface Design7
Create a New Visual Basic 2012 Windows Application Project
Slide 8
2 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 Chapter 2: Program and Graphical User
Interface Design8
Slide 9
2 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 Chapter 2: Program and Graphical User
Interface Design9
Slide 10
2 10 Name the Windows Form Object Tap or click anywhere in the
Windows Form object to select it In the Solution Explorer window,
press and hold or right- click the Form1.vb filename. On the
shortcut menu, point to Rename Tap or click Rename. Type the name
of the form, and press the ENTER key
Slide 11
2 Name the Windows Form Object Chapter 2: Program and Graphical
User Interface Design11
Slide 12
2 Chapter 2: Program and Graphical User Interface Design12 Set
the Title Bar Text in a Windows Form Object With the Windows Form
object selected, 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 the title bar text, and then
press the ENTER key
Slide 13
2 Chapter 2: Program and Graphical User Interface Design13 Set
the Title Bar Text in a Windows Form Object
Slide 14
2 Chapter 2: Program and Graphical User Interface Design14
Resize a Form With the Windows Form object selected, double- click
the Size property in the right column Type the desired size and
then press the ENTER key
Slide 15
2 Chapter 2: Program and Graphical User Interface Design15 Add
a Label Object Drag the Label.NET component button 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
Slide 16
2 Chapter 2: Program and Graphical User Interface Design16 Name
the Label Object With the Label object selected, scroll in the
Properties window until you find the (Name) property. Then
double-click the (Name) property in the right column Type the new
name, and then press the ENTER key
Slide 17
2 Chapter 2: Program and Graphical User Interface Design17
Change the Text in a Label Object With the Label object selected,
scroll in the Properties window until you find the Text property.
Then, double-tap or double-click the Text value in the right column
Type the new text for the Text property To enter the Text property,
press the ENTER key
Slide 18
2 Chapter 2: Program and Graphical User Interface Design18
Change the Text in a Label Object
Slide 19
2 Chapter 2: Program and Graphical User Interface Design19
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 down arrow
in the right column of the Text property
Slide 20
2 Chapter 2: Program and Graphical User Interface Design20
Change Label Font, Font Style, and Font Size 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 Label 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
Slide 21
2 Chapter 2: Program and Graphical User Interface Design21
Change Label Font, Font Style, and Font Size
Slide 22
2 Chapter 2: Program and Graphical User Interface Design22
Center a Label Object in the Windows Form Object 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
Slide 23
2 Chapter 2: Program and Graphical User Interface Design23
Delete GUI Objects Select the object to delete by tapping or
clicking it Press the DELETE key
Slide 24
2 Chapter 2: Program and Graphical User Interface Design24 Use
the Undo Button on the Standard Toolbar Tap or click the Undo
button on the Standard toolbar
Slide 25
2 Chapter 2: Program and Graphical User Interface Design25 Add
a PictureBox Object 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
Slide 26
2 Chapter 2: Program and Graphical User Interface Design26 Add
a PictureBox Object
Slide 27
2 Chapter 2: Program and Graphical User Interface Design27 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
Slide 28
2 Chapter 2: Program and Graphical User Interface Design28
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
Slide 29
2 Chapter 2: Program and Graphical User Interface Design29 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
Slide 30
2 Chapter 2: Program and Graphical User Interface Design30 Make
Objects the Same Size Select the object whose size you want to
duplicate, and then 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
Slide 31
2 Chapter 2: Program and Graphical User Interface Design31 Make
Objects the Same Size
Slide 32
2 Chapter 2: Program and Graphical User Interface Design32
Align the PictureBox Objects With both 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
Slide 33
2 Chapter 2: Program and Graphical User Interface Design33
Center Multiple Objects Horizontally in the Window With both
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
Slide 34
2 Chapter 2: Program and Graphical User Interface Design34 Add
a Button Object 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
Slide 35
2 Chapter 2: Program and Graphical User Interface Design35 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-click the Text value in the right column, type the text you
want to display, and then press the ENTER key
Slide 36
2 Chapter 2: Program and Graphical User Interface Design36
Change Button Object Size Place the mouse pointer over the right
edge of the Button object until the pointer changes to a
double-headed arrow Drag the pointer to the right until the Button
object is just big enough to display the text, and then release the
left mouse button
Slide 37
2 Chapter 2: Program and Graphical User Interface Design37 Add
and Align a Second Button 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
Slide 38
2 Chapter 2: Program and Graphical User Interface Design38 Add
and Align a Second Button
Slide 39
2 Chapter 2: Program and Graphical User Interface Design39
Aligning Objects Vertically If necessary, tap or click anywhere in
the Windows Form object to deselect any other objects. Then, slowly
drag the button to align under a button with which you want to
align it When the blue lines appear, indicating the buttons are
aligned vertically, drag the button up or down to create the proper
spacing between the buttons, and then release the left mouse
button
Slide 40
2 Chapter 2: Program and Graphical User Interface Design40
Aligning Objects Vertically
Slide 41
2 Chapter 2: Program and Graphical User Interface Design41 Save
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, the Save Project dialog box is
displayed
Slide 42
2 Chapter 2: Program and Graphical User Interface Design42
Close Visual Studio 2012 To close Visual Studio, you can tap or
click the Close button on the right of the title bar in the Visual
Studio window If you try to close Visual Studio but you have never
saved your program, Visual Studio will display the Close Project
dialog box
Slide 43
2 Chapter 2: Program and Graphical User Interface Design43 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
Slide 44
2 Chapter 2: Program and Graphical User Interface Design44
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
Slide 45
2 Chapter 2: Program and Graphical User Interface Design45
Phase I: Gather and Analyze the Program Requirements 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
Slide 46
2 Phase I: Gather and Analyze the Program Requirements Chapter
2: Program and Graphical User Interface Design46
Slide 47
2 Phase I: Gather and Analyze the Program Requirements Chapter
2: Program and Graphical User Interface Design47
Slide 48
2 Chapter 2: Program and Graphical User Interface Design48
Phase 2: Design the User Interface 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
Slide 49
2 Chapter 2: Program and Graphical User Interface Design49
Phase 2: Design the User Interface 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 in a user interface are the
keyboard, a pointing device, a touch interface, and voice input Use
of the interface should feel natural and normal Provide the most
appropriate object for each requirement
Slide 50
2 Chapter 2: Program and Graphical User Interface Design50
Phase 2: Design the User Interface Once an object is used for a
particular purpose, then that object should be used for the same
purpose 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
Slide 51
2 Chapter 2: Program and Graphical User Interface Design51
Summary Open and close Visual Studio 2012 Create a Visual Basic
2012 Windows Application project Name and set the Title Bar text in
a Windows Form object; 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; change the Font properties of the text in
the Label object Add a PictureBox object to the Windows Form
object; name the PictureBox object; resize the PictureBox
object
Slide 52
2 Chapter 2: Program and Graphical User Interface Design52
Summary Add a Button object to the Windows Form object; name the
Button object; set the text in the Button object; change the Button
object size Align Objects on the Windows Form object Save 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
Slide 53
Microsoft Visual Basic 2012 CHAPTER TWO COMPLETE Program and
Graphical User Interface Design
