microsoft visual basic 2010: reloaded fourth edition chapter two creating a user interface

Microsoft Visual Basic 2010: Reloaded Fourth Edition

Chapter TwoCreating 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

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

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


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



Planning an Application (cont'd.)

Figure 2-1: How to plan an application

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



Identifying the Application’s Tasks

Figure 2-2: Current order form used by Sunshine Cellular

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 8


Figure 2-3: Tasks entered in a TOE chart

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



Figure 2-4: Tasks and objects entered in a TOE chart

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



Figure 2-5: Completed TOE chart ordered by task

Identifying the Events (cont'd.)


Figure 2-6: Completed TOE chart ordered by object

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


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


Arranging the Controls (cont'd.)


Figure 2-7: Vertical arrangement of the Sunshine Cellular interface



Figure 2-8: Horizontal arrangement of the Sunshine Cellular interface


• 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



• 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



• 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



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

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


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


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


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


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


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


Setting the TabIndex Property (cont'd.)


Figure 2-11: How to set the TabIndex property using the Tab Order option

Setting the TabIndex Property (cont'd.)


Figure 2-12: Correct TabIndex values

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


Splash Screens (cont’d.)


Figure 2-13: Visual Studio 2010 splash screen

Splash Screens (cont’d.)


Figure 2-14: How to add a splash screen to a project

Splash Screens (cont'd.)


Figure 2-15: Completed Add New Item dialog box



Figure 2-16: Splash screen created by the Splash Screen template


• 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




Figure 2-17: How to specify the splash screen



Figure 2-18: Project Designer window



Figure 2-19: SplashScreenForm during run time



Figure 2-20: Assembly Information dialog box

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


Dialog Boxes (cont'd.)


Figure 2-21: Primary window and Font dialog box in Notepad

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


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




Figure 2-22: Font and Color dialog box controls in the component tray


• 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




Figure 2-23: Code entered in the Font button’s Click event procedure



Figure 2-24: Font dialog box created by the FontDialog tool



Figure 2-25: Code entered in the Color button’s Click event procedure



Figure 2-26: Color dialog box created by the ColorDialog tool


• Default button: activated when user presses Enter key when the button does not have the focus

• Cancel button: activated when user presses Esc key when the button does not have the focus

• Most dialog boxes have a default button and a cancel button specified


Designating the Default Button on a Form

• AcceptButton property: – A form property that designates the name of the

default button– Only one per form– Should be the button that is most often selected by the

user (unless the tasks performed by this button are both destructive and irreversible)

• Default button has a darkened border during design time and run time


Designating the Default Button on a Form


Figure 2-27: Default button during design time

Printing an Interface During Run Time

• PrintForm tool: prints an interface during run time– Contained in the Visual Basic PowerPacks section of

the toolbox– Control appears in the Component tray

• Print Preview button sends output to the Print Preview window

• Print button sends output directly to the printer


Printing an Interface During Run Time (cont’d.)


Figure 2-28: PrintForm Examples interface

Printing an Interface During Run Time (cont’d.)


Figure 2-29: Code entered in the Click event procedures

Playing Audio Files

• My feature: exposes a set of commonly used objects to the programmer– Use the My keyword in code

• Computer object: represents your computer– Provides access to other objects, such as the Audio

object

• Use the Play method of the Audio object to play an audio file

• Arguments: information supplied to a method when it is called


Playing Audio Files (cont’d.)


Figure 2-30: How to play an audio file

Programming Tutorial 1


Figure 2-40: Result of clicking each color buttons

Programming Tutorial 2


Figure 2-47: MainForm for the Music Sampler application

Programming Example


Figure 2-57: User interface

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

• Align controls to flow horizontally or vertically

• Group related controls visually with white space or container controls, and maintain consistent margins


Summary (cont'd.)

• 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

• Align borders of controls horizontally and vertically wherever possible

• Use graphics and colors sparinglyMicrosoft Visual Basic 2010: Reloaded, Fourth Edition 63

Summary (cont'd.)

• Avoid italics and underlining, and limit bold text to titles, headings, and key items

• Use Segoe UI font type for applications running on Windows Vista or Windows 7

• Identifying labels should have BorderStyle = None and AutoSize = True

• Output labels should have BorderStyle = FixedSingle and AutoSize = False

• Assign access keys to controls that accept input

• Use TabIndex property to control where the focus goes when Tab key or an access key is used



Summary (cont'd.)

• 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

• Primary window: where the primary viewing and editing of the application’s data takes place

• Dialog window: supports the primary window

• FormBorderStyle property: specifies border style of a primary window or dialog box

Summary (cont'd.)

• Use MinimizeBox and MaximizeBox properties to control whether Minimize and Maximize buttons appear dimmed on a form

• AcceptButton property designates which button on a form is activated with the Enter key

• Visual Basic PowerPacks section of the toolbox provides the PrintForm tool for printing the interface during run time

• Use the Play method of the My.Computer.Audio object to play an audio file during run time


microsoft visual basic 2010: reloaded fourth edition chapter two creating a user interface

Documents

application slide

user interface slide

task slide

toe chart slide

edition10 slide

edition12 slide

edition2 slide

edition6 slide