1. Microsoft Visual Basic 2005: Reloaded Second Edition Chapter 2 Creating a User Interface

2. Microsoft Visual Basic 2005: Reloaded, Second Edition2 Objectives After studying this chapter, you should be able to: Plan an application Complete a TOE chart Use a text box, table layout panel, and timer Explain the difference between a primary window and a dialog box Follow the Windows standards regarding the layout and labeling of controls

3. Microsoft Visual Basic 2005: Reloaded, Second Edition3 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 Explain the difference between a modal form and a modeless form Add a splash screen and a dialog box to an application

4. Microsoft Visual Basic 2005: Reloaded, Second Edition4 Planning an Application

5. Microsoft Visual Basic 2005: Reloaded, Second Edition5 Planning an Application (continued) Plan the application before creating the user interface Work jointly with the user TOE (Task, Object, Event) chart: –Shows application’s tasks, objects, and events Tasks, objects, and events should be identified in the first 3 steps of planning

6. Microsoft Visual Basic 2005: Reloaded, Second Edition6 Skate-Away Sales Skate-Away Sales: –Sells skateboards at $100 each –Two colors: blue and yellow –Currently the salespeople calculate the order total Develop an order-taking application for this company

7. Microsoft Visual Basic 2005: Reloaded, Second Edition7 Identifying the Application’s Tasks

8. Microsoft Visual Basic 2005: Reloaded, Second Edition8 Identifying the Application’s Tasks (continued) First, review current user procedures and forms Steps: –Identify the desired outputs –Identify the necessary inputs –Identify the processing needed to change the inputs into the outputs –Identify how the user will end the application –Identify the need to clear the screen between transactions

9. Microsoft Visual Basic 2005: Reloaded, Second Edition9 Identifying the Application’s Tasks (continued)

10. Microsoft Visual Basic 2005: Reloaded, Second Edition10 Identifying the Objects Assign each task to an object in the TOE TextBox tool: instantiates a text box control Text box: –Used to allow the user to input information Use buttons to initiate the calculations Use labels to guide the user

11. Microsoft Visual Basic 2005: Reloaded, Second Edition11 Identifying the Objects (continued)

12. Microsoft Visual Basic 2005: Reloaded, Second Edition12 Identifying the Objects (continued)

13. Microsoft Visual Basic 2005: Reloaded, Second Edition13 Identifying the Events 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

14. Microsoft Visual Basic 2005: Reloaded, Second Edition14 Identifying the Events (continued)

15. Microsoft Visual Basic 2005: Reloaded, Second Edition15 Identifying the Events (continued)

16. Microsoft Visual Basic 2005: Reloaded, Second Edition16 Designing 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

17. Microsoft Visual Basic 2005: Reloaded, Second Edition17 Designing the User Interface (continued)

18. Microsoft Visual Basic 2005: Reloaded, Second Edition18 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

19. Microsoft Visual Basic 2005: Reloaded, Second Edition19 Designing the User Interface (continued) Form object used 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 Splash screen: –Set FormBorderStyle to FixedSingle –Set ControlBox property to False to remove control menu

20. Microsoft Visual Basic 2005: Reloaded, Second Edition20 Designing the User Interface (continued)

21. Microsoft Visual Basic 2005: Reloaded, Second Edition21 Designing the User Interface (continued)

22. Microsoft Visual Basic 2005: Reloaded, Second Edition22 Designing the User Interface (continued)

23. Microsoft Visual Basic 2005: Reloaded, Second Edition23 Arranging the Controls Guidelines: –Information should flow either vertically or horizontally –Group related controls together using white space or container controls Container controls: –Group box control –Panel control –Table layout panel control

24. Microsoft Visual Basic 2005: Reloaded, Second Edition24 Arranging the Controls (continued)

25. Microsoft Visual Basic 2005: Reloaded, Second Edition25 Arranging the Controls (continued)

26. Microsoft Visual Basic 2005: Reloaded, Second Edition26 Arranging the Controls (continued)

27. Microsoft Visual Basic 2005: Reloaded, Second Edition27 Arranging the Controls (continued)

28. Microsoft Visual Basic 2005: Reloaded, Second Edition28 Arranging the Controls (continued)

29. Microsoft Visual Basic 2005: Reloaded, Second Edition29 Arranging the Controls (continued) More guidelines: –Use a label with 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 1 to 3 words only, and appear on one line –Labels and captions should be meaningful –Use sentence capitalization for labels

30. Microsoft Visual Basic 2005: Reloaded, Second Edition30 Arranging the Controls (continued) Sentence capitalization: –Only first letter in the first word is usually capitalized Book title capitalization: –First letter in each word is capitalized (except articles, conjunctions and prepositions)

31. Microsoft Visual Basic 2005: Reloaded, Second Edition31 Arranging the Controls (continued) More guidelines: –Maintain a consistent margin from all edges of the form –Size buttons relative to each other –Minimize the number of different margins by aligning control borders where possible –Interface should not distract the user from doing the work

32. Microsoft Visual Basic 2005: Reloaded, Second Edition32 Including Graphics in the User Interface Human eye is drawn to pictures before text Include graphics only if necessary –Use for aesthetic purposes –Use to clarify a portion of the screen

33. Microsoft Visual Basic 2005: Reloaded, Second Edition33 Including Different Fonts in the User Interface Font property: used to change the type, style, and size of the font Font: –General shape of characters in text –Size is measured in points Point: 1/72 of an inch Serif: a light cross stroke at top or bottom of a character Sans serif fonts: do not have the cross strokes

34. Microsoft Visual Basic 2005: Reloaded, Second Edition34 Including Different Fonts in the User Interface (continued) Guidelines: –Use sans serif fonts on screens –Use only one font type for the text in a form –12-point font is easiest to read at high screen resolution –Avoid italics and underlining –Use bold only for titles, headings, and key terms

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

36. Microsoft Visual Basic 2005: Reloaded, Second Edition36 Assigning Access Keys Access key: –Allows user to select an object using Alt + access key –Appears underlined on the button caption –Is not case-sensitive Guidelines: –Assign access keys to each control that can accept user input –Exceptions: OK and Cancel buttons

37. Microsoft Visual Basic 2005: Reloaded, Second Edition37 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

38. Microsoft Visual Basic 2005: Reloaded, Second Edition38 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 Focus: the state of being able to accept user input Default TabIndex values are set according to the order in which the controls were added to the form

39. Microsoft Visual Basic 2005: Reloaded, Second Edition39 Setting the TabIndex Property (continued)

40. Microsoft Visual Basic 2005: Reloaded, Second Edition40 Setting the TabIndex Property (continued)

41. Microsoft Visual Basic 2005: Reloaded, Second Edition41 Designating Default and Cancel Buttons Default button: activated when user presses Enter key AcceptButton property: –A form property –Designates the name of the default button Cancel button: activated when user presses Esc key CancelButton property: –A form property –Designates the name of the cancel button

42. Microsoft Visual Basic 2005: Reloaded, Second Edition42 Including Splash Screens and Dialog Boxes in an Application

43. Microsoft Visual Basic 2005: Reloaded, Second Edition43 Including Splash Screens and Dialog Boxes in an Application (continued)

44. Microsoft Visual Basic 2005: Reloaded, Second Edition44 Including Splash Screens and Dialog Boxes in an Application (continued) Show method: displays a form as a modeless form Modeless form: –Can remain displayed while user uses other forms ShowDialog method: displays a form as a modal form Modal form: –Requires user to take action in the form –Rest of the application is not usable until the modal form is closed

45. Microsoft Visual Basic 2005: Reloaded, Second Edition45 Including Splash Screens and Dialog Boxes in an Application (continued)

46. Microsoft Visual Basic 2005: Reloaded, Second Edition46 The Timer Tool Timer tool: instantiates a Timer control Timer control: processes code at one or more regular intervals, specified by Interval property Tick event: occurs after each interval has elapsed Timer control does not appear on the form, but in the component tray Component tray: area in the IDE that stores all controls that do not appear in the user interface at runtime

47. Microsoft Visual Basic 2005: Reloaded, Second Edition47 The Timer Tool (continued)

48. Microsoft Visual Basic 2005: Reloaded, Second Edition48 The Timer Tool (continued)

49. Microsoft Visual Basic 2005: Reloaded, Second Edition49 Programming Tutorial

50. Microsoft Visual Basic 2005: Reloaded, Second Edition50 Programming Example

51. Microsoft Visual Basic 2005: Reloaded, Second Edition51 Summary Plan the application jointly with the user Identify tasks, objects, and events, and build a TOE chart Textbox control: allows user to enter text Primary window: where most of the user interfacing takes place Dialog window: used to support the primary window Follow Windows standards for GUI design

52. Microsoft Visual Basic 2005: Reloaded, Second Edition52 Summary (continued) Align controls to flow horizontally or vertically Group related controls visually with white space or container controls, and maintain consistent margins Use meaningful labels and captions of 1-3 words Use graphics and colors sparingly Use sans serif font types for readability Use TabIndex property to control where the focus goes when Tab key is used

53. Microsoft Visual Basic 2005: Reloaded, Second Edition53 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 Show method shows a form modeless ShowDialog method shows a form modally Timer control allows execution of code at specified intervals A form’s Load event procedure executes code before the form is displayed