1 / 66

Microsoft Visual Basic 2010: Reloaded Fourth Edition

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

adler
Download Presentation

Microsoft Visual Basic 2010: Reloaded Fourth Edition

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Microsoft Visual Basic 2010: ReloadedFourth 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 • 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: • 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

More Related