Microsoft Visual Basic 2008: Reloaded Third Edition

1. Microsoft Visual Basic 2008: Reloaded Third Edition Chapter Two 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 and table layout panel 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 2008: Reloaded, Third Edition 2

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 Add a splash screen to a project Microsoft Visual Basic 2008: Reloaded, Third Edition 3

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 2008: Reloaded, Third Edition 4

5. Microsoft Visual Basic 2008: Reloaded, Third Edition 5 Planning an Application (continued)

6. Sunshine Cellular Company Sunshine Cellular Company: Takes orders by phone for cell phones priced at $100 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 2008: Reloaded, Third Edition 6

7. Microsoft Visual Basic 2008: Reloaded, Third Edition 7 Identifying the Application’s Tasks

8. Identifying the Application’s Tasks (continued) First, review current user procedures and forms Ask these questions: What information must be displayed on screen 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 2008: Reloaded, Third Edition 8

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

10. Identifying the Application’s Tasks (continued) Microsoft Visual Basic 2008: Reloaded, Third Edition 10

11. Identifying the Objects Assign each task to an object in the user interface Text box: a control that allows the user to input information Use a button to initiate the calculations Use labels to guide the user Microsoft Visual Basic 2008: Reloaded, Third Edition 11

12. Microsoft Visual Basic 2008: Reloaded, Third Edition 12

13. 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 2008: Reloaded, Third Edition 13

14. Microsoft Visual Basic 2008: Reloaded, Third Edition 14

15. Identifying the Events (continued) Microsoft Visual Basic 2008: Reloaded, Third Edition 15

16. Designing the User Interface Next step is to design 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 2008: Reloaded, Third Edition 16

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

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 2008: Reloaded, Third Edition 18

19. Designing the User Interface (continued) Use form 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 Dialog boxes: Set FormBorderStyle to FixedDialog Remove Minimize and Maximize buttons Microsoft Visual Basic 2008: Reloaded, Third Edition 19

20. Designing the User Interface (continued) Splash screen: first image to appear when the application is started Set FormBorderStyle to FixedSingle Set ControlBox property to false to remove Close, Minimize, and Maximize buttons Can delete Text property value to remove the entire title bar Microsoft Visual Basic 2008: Reloaded, Third Edition 20

21. Designing the User Interface (continued) Microsoft Visual Basic 2008: Reloaded, Third Edition 21

22. Arranging the Controls Design guidelines: Information should flow either vertically or horizontally 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 2008: Reloaded, Third Edition 22

23. Arranging the Controls (continued) Microsoft Visual Basic 2008: Reloaded, Third Edition 23

24. Arranging the Controls (continued) Microsoft Visual Basic 2008: Reloaded, Third Edition 24

25. Arranging the Controls (continued) 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 labels for identifying labels Microsoft Visual Basic 2008: Reloaded, Third Edition 25

26. Arranging the Controls (continued) 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 2008: Reloaded, Third Edition 26

27. Arranging the Controls (continued) 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 2008: Reloaded, Third Edition 27

28. Microsoft Visual Basic 2008: Reloaded, Third Edition 28

29. 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 Recommended font is Segoe UI for 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 what is set for the form Microsoft Visual Basic 2008: Reloaded, Third Edition 29

30. 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 2008: Reloaded, Third Edition 30

31. 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 2008: Reloaded, Third Edition 31

32. 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 2008: Reloaded, Third Edition 32

33. Setting the TabIndex Property 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 2008: Reloaded, Third Edition 33

34. Microsoft Visual Basic 2008: Reloaded, Third Edition 34

35. Setting the TabIndex Property (continued) Microsoft Visual Basic 2008: Reloaded, Third Edition 35

36. Setting the TabIndex Property (continued) Microsoft Visual Basic 2008: Reloaded, Third Edition 36

37. Designating Default and Cancel Buttons Default button: activated when user presses Enter key AcceptButton property: A form property that designates the name of the default button Only one per form Cancel button: activated when user presses Esc key CancelButton property: Form property that designates name of cancel button Only one per form Microsoft Visual Basic 2008: Reloaded, Third Edition 37

38. Designating Default and Cancel Buttons (continued) Microsoft Visual Basic 2008: Reloaded, Third Edition 38

39. Adding a Splash Screen to a Project Microsoft Visual Basic 2008: Reloaded, Third Edition 39

40. Adding a Splash Screen to a Project (continued) Microsoft Visual Basic 2008: Reloaded, Third Edition 40

41. Adding a Splash Screen to a Project (continued) 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 Startup form is often a splash screen Microsoft Visual Basic 2008: Reloaded, Third Edition 41

42. Adding a Splash Screen to a Project (continued) Microsoft Visual Basic 2008: Reloaded, Third Edition 42

43. Adding a Splash Screen to a Project (continued) Microsoft Visual Basic 2008: Reloaded, Third Edition 43

44. Programming Tutorial Microsoft Visual Basic 2008: Reloaded, Third Edition 44

45. Programming Example Microsoft Visual Basic 2008: Reloaded, Third Edition 45

46. 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 Primary window: where the primary viewing and editing of the application’s data takes place Dialog window: supports the primary window Microsoft Visual Basic 2008: Reloaded, Third Edition 46

47. Summary (continued) Primary windows can be resized, minimized, maximized, and closed by the user, while dialog boxes can only be closed FormBorderStyle property: specifies border style of a primary window or dialog box Use MinimizeBox and MaximizeBox properties to control whether Minimize and Maximize buttons appear dimmed on a form Set the ControlBox property to false on a splash screen Microsoft Visual Basic 2008: Reloaded, Third Edition 47

48. Summary (continued) Align controls to flow horizontally or vertically Group related controls visually with white space or container controls, and maintain consistent margins 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 Microsoft Visual Basic 2008: Reloaded, Third Edition 48

49. Summary (continued) Align borders of controls horizontally and vertically wherever possible Use graphics and colors sparingly Use Segoe UI font type for applications running on Vista Avoid italics and underlining, and limit bold text to titles, headings, and key items Use TabIndex property to control where the focus goes when Tab key or an access key is used Microsoft Visual Basic 2008: Reloaded, Third Edition 49

50. Microsoft Visual Basic 2008: Reloaded, Third Edition 50 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 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