Microsoft Visual Basic 2010 Reloaded Fourth Edition Chapter
Microsoft Visual Basic 2010: Reloaded Fourth Edition Chapter Two Creating a User Interface
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
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
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
Planning an Application (cont'd. ) Figure 2 -1: How to plan an application Microsoft Visual Basic 2010: Reloaded, Fourth Edition 5
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
Identifying the Application’s Tasks Figure 2 -2: Current order form used by Sunshine Cellular Microsoft Visual Basic 2010: Reloaded, Fourth Edition 7
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
Figure 2 -3: Tasks entered in a TOE chart Microsoft Visual Basic 2010: Reloaded, Fourth Edition 9
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
Figure 2 -4: Tasks and objects entered in a TOE chart Microsoft Visual Basic 2010: Reloaded, Fourth Edition 11
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
Figure 2 -5: Completed TOE chart ordered by task Microsoft Visual Basic 2010: Reloaded, Fourth Edition 13
Identifying the Events (cont'd. ) Figure 2 -6: Completed TOE chart ordered by object Microsoft Visual Basic 2010: Reloaded, Fourth Edition 14
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
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
Arranging the Controls (cont'd. ) Figure 2 -7: Vertical arrangement of the Sunshine Cellular interface Microsoft Visual Basic 2010: Reloaded, Fourth Edition 17
Arranging the Controls (cont'd. ) Figure 2 -8: Horizontal arrangement of the Sunshine Cellular interface Microsoft Visual Basic 2010: Reloaded, Fourth Edition 18
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
Arranging the Controls (cont'd. ) • Sentence capitalization: capitalize first letter in first word 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
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
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 22
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
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
Borders and Sizing of Controls • Border. Style property: determines the style of a control’s border – Settings: None, Fixed. Single, Fixed 3 D • Identifying labels should be set to None • Labels that display output should be set to Fixed. Single • Auto. Size property: determines if a label control automatically sizes to fit its current contents Microsoft Visual Basic 2010: Reloaded, Fourth Edition 25
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
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 Microsoft Visual Basic 2010: Reloaded, Fourth Edition 27
Controlling the Tab Order • Tab. Index 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 Tab. Index using the Properties window or the Tab Order option on the View menu Microsoft Visual Basic 2010: Reloaded, Fourth Edition 28
Setting the Tab. Index Property (cont'd. ) Figure 2 -11: How to set the Tab. Index property using the Tab Order option Microsoft Visual Basic 2010: Reloaded, Fourth Edition 29
Setting the Tab. Index Property (cont'd. ) Figure 2 -12: Correct Tab. Index values Microsoft Visual Basic 2010: Reloaded, Fourth Edition 30
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
Splash Screens (cont’d. ) Figure 2 -13: Visual Studio 2010 splash screen Microsoft Visual Basic 2010: Reloaded, Fourth Edition 32
Splash Screens (cont’d. ) Figure 2 -14: How to add a splash screen to a project Microsoft Visual Basic 2010: Reloaded, Fourth Edition 33
Splash Screens (cont'd. ) Figure 2 -15: Completed Add New Item dialog box Microsoft Visual Basic 2010: Reloaded, Fourth Edition 34
Splash Screens (cont'd. ) Figure 2 -16: Splash screen created by the Splash Screen template Microsoft Visual Basic 2010: Reloaded, Fourth Edition 35
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
Splash Screens (cont'd. ) Figure 2 -17: How to specify the splash screen Microsoft Visual Basic 2010: Reloaded, Fourth Edition 37
Splash Screens (cont'd. ) Figure 2 -18: Project Designer window Microsoft Visual Basic 2010: Reloaded, Fourth Edition 38
Splash Screens (cont'd. ) Figure 2 -19: Splash. Screen. Form during run time Microsoft Visual Basic 2010: Reloaded, Fourth Edition 39
Splash Screens (cont'd. ) Figure 2 -20: Assembly Information dialog box Microsoft Visual Basic 2010: Reloaded, Fourth Edition 40
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
Dialog Boxes (cont'd. ) Figure 2 -21: Primary window and Font dialog box in Notepad Microsoft Visual Basic 2010: Reloaded, Fourth Edition 42
Dialog Boxes (cont'd. ) • Use the Dialog template, or use a form to create dialog boxes • Form. Border. Style property: – Sets border style – Use Fixed. Dialog setting for dialog boxes • Minimize. Box property and Maximize. Box 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
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
Dialog Boxes (cont’d. ) Figure 2 -22: Font and Color dialog box controls in the component tray Microsoft Visual Basic 2010: Reloaded, Fourth Edition 45
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
Dialog Boxes (cont’d. ) Figure 2 -23: Code entered in the Font button’s Click event procedure Microsoft Visual Basic 2010: Reloaded, Fourth Edition 47
Dialog Boxes (cont’d. ) Figure 2 -24: Font dialog box created by the Font. Dialog tool Microsoft Visual Basic 2010: Reloaded, Fourth Edition 48
Dialog Boxes (cont’d. ) Figure 2 -25: Code entered in the Color button’s Click event procedure Microsoft Visual Basic 2010: Reloaded, Fourth Edition 49
Dialog Boxes (cont’d. ) Figure 2 -26: Color dialog box created by the Color. Dialog tool Microsoft Visual Basic 2010: Reloaded, Fourth Edition 50
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
Designating the Default Button on a Form • Accept. Button 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
Designating the Default Button on a Form Figure 2 -27: Default button during design time Microsoft Visual Basic 2010: Reloaded, Fourth Edition 53
Printing an Interface During Run Time • Print. Form tool: prints an interface during run time – Contained in the Visual Basic Power. Packs 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
Printing an Interface During Run Time (cont’d. ) Figure 2 -28: Print. Form Examples interface Microsoft Visual Basic 2010: Reloaded, Fourth Edition 55
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 56
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
Playing Audio Files (cont’d. ) Figure 2 -30: How to play an audio file Microsoft Visual Basic 2010: Reloaded, Fourth Edition 58
Programming Tutorial 1 Figure 2 -40: Result of clicking each color buttons Microsoft Visual Basic 2010: Reloaded, Fourth Edition 59
Programming Tutorial 2 Figure 2 -47: Main. Form for the Music Sampler application Microsoft Visual Basic 2010: Reloaded, Fourth Edition 60
Programming Example Figure 2 -57: User interface Microsoft Visual Basic 2010: Reloaded, Fourth Edition 61
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
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 63
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 Border. Style = None and Auto. Size = True • Output labels should have Border. Style = Fixed. Single and Auto. Size = False • Assign access keys to controls that accept input • Use Tab. Index property to control where the focus goes when Tab key or an access key is used Microsoft Visual Basic 2010: Reloaded, Fourth Edition 64
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 • Form. Border. Style property: specifies border style of a primary window or dialog box Microsoft Visual Basic 2010: Reloaded, Fourth Edition 65
Summary (cont'd. ) • Use Minimize. Box and Maximize. Box properties to control whether Minimize and Maximize buttons appear dimmed on a form • Accept. Button property designates which button on a form is activated with the Enter key • Visual Basic Power. Packs section of the toolbox provides the Print. Form 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
- Slides: 66