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

Microsoft Visual Basic 2005: Reloaded

Second Edition

Chapter 2Creating a User Interface

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


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


Planning an Application


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


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


Identifying the Application’s Tasks


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


Identifying the Application’s Tasks (continued)


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


Identifying the Objects (continued)


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


Identifying the Events (continued)


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


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



• 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


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


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



• 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)



• 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


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


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


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


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


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


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


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


Setting the TabIndex Property (continued)


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


Including Splash Screens and Dialog Boxes in an Application


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


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


The Timer Tool (continued)


Programming Tutorial


Programming Example


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


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


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

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

Documents

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