Microsoft Visual Basic 2005: Reloaded Second Edition

1
Microsoft Visual Basic 2005 Reloaded Second
Edition

• Chapter 2
• 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, 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
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
Planning an Application
5
Planning an Application (continued)

• Plan the application before creating the user
  interface
• Work jointly with the user
• TOE (Task, Object, Event) chart
• Shows applications tasks, objects, and events
• Tasks, objects, and events should be identified
  in the first 3 steps of planning

6
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
Identifying the Applications Tasks
8
Identifying the Applications 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
Identifying the Applications Tasks (continued)
10
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
Identifying the Objects (continued)
12
Identifying the Objects (continued)
13
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
Identifying the Events (continued)
15
Identifying the Events (continued)
16
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 users activities in the primary
  window

17
Designing the User Interface (continued)
18
Designing the User Interface (continued)

• Primary windows can be resized, minimized,
  maximized, and closed by the user
• Primary windows title bar includes
• Minimize, Maximize, and Close buttons on the
  right
• Control menu on the left
• Dialog boxes can be closed only
• Dialog boxs title bar includes
• Close button and optionally a Help button
• No control menu

19
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
Designing the User Interface (continued)
21
Designing the User Interface (continued)
22
Designing the User Interface (continued)
23
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
Arranging the Controls (continued)
25
Arranging the Controls (continued)
26
Arranging the Controls (continued)
27
Arranging the Controls (continued)
28
Arranging the Controls (continued)
29
Arranging the Controls (continued)

• More guidelines
• Use a label with each text box
• Left-align the labels 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
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
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
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
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
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
Including Color in the User Interface

• Human eye is drawn to color before BW
• 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
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
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
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
Setting the TabIndex Property (continued)
40
Setting the TabIndex Property (continued)
41
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
Including Splash Screens and Dialog Boxes in an
Application
43
Including Splash Screens and Dialog Boxes in an
Application (continued)
44
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
Including Splash Screens and Dialog Boxes in an
Application (continued)
46
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
The Timer Tool (continued)
48
The Timer Tool (continued)
49
Programming Tutorial
50
Programming Example
51
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
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
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 forms Load event procedure executes code
  before the form is displayed