4

Chapter 4 Enhancing the Graphical User Interface

Multiple Forms, Controls, and Menus
By Carlotta Eaton Exploring Microsoft Visual Basic 6.0 Copyright 1999 Prentice-Hall, Inc.

Objectives
1. How to design a good user interface 2. Use Toolbox tools to create and modify forms and controls 3. 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
Exploring MS Visual Basic 6 Copyright 1999 Prentice-Hall, Inc. 2

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
Exploring MS Visual Basic 6 Copyright 1999 Prentice-Hall, Inc. 3

Designing the GUI

Interface Styles
Multiple Document Interface (MDI) Single Document Interface (SDI) Explorer-style interface

Exploring MS Visual Basic 6

Copyright 1999 Prentice-Hall, Inc.

Multiple Document Interface

Parent Form

Child Form

Child Form

Exploring MS Visual Basic 6

Copyright 1999 Prentice-Hall, Inc.

Single Document Interface

Independent Form

Independent Form

Exploring MS Visual Basic 6

Copyright 1999 Prentice-Hall, Inc.

Explorer-style interface

Left pane browsing controls

Right pane detailed view

Exploring MS Visual Basic 6

Copyright 1999 Prentice-Hall, Inc.

Five Principles of GUI Design

Principle 1: Know Your End User Principle 2: Be Consistent Principle 3: Show and Use Informative Graphics and Messages Principle 4: Keep It Simple Principle 5: Let the User Control the Application
Exploring MS Visual Basic 6 Copyright 1999 Prentice-Hall, Inc. 8

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.
Exploring MS Visual Basic 6 Copyright 1999 Prentice-Hall, Inc. 9

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
Exploring MS Visual Basic 6 Copyright 1999 Prentice-Hall, Inc. 10

Principle 3: Show and Use Informative Graphics and Messages Show user, instead of telling Use informative graphics, instead of merely creative graphics Graphics especially useful for international applications GUI analogy - dashboard of car Use symbols, not words
Exploring MS Visual Basic 6 Copyright 1999 Prentice-Hall, Inc. 11

Principle 4: Keep It Simple

KISS Keep it simple sweetie If interface looks difficult, it will be hard to use Use several forms instead of a single cluttered form Group items, use tabbed format Set default options for user
Exploring MS Visual Basic 6 Copyright 1999 Prentice-Hall, Inc. 12

Principle 5: Let the User Control the Application

Conversation between computer and end user Let end user decide tasks and order Programmer controls computers responses to end user Visual Basic is event-driven so this is relatively easy to achieve
Exploring MS Visual Basic 6 Copyright 1999 Prentice-Hall, Inc. 13

Form Designer Grid

See Appendix C - The Toolbox, Toolbars, and Controls

Twips - screenindependent unit

Pixels - picture elements, screen-dependent unit

Exploring MS Visual Basic 6

Copyright 1999 Prentice-Hall, Inc.

14

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

Exploring MS Visual Basic 6

Copyright 1999 Prentice-Hall, Inc.

15

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

Exploring MS Visual Basic 6 Copyright 1999 Prentice-Hall, Inc. 16

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
Exploring MS Visual Basic 6 Copyright 1999 Prentice-Hall, Inc. 17

Intrinsic Controls
Pointer tool Label Frame Check box Picture box Text box Command button Option button List box Vertical scroll bar Drive list File list box Line Data
Copyright 1999 Prentice-Hall, Inc. 18

Combo box
Horizontal scroll bar Timer Directory list box

Shape
Image OLE container
Exploring MS Visual Basic 6

Get Input
Text box - text input Horizontal Scroll bars - navigate choices Vertical Scroll bars - navigate choices Check box - more than one choice Option buttons - mutually exclusive choices
List box - 1 choice from list Combo box - choose or type a choice
Exploring MS Visual Basic 6 Copyright 1999 Prentice-Hall, Inc. 19

Get Input
Tabbed dialog - present many options MsgBox function - prompt user or display message InputBox function - present predefined dialog boxes Common dialog - display standard dialog boxes such as Open, Save and Print Customized dialog box - create your own
Exploring MS Visual Basic 6 Copyright 1999 Prentice-Hall, Inc. 20

Display Graphics
Image - use to create an icon command button, decorative images Picture box - use to create a toolbar Line - draw a straight line segment Shape - draw a rectangle, square, ellipse, or circle Background Property - background image LoadPicture function - use at runtime
Exploring MS Visual Basic 6 Copyright 1999 Prentice-Hall, Inc. 21

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

Exploring MS Visual Basic 6

Copyright 1999 Prentice-Hall, Inc.

22

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

Exploring MS Visual Basic 6

Copyright 1999 Prentice-Hall, Inc.

23

Data Access Controls

Data Control
display,

edit and update data from existing databases uses same database engine that powers Microsoft Access

Exploring MS Visual Basic 6

Copyright 1999 Prentice-Hall, Inc.

24

Set Properties with Code

name.property = setting
Where 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

Exploring MS Visual Basic 6

Copyright 1999 Prentice-Hall, Inc.

25

Create the Icon Explorer Project using File System Controls

Hands-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
Copyright 1999 Prentice-Hall, Inc. 26

Exploring MS Visual Basic 6

Elements of a Menu
Menu bar

Menu title

Menu items

Separator bar

Exploring MS Visual Basic 6

Copyright 1999 Prentice-Hall, Inc.

27

The Menu Editor

Menu control properties

Menu title Menu items Separator bar Menu control list box

Exploring MS Visual Basic 6

Copyright 1999 Prentice-Hall, Inc.

28

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

Exploring MS Visual Basic 6

Copyright 1999 Prentice-Hall, Inc.

29

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

Exploring MS Visual Basic 6

Copyright 1999 Prentice-Hall, Inc.

30

Menu Design
Use short menu names, single word Use unique menu items for each menu Group menus logically Choose a logical access key for menu items Choose logical keyboard shortcuts for most commonly used commands
Exploring MS Visual Basic 6 Copyright 1999 Prentice-Hall, Inc. 31

Add Menus to the Learning Arithmetic Project

Hands-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
Copyright 1999 Prentice-Hall, Inc. 32

Exploring MS Visual Basic 6

Summary ...
Design GUIs using 5 basic design principles
1. Know your end user 2. Be consistent 3. Use informative graphics and messages 4. Keep it simple 5. Let the user control the application

Design GUI on paper first

Exploring MS Visual Basic 6 Copyright 1999 Prentice-Hall, Inc. 33

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 menus Add code to activate the menus
Exploring MS Visual Basic 6 Copyright 1999 Prentice-Hall, Inc. 34

Practice with Visual Basic

1. Controls Demonstration Sample 2. MDI vs. SDI Interface Style 3. A Successful Windows Application 4. Graphic Explorer Project 5. My Calendar

Exploring MS Visual Basic 6

Copyright 1999 Prentice-Hall, Inc.

35

Case Studies
Create a Prototype Insertable Objects ActiveX Controls Controls from the Web

Exploring MS Visual Basic 6

Copyright 1999 Prentice-Hall, Inc.

36