VB6-Ch4

Chapter 4Enhancing the Graphical User

Interface

Multiple Forms, Controls, and

Menus

4

Exploring Microsoft Visual Basic 6.0Copyright © 1999 Prentice-Hall, Inc.

By Carlotta Eaton

Exploring MS Visual Basic 6

Copyright 1999 Prentice-Hall, Inc. 2

Objectives

1. How to design a good user interface2. Use Toolbox tools to create and modify

forms and controls3. Multiple Document Interface (MDI) vs.

Single Document Interface (SDI) vs. Explorer-style interface

4. Create input features such as text boxes, labels and command buttons



Objectives

5. Include graphics using picture box or image controls

6. Create a Graphical User Interface with menus

7. Include file management features using drive list boxes, directory list boxes and file list boxes

8. Include frames, check boxes, option buttons, combo boxes, and list boxes



Designing the GUI

Interface StylesMultiple Document Interface (MDI)Single Document Interface (SDI)Explorer-style interface



Multiple Document Interface

Parent Form

Child Form

Child Form



Single Document Interface

Independent Form

Independent Form



Explorer-style interface

Left pane browsing controls

Right pane detailed view



Five Principles of GUI Design

Principle 1: Know Your End UserPrinciple 2: Be ConsistentPrinciple 3: Show and Use Informative

Graphics and MessagesPrinciple 4: Keep It SimplePrinciple 5: Let the User Control the

Application



Principle 1: Know Your End User

Who is my audience?Will be used by children, adults or

both?What is reading level of users?If retired adults, use large font.Write down as much as you know

about your end user before beginning design.



Principle 2: Be Consistent

Use Windows Guidelines - Close button Windows standard fonts - Arial, Times

New Roman, and MS Sans Serif Establish font color and size, background

color, and foreground color Use menus and standard menu positions See Appendix D - Standard Menus for

Windows Applications



Principle 3: Show and Use Informative Graphics and

Messages

Show user, instead of tellingUse informative graphics, instead

of merely creative graphicsGraphics especially useful for

international applicationsGUI analogy - dashboard of carUse symbols, not words



Principle 4: Keep It Simple

KISS “Keep it simple sweetie”If interface looks difficult, it will be

hard to useUse several forms instead of a

single cluttered formGroup items, use tabbed formatSet default options for user



Principle 5: Let the User Control the Application

Conversation between computer and end user

Let end user decide tasks and orderProgrammer controls computer’s

responses to end user Visual Basic is event-driven so this

is relatively easy to achieve



Form Designer Grid

Twips - screen-independent unit

Pixels - picture elements, screen-dependent unit

See Appendix C - The Toolbox, Toolbars, and Controls



The Learning Arithmetic Project

Game to practice addition, subtraction, multiplication and division skills

Numbers from 0 to 9 Child in grade 3, 4 or 5 Give feedback to child Use Window

Calculator accessory as model



GUI Enhancement with the Learning Arithmetic Project

Hands-On Exercise 1 Use the Application Wizard Save your forms and project files Modify the Splash form Add the Calculator form Add the Bears form Write the Module code Run and test the project Debug your project Print your project and exit



The Toolbox

Intrinsic Controls - always included in the Toolbox

ActiveX Controls - separate files with ocx file extension

Insertable Objects - objects from another application such as a spreadsheet, or document



Intrinsic Controls

Text box

Picture box

Command button

Vertical scroll bar

Drive list

File list box

Line

Data

Option button

Pointer tool

List box

Label

Frame

Check box

Combo box

Horizontal scroll bar Timer

Directory list box

Shape

Image

OLE container



Get Input

Text box - text inputHorizontal Scroll bars - navigate choicesVertical Scroll bars - navigate choicesCheck box - more than one choiceOption buttons - mutually exclusive

choices

List box - 1 choice from list

Combo box - choose or type a choice



Get Input

Tabbed dialog - present many optionsMsgBox function - prompt user or display

messageInputBox function - present predefined

dialog boxesCommon dialog - display standard dialog

boxes such as Open, Save and PrintCustomized dialog box - create your own



Display Graphics

Image - use to create an icon command button, decorative images

Picture box - use to create a toolbarLine - draw a straight line segmentShape - draw a rectangle, square, ellipse,

or circleBackground Property - background

imageLoadPicture function - use at runtime



File System Controls

Drive list box - display list of disk drives

Directory list box - display list of folders (directories) and paths

File list box - display list of files



Miscellaneous Controls

Frame - use to group controls together

Timer - use to trigger simple animations or like a stopwatch

OLE container - use to link or embed objects from other applications



Data Access Controls

Data Control display, edit and update data from

existing databases uses same database engine that

powers Microsoft Access



Set Properties with Code

name.property = settingWhere

name is the name of the control or form

. (period) is required

property is the property to set or modify

= is required

setting is the setting of the property

Examples:imgWorld.Visible = True

txtName.Text = “Sarah”



Create the Icon Explorer Project using File System

ControlsHands-On Exercise 2

Create a new project Add the existing starter form Add a Splash form Add the Main module Modify the Main form Code the Main form Run and debug the project Add code to display icons Run and debug the new code Print your project and exit



Elements of a Menu

Menu bar

Menu title

Separator bar

Menu items



The Menu Editor

Menu title

Menu items

Separator bar

Menu control properties

Menu control list box



Setting Properties for Menu Commands

Name property - assigns the name used to refer to the menu control in your code

Enabled property - menu control appears dimmed (grayed out) when not enabled

Caption property - assigns the command to display on the menu bar or submenus



Menus and the Menu Editor

Access key - underlined keyboard alternative to a menu command - Press Alt + key

Shortcut key - assigned to most frequently used menu items - Press Ctrl + key

Separator Bar - divides menu items into logical groupings



Menu Design

Use short menu names, single wordUse unique menu items for each

menuGroup menus logicallyChoose a logical access key for

menu itemsChoose logical keyboard shortcuts

for most commonly used commands



Add Menus to the Learning Arithmetic

ProjectHands-On Exercise 3

Open the Learning Arithmetic project Save project files with a new name Add menu titles Add menu items Modify the About form Add the HowTo form and controls Add code to activate the menus Test the menus and forms



Summary ...

Design GUIs using 5 basic design principles1. Know your end user

2. Be consistent3. Use informative graphics and messages4. Keep it simple5. Let the user control the application

Design GUI on paper first



Summary

Add controls to forms using tools from the toolbox

Intrinsic controls are always in the toolbox

ActiveX controls and Insertable Objects can be added to the toolbox

Use the Menu Editor to add menusAdd code to activate the menus



Practice with Visual Basic

1. Controls Demonstration Sample2. MDI vs. SDI Interface Style3. A Successful Windows Application4. Graphic Explorer Project5. My Calendar



Case Studies

Create a PrototypeInsertable ObjectsActiveX ControlsControls from the Web

VB6-Ch4

Documents

end userlet end user

messagesshow user

user visual basic

good user interface2

end userprinciple

end userwho

directory list boxes

drive list boxes