Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.
-
Upload
melvin-hunter -
Category
Documents
-
view
223 -
download
0
Transcript of Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.
![Page 1: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/1.jpg)
Microsoft Visual Basic 2010: Reloaded Fourth Edition
Chapter TwoCreating a User Interface
![Page 2: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/2.jpg)
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 2
![Page 3: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/3.jpg)
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 3
![Page 4: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/4.jpg)
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 4
![Page 5: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/5.jpg)
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 5
Planning an Application (cont'd.)
Figure 2-1: How to plan an application
![Page 6: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/6.jpg)
Sunshine Cellular Company
• 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 6
![Page 7: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/7.jpg)
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 7
Identifying the Application’s Tasks
Figure 2-2: Current order form used by Sunshine Cellular
![Page 8: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/8.jpg)
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 8
![Page 9: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/9.jpg)
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 9
Figure 2-3: Tasks entered in a TOE chart
![Page 10: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/10.jpg)
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 10
![Page 11: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/11.jpg)
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 11
Figure 2-4: Tasks and objects entered in a TOE chart
![Page 12: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/12.jpg)
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 12
![Page 13: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/13.jpg)
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 13
Figure 2-5: Completed TOE chart ordered by task
![Page 14: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/14.jpg)
Identifying the Events (cont'd.)
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 14
Figure 2-6: Completed TOE chart ordered by object
![Page 15: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/15.jpg)
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 15
![Page 16: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/16.jpg)
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 16
![Page 17: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/17.jpg)
Arranging the Controls (cont'd.)
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 17
Figure 2-7: Vertical arrangement of the Sunshine Cellular interface
![Page 18: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/18.jpg)
Arranging the Controls (cont'd.)
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 18
Figure 2-8: Horizontal arrangement of the Sunshine Cellular interface
![Page 19: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/19.jpg)
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 19
![Page 20: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/20.jpg)
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 20
![Page 21: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/21.jpg)
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 21
![Page 22: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/22.jpg)
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
![Page 23: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/23.jpg)
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 23
![Page 24: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/24.jpg)
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 24
![Page 25: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/25.jpg)
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 25
![Page 26: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/26.jpg)
Assigning Access Keys
• Access key: – 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 26
![Page 27: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/27.jpg)
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 27
![Page 28: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/28.jpg)
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 28
![Page 29: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/29.jpg)
Setting the TabIndex Property (cont'd.)
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 29
Figure 2-11: How to set the TabIndex property using the Tab Order option
![Page 30: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/30.jpg)
Setting the TabIndex Property (cont'd.)
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 30
Figure 2-12: Correct TabIndex values
![Page 31: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/31.jpg)
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 31
![Page 32: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/32.jpg)
Splash Screens (cont’d.)
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 32
Figure 2-13: Visual Studio 2010 splash screen
![Page 33: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/33.jpg)
Splash Screens (cont’d.)
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 33
Figure 2-14: How to add a splash screen to a project
![Page 34: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/34.jpg)
Splash Screens (cont'd.)
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 34
Figure 2-15: Completed Add New Item dialog box
![Page 35: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/35.jpg)
Splash Screens (cont'd.)
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 35
Figure 2-16: Splash screen created by the Splash Screen template
![Page 36: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/36.jpg)
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 36
![Page 37: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/37.jpg)
Splash Screens (cont'd.)
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 37
Figure 2-17: How to specify the splash screen
![Page 38: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/38.jpg)
Splash Screens (cont'd.)
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 38
Figure 2-18: Project Designer window
![Page 39: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/39.jpg)
Splash Screens (cont'd.)
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 39
Figure 2-19: SplashScreenForm during run time
![Page 40: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/40.jpg)
Splash Screens (cont'd.)
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 40
Figure 2-20: Assembly Information dialog box
![Page 41: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/41.jpg)
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 41
![Page 42: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/42.jpg)
Dialog Boxes (cont'd.)
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 42
Figure 2-21: Primary window and Font dialog box in Notepad
![Page 43: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/43.jpg)
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 43
![Page 44: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/44.jpg)
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 44
![Page 45: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/45.jpg)
Dialog Boxes (cont’d.)
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 45
Figure 2-22: Font and Color dialog box controls in the component tray
![Page 46: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/46.jpg)
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 46
![Page 47: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/47.jpg)
Dialog Boxes (cont’d.)
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 47
Figure 2-23: Code entered in the Font button’s Click event procedure
![Page 48: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/48.jpg)
Dialog Boxes (cont’d.)
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 48
Figure 2-24: Font dialog box created by the FontDialog tool
![Page 49: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/49.jpg)
Dialog Boxes (cont’d.)
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 49
Figure 2-25: Code entered in the Color button’s Click event procedure
![Page 50: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/50.jpg)
Dialog Boxes (cont’d.)
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 50
Figure 2-26: Color dialog box created by the ColorDialog tool
![Page 51: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/51.jpg)
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 51
![Page 52: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/52.jpg)
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 52
![Page 53: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/53.jpg)
Designating the Default Button on a Form
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 53
Figure 2-27: Default button during design time
![Page 54: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/54.jpg)
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 54
![Page 55: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/55.jpg)
Printing an Interface During Run Time (cont’d.)
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 55
Figure 2-28: PrintForm Examples interface
![Page 56: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/56.jpg)
Printing an Interface During Run Time (cont’d.)
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 56
Figure 2-29: Code entered in the Click event procedures
![Page 57: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/57.jpg)
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 57
![Page 58: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/58.jpg)
Playing Audio Files (cont’d.)
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 58
Figure 2-30: How to play an audio file
![Page 59: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/59.jpg)
Programming Tutorial 1
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 59
Figure 2-40: Result of clicking each color buttons
![Page 60: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/60.jpg)
Programming Tutorial 2
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 60
Figure 2-47: MainForm for the Music Sampler application
![Page 61: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/61.jpg)
Programming Example
Microsoft Visual Basic 2010: Reloaded, Fourth Edition 61
Figure 2-57: User interface
![Page 62: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/62.jpg)
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 62
![Page 63: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/63.jpg)
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 sparinglyMicrosoft Visual Basic 2010: Reloaded, Fourth Edition 63
![Page 64: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/64.jpg)
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 64
![Page 65: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/65.jpg)
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
![Page 66: Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface.](https://reader031.fdocuments.net/reader031/viewer/2022032704/56649d825503460f94a6784e/html5/thumbnails/66.jpg)
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 66