1. Microsoft Visual Basic 2010: Reloaded Fourth Edition
Chapter Two
Creating a User Interface

2. Objectives After studying this chapter, you should be able to:
Plan an application using a TOE chart
Use a text box and table layout panel
Follow the Windows standards regarding the layout and labeling of controls
Follow the Windows standards regarding the use of graphics, fonts, and color
Assign access keys to controls
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

3. Objectives (cont'd.) Set the tab order
Add a splash screen to a project
Use the Font and Color dialog boxes
Designate a default button
Print the interface during run time
Play an audio file
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

4. 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
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

5. Planning an Application (cont'd.)
Figure 2-1: How to plan an application
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

6. 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
Develop an order-taking application for this company
First, identify the application’s tasks
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

7. Identifying the Application’s Tasks
Figure 2-2: Current order form used by Sunshine Cellular
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

8. Identifying the Application’s Tasks (cont'd.)
First, review current user procedures and forms
Ask these questions:
What information must be displayed on screen and/or printed on a printer?
What information will the user need to enter into the UI to produce the desired display or printout?
What information will the program need to calculate to produce the desired display or printout?
How will the user end the application?
Will previous information need to be cleared from the screen before new information is entered?
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

9. Figure 2-3: Tasks entered in a TOE chart
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

10. Identifying the Objects
Assign each task to an object in the user interface
Text box: a control that allows the user to enter data
Use a button to initiate the calculations
Use labels to guide the user
Use buttons to clear the screen and to end the application
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

11. Figure 2-4: Tasks and objects entered in a TOE chart
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

12. Identifying the Events
Next, determine which objects need an event to occur to allow the object to perform its task
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 2010: Reloaded, Fourth Edition

13. Figure 2-5: Completed TOE chart ordered by task
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

14. Identifying the Events (cont'd.)
Figure 2-6: Completed TOE chart ordered by object
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

15. Designing the User Interface
Next step is to design the user interface
Follow Windows GUI guidelines for:
Consistency with Windows standards
Ease of use
Familiar look and feel makes the application easier to learn
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

16. Arranging the Controls on a Form
Design guidelines:
Information should flow either vertically or horizontally
Most important information should be in upper-left corner of the screen
Group related controls together using white space or container controls
Container controls include:
Group box control
Panel control
Table layout panel control
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

17. Arranging the Controls (cont'd.)
Figure 2-7: Vertical arrangement of the Sunshine Cellular interface
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

18. Arranging the Controls (cont'd.)
Figure 2-8: Horizontal arrangement of the Sunshine Cellular interface
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

19. Arranging the Controls (cont'd.)
Label guidelines:
Use a label to identify 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 one to three words only and appear on one line
Labels and captions should be meaningful
An identifying label should include a colon (:)
Use sentence capitalization for identifying labels
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

20. Arranging the Controls (cont'd.)
Sentence capitalization: capitalize first letter in first word and any other words customarily capitalized
Book title capitalization: capitalize first letter in each word (except articles, conjunctions, and prepositions that do not occur at the beginning or end of the caption)
Button guidelines:
Size buttons relative to each other: same height
If stacked horizontally, same width also
Most commonly used button should be first
Use book title capitalization for buttons
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

21. Arranging the Controls (cont'd.)
Positioning guidelines:
Maintain a consistent margin from all edges of the form
Related controls should be placed close to each other
Minimize the number of different margins by aligning control borders where possible using snap lines or Format menu
Interface should not distract the user from doing the work
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

22. Including Graphics in the User Interface
Human eye is drawn to pictures before text
Include graphics only if necessary
Use for aesthetic purposes
Keep them small
Use to clarify a portion of the screen
Graphics can add a personal touch to a form
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

23. Including Different Fonts in the User Interface
Font property: used to change the type, style, and size of the font
Font guidelines:
Use only one font type for all text in the interface
Use Segoe UI font for Windows 7 or Windows Vista
Avoid italics and underlining
Limit bold text to titles, headings, and key items
Change the form’s Font property before adding controls
Controls will default to the font that is set for the form
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

24. Including Color in the User Interface
Human eye is drawn to color before B&W
Color 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 three different colors that complement each other
Do not use color as the only means of identification
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

25. Borders and Sizing of Controls
BorderStyle property: determines the style of a control’s border
Settings: None, FixedSingle, Fixed3D
Identifying labels should be set to None
Labels that display output should be set to FixedSingle
AutoSize property: determines if a label control automatically sizes to fit its current contents
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

26. Assigning Access Keys Access key: Access key guidelines:
Allows user to select an object using Alt + access key
May or may not appear underlined on the control’s text
Can display temporarily or hide by pressing the Alt key
Is not case sensitive
Access key guidelines:
Assign access keys to each control that can accept user input (exceptions: OK and Cancel buttons)
Each access key should be unique
Follow Windows standards for choice of access keys
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

27. Assigning Access Keys (cont'd.)
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 2010: Reloaded, Fourth Edition

28. 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
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

29. Setting the TabIndex Property (cont'd.)
Figure 2-11: How to set the TabIndex property using the Tab Order option
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

30. Setting the TabIndex Property (cont'd.)
Figure 2-12: Correct TabIndex values
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

31. 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
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

32. Splash Screens (cont’d.)
Figure 2-13: Visual Studio 2010 splash screen
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

33. Splash Screens (cont’d.)
Figure 2-14: How to add a splash screen to a project
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

34. Splash Screens (cont'd.)
Figure 2-15: Completed Add New Item dialog box
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

35. Splash Screens (cont'd.)
Figure 2-16: Splash screen created by the Splash Screen template
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

36. Splash Screens (cont'd.)
Must specify the startup form to be shown first when the application starts
Use the Project Designer window to specify the startup form’s name
Can also specify a splash screen
Use the Project Designer window to specify the splash screen name
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

37. Splash Screens (cont'd.)
Figure 2-17: How to specify the splash screen
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

38. Splash Screens (cont'd.)
Figure 2-18: Project Designer window
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

39. Splash Screens (cont'd.)
Figure 2-19: SplashScreenForm during run time
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

40. Splash Screens (cont'd.)
Figure 2-20: Assembly Information dialog box
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

41. Dialog Boxes
Primary window: a main window that 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 2010: Reloaded, Fourth Edition

42. Dialog Boxes (cont'd.)
Figure 2-21: Primary window and Font dialog box in Notepad
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

43. Dialog Boxes (cont'd.)
Use the Dialog template, or use a form to create dialog boxes
FormBorderStyle property:
Sets border style
Use FixedDialog setting for dialog boxes
MinimizeBox property and MaximizeBox property control the existence of Minimize and Maximize buttons
Remove Minimize and Maximize buttons for dialog boxes
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

44. Dialog Boxes (cont’d.)
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
They are placed in the component tray in the IDE
Component tray stores controls that do not appear in the user interface during run time
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

45. Dialog Boxes (cont’d.)
Figure 2-22: Font and Color dialog box controls in the component tray
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

46. Dialog Boxes (cont’d.) 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
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

47. Dialog Boxes (cont’d.)
Figure 2-23: Code entered in the Font button’s Click event procedure
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

48. Dialog Boxes (cont’d.)
Figure 2-24: Font dialog box created by the FontDialog tool
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

49. Dialog Boxes (cont’d.)
Figure 2-25: Code entered in the Color button’s Click event procedure
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

50. Dialog Boxes (cont’d.)
Figure 2-26: Color dialog box created by the ColorDialog tool
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

51. 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
Most dialog boxes have a default button and a cancel button specified
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

52. Designating the Default Button on a Form
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)
Default button has a darkened border during design time and run time
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

53. Designating the Default Button on a Form
Figure 2-27: Default button during design time
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

54. Printing an Interface During Run Time
PrintForm tool: prints an interface during run time
Contained in the Visual Basic PowerPacks section of the toolbox
Control appears in the Component tray
Print Preview button sends output to the Print Preview window
Print button sends output directly to the printer
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

55. Printing an Interface During Run Time (cont’d.)
Figure 2-28: PrintForm Examples interface
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

56. Printing an Interface During Run Time (cont’d.)
Figure 2-29: Code entered in the Click event procedures
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

57. Playing Audio Files
My feature: exposes a set of commonly used objects to the programmer
Use the My keyword in code
Computer object: represents your computer
Provides access to other objects, such as the Audio object
Use the Play method of the Audio object to play an audio file
Arguments: information supplied to a method when it is called
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

58. Playing Audio Files (cont’d.)
Figure 2-30: How to play an audio file
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

59. Programming Tutorial 1
Figure 2-40: Result of clicking each color buttons
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

60. Programming Tutorial 2
Figure 2-47: MainForm for the Music Sampler application
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

61. Programming Example Figure 2-57: User interface
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

62. Summary Plan the application jointly with the user
Identify tasks, objects, and events and then build the interface
Use a TOE chart to record an application’s tasks, objects, and events
Textbox control: allows user to enter data
Align controls to flow horizontally or vertically
Group related controls visually with white space or container controls, and maintain consistent margins
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

63. Summary (cont'd.)
Identifying labels should be left-aligned, positioned above or to the left of the text box, and contain a colon (:)
Use meaningful labels with captions of one to three words in sentence capitalization
Button captions should use book title capitalization
Buttons should be same height; if stacked vertically, should be same width
Align borders of controls horizontally and vertically wherever possible
Use graphics and colors sparingly
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

64. Summary (cont'd.)
Avoid italics and underlining, and limit bold text to titles, headings, and key items
Use Segoe UI font type for applications running on Windows Vista or Windows 7
Identifying labels should have BorderStyle = None and AutoSize = True
Output labels should have BorderStyle = FixedSingle and AutoSize = False
Assign access keys to controls that accept input
Use TabIndex property to control where the focus goes when Tab key or an access key is used
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

65. Summary (cont'd.)
Use Add New Item dialog box to add a splash screen to an application
Specify the splash screen as the startup form in the Project Designer window
Primary window: where the primary viewing and editing of the application’s data takes place
Dialog window: supports the primary window
FormBorderStyle property: specifies border style of a primary window or dialog box
Microsoft Visual Basic 2010: Reloaded, Fourth Edition

66. Summary (cont'd.)
Use MinimizeBox and MaximizeBox properties to control whether Minimize and Maximize buttons appear dimmed on a form
AcceptButton property designates which button on a form is activated with the Enter key
Visual Basic PowerPacks section of the toolbox provides the PrintForm tool for printing the interface during run time
Use the Play method of the My.Computer.Audio object to play an audio file during run time
Microsoft Visual Basic 2010: Reloaded, Fourth Edition