1. Microsoft Visual Basic 2005: Reloaded Second Edition
Chapter 2
Creating a User Interface

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

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

4. Planning an Application
Microsoft Visual Basic 2005: Reloaded, Second Edition

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

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

7. Identifying the Application’s Tasks
Microsoft Visual Basic 2005: Reloaded, Second Edition

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

9. Identifying the Application’s Tasks (continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition

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

11. Identifying the Objects (continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition

12. Identifying the Objects (continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition

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

14. Identifying the Events (continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition

15. Identifying the Events (continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition

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

17. Designing the User Interface (continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition

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

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

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. Designing the User Interface (continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition

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

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)
Microsoft Visual Basic 2005: Reloaded, Second Edition

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

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

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

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

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

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

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

36. Assigning Access Keys Access key: Guidelines:
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

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

38. Setting the 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

39. Setting the TabIndex Property (continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition

40. Setting the TabIndex Property (continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition

41. 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:
Designates the name of the cancel button
Microsoft Visual Basic 2005: Reloaded, Second Edition

42. Including Splash Screens and Dialog Boxes in an Application
Microsoft Visual Basic 2005: Reloaded, Second Edition

43. Including Splash Screens and Dialog Boxes in an Application (continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition

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

45. Including Splash Screens and Dialog Boxes in an Application (continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition

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

47. The Timer Tool (continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition

48. The Timer Tool (continued)
Microsoft Visual Basic 2005: Reloaded, Second Edition

49. Programming Tutorial
Microsoft Visual Basic 2005: Reloaded, Second Edition

50. Programming Example
Microsoft Visual Basic 2005: Reloaded, Second Edition

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

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

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