Microsoft Visual Basic 2005: Reloaded Chapter 2 Creating a User Interface

Microsoft Visual Basic 2005:
Reloaded
Second Edition
Chapter 2
Creating a User Interface
Objectives
After studying this chapter, you should be able to:
• Plan an application
• Complete a TOE chart
• Use a text box, table layout panel, and timer
• Explain the difference between a primary window
and a dialog box
• Follow the Windows standards regarding the layout
and labeling of controls
Microsoft Visual Basic 2005: Reloaded, Second Edition
2
Objectives (continued)
• Follow the Windows standards regarding the use of
graphics, fonts, and color
• Assign access keys to controls
• Set the tab order
• Designate a default button and a cancel button
• Explain the difference between a modal form and a
modeless form
• Add a splash screen and a dialog box to an
application
Microsoft Visual Basic 2005: Reloaded, Second Edition
3
Planning an Application
Microsoft Visual Basic 2005: Reloaded, Second Edition
4
Planning an Application (continued)
• Plan the application before creating the user
interface
• Work jointly with the user
• TOE (Task, Object, Event) chart:
– Shows application’s tasks, objects, and events
• Tasks, objects, and events should be identified in
the first 3 steps of planning
Microsoft Visual Basic 2005: Reloaded, Second Edition
5
Skate-Away Sales
• Skate-Away Sales:
– Sells skateboards at $100 each
– Two colors: blue and yellow
– Currently the salespeople calculate the order total
• Develop an order-taking application for this
company
Microsoft Visual Basic 2005: Reloaded, Second Edition
6
Identifying the Application’s Tasks
Microsoft Visual Basic 2005: Reloaded, Second Edition
7
Identifying the Application’s Tasks
(continued)
• First, review current user procedures and forms
• Steps:
– Identify the desired outputs
– Identify the necessary inputs
– Identify the processing needed to change the inputs
into the outputs
– Identify how the user will end the application
– Identify the need to clear the screen between
transactions
Microsoft Visual Basic 2005: Reloaded, Second Edition
8
Identifying the Application’s Tasks
(continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition
9
Identifying the Objects
• Assign each task to an object in the TOE
• TextBox tool: instantiates a text box control
• Text box:
– Used to allow the user to input information
• Use buttons to initiate the calculations
• Use labels to guide the user
Microsoft Visual Basic 2005: Reloaded, Second Edition
10
Identifying the Objects (continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition
11
Identifying the Objects (continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition
12
Identifying the Events
• Text boxes: no special events needed for user to
enter the text
• Labels: no special events needed to display the
prompts
• Buttons:
– Action must occur when each button is clicked
Microsoft Visual Basic 2005: Reloaded, Second Edition
13
Identifying the Events (continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition
14
Identifying the Events (continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition
15
Designing the User Interface
• Follow Windows standards for:
– Consistency
– Ease of use
– Familiar look and feel
• Primary window:
– The main window in an application
• Dialog boxes: windows used to support and
supplement a user’s activities in the primary window
Microsoft Visual Basic 2005: Reloaded, Second Edition
16
Designing the User Interface
(continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition
17
Designing the User Interface
(continued)
• Primary windows can be resized, minimized,
maximized, and closed by the user
• Primary window’s title bar includes:
– Minimize, Maximize, and Close buttons on the right
– Control menu on the left
• Dialog boxes can be closed only
• Dialog box’s title bar includes:
– Close button and optionally a Help button
– No control menu
Microsoft Visual Basic 2005: Reloaded, Second Edition
18
Designing the User Interface
(continued)
• Form object used to create primary window and dialog
boxes
• FormBorderStyle property:
– Sets border style
– Use default setting of Sizable for primary window
– Use FixedDialog setting for dialog boxes
• MinimizeBox property and MaximizeBox property
control the existence of Minimize and Maximize buttons
• Splash screen:
– Set FormBorderStyle to FixedSingle
– Set ControlBox property to False to remove control
menu
Microsoft Visual Basic 2005: Reloaded, Second Edition
19
Designing the User Interface
(continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition
20
Designing the User Interface
(continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition
21
Designing the User Interface
(continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition
22
Arranging the Controls
• Guidelines:
– Information should flow either vertically or
horizontally
– Group related controls together using white space or
container controls
• Container controls:
– Group box control
– Panel control
– Table layout panel control
Microsoft Visual Basic 2005: Reloaded, Second Edition
23
Arranging the Controls (continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition
24
Arranging the Controls (continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition
25
Arranging the Controls (continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition
26
Arranging the Controls (continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition
27
Arranging the Controls (continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition
28
Arranging the Controls (continued)
• More guidelines:
–
–
–
–
Use a label with each text box
Left-align the label’s text
Position label to left of or above the text box it identifies
Labels and button captions should be 1 to 3 words
only, and appear on one line
– Labels and captions should be meaningful
– Use sentence capitalization for labels
Microsoft Visual Basic 2005: Reloaded, Second Edition
29
Arranging the Controls (continued)
• Sentence capitalization:
– Only first letter in the first word is usually capitalized
• Book title capitalization:
– First letter in each word is capitalized (except articles,
conjunctions and prepositions)
Microsoft Visual Basic 2005: Reloaded, Second Edition
30
Arranging the Controls (continued)
• More guidelines:
– Maintain a consistent margin from all edges of the
form
– Size buttons relative to each other
– Minimize the number of different margins by aligning
control borders where possible
– Interface should not distract the user from doing the
work
Microsoft Visual Basic 2005: Reloaded, Second Edition
31
Including Graphics in the User
Interface
• Human eye is drawn to pictures before text
• Include graphics only if necessary
– Use for aesthetic purposes
– Use to clarify a portion of the screen
Microsoft Visual Basic 2005: Reloaded, Second Edition
32
Including Different Fonts in the User
Interface
• Font property: used to change the type, style, and
size of the font
• Font:
– General shape of characters in text
– Size is measured in points
• Point: 1/72 of an inch
• Serif: a light cross stroke at top or bottom of a
character
• Sans serif fonts: do not have the cross strokes
Microsoft Visual Basic 2005: Reloaded, Second Edition
33
Including Different Fonts in the User
Interface (continued)
• Guidelines:
–
–
–
–
–
Use sans serif fonts on screens
Use only one font type for the text in a form
12-point font is easiest to read at high screen resolution
Avoid italics and underlining
Use bold only for titles, headings, and key terms
Microsoft Visual Basic 2005: Reloaded, Second Edition
34
Including Color in the User Interface
• Human eye is drawn to color before B&W
• Guidelines:
–
–
–
–
–
–
Use color sparingly
Some people have trouble distinguishing colors
What is “acceptable” in colors is subjective
Color may have specific meaning in certain cultures
Use black or dark text on a white or light background
Use maximum of 3 different colors that complement
each other
– Do not use color as the only means of identification
Microsoft Visual Basic 2005: Reloaded, Second Edition
35
Assigning Access Keys
• Access key:
– Allows user to select an object using Alt + access key
– Appears underlined on the button caption
– Is not case-sensitive
• Guidelines:
– Assign access keys to each control that can accept user
input
– Exceptions: OK and Cancel buttons
Microsoft Visual Basic 2005: Reloaded, Second Edition
36
Assigning Access Keys (continued)
• Advantages of using access keys:
– User does not need mouse to navigate and activate
controls
– Allows fast typists to keep hands on keyboard
– Facilitates use of the application by people with
disabilities
• Include & in front of the character to be used as the
access key:
– &Calculate Order  Calculate Order
Microsoft Visual Basic 2005: Reloaded, Second Edition
37
Setting the TabIndex Property
• TabIndex property:
– Determines the order in which a control receives the
focus when the Tab key is pressed
– Starts at 0
• Focus: the state of being able to accept user input
• Default TabIndex values are set according to the
order in which the controls were added to the form
Microsoft Visual Basic 2005: Reloaded, Second Edition
38
Setting the TabIndex Property
(continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition
39
Setting the TabIndex Property
(continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition
40
Designating Default and Cancel
Buttons
• Default button: activated when user presses Enter
key
• AcceptButton property:
– A form property
– Designates the name of the default button
• Cancel button: activated when user presses Esc key
• CancelButton property:
– A form property
– Designates the name of the cancel button
Microsoft Visual Basic 2005: Reloaded, Second Edition
41
Including Splash Screens and Dialog
Boxes in an Application
Microsoft Visual Basic 2005: Reloaded, Second Edition
42
Including Splash Screens and Dialog
Boxes in an Application (continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition
43
Including Splash Screens and Dialog
Boxes in an Application (continued)
• Show method: displays a form as a modeless form
• Modeless form:
– Can remain displayed while user uses other forms
• ShowDialog method: displays a form as a modal
form
• Modal form:
– Requires user to take action in the form
– Rest of the application is not usable until the modal
form is closed
Microsoft Visual Basic 2005: Reloaded, Second Edition
44
Including Splash Screens and Dialog
Boxes in an Application (continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition
45
The Timer Tool
• Timer tool: instantiates a Timer control
• Timer control: processes code at one or more
regular intervals, specified by Interval property
• Tick event: occurs after each interval has elapsed
• Timer control does not appear on the form, but in the
component tray
• Component tray: area in the IDE that stores all
controls that do not appear in the user interface at
runtime
Microsoft Visual Basic 2005: Reloaded, Second Edition
46
The Timer Tool (continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition
47
The Timer Tool (continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition
48
Programming Tutorial
Microsoft Visual Basic 2005: Reloaded, Second Edition
49
Programming Example
Microsoft Visual Basic 2005: Reloaded, Second Edition
50
Summary
• Plan the application jointly with the user
• Identify tasks, objects, and events, and build a TOE
chart
• Textbox control: allows user to enter text
• Primary window: where most of the user interfacing
takes place
• Dialog window: used to support the primary window
• Follow Windows standards for GUI design
Microsoft Visual Basic 2005: Reloaded, Second Edition
51
Summary (continued)
• Align controls to flow horizontally or vertically
• Group related controls visually with white space or
container controls, and maintain consistent margins
• Use meaningful labels and captions of 1-3 words
• Use graphics and colors sparingly
• Use sans serif font types for readability
• Use TabIndex property to control where the focus
goes when Tab key is used
Microsoft Visual Basic 2005: Reloaded, Second Edition
52
Summary (continued)
• AcceptButton property designates which button on
a form is activated with the Enter key
• CancelButton property designates which button on
a form is activated with the Esc key
• Show method shows a form modeless
• ShowDialog method shows a form modally
• Timer control allows execution of code at specified
intervals
• A form’s Load event procedure executes code
before the form is displayed
Microsoft Visual Basic 2005: Reloaded, Second Edition
53