4 Chapter 4 Enhancing the Graphical User Interface

4 Chapter 4 Enhancing the Graphical User Interface Multiple Forms, Controls, and Menus Exploring Microsoft Visual Basic 6. 0 Copyright 1999 Prentice-Hall, Inc. © 1999 Prentice-Hall, Inc. By Carlotta Eaton Exploring MS Visual Basic 6

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. 4

Multiple Document Interface Parent Form Child Form Exploring MS Visual Basic 6 Copyright 1999 Prentice-Hall, Inc. 5

Single Document Interface Independent Form Exploring MS Visual Basic 6 Copyright 1999 Prentice-Hall, Inc. 6

Explorer-style interface Left pane browsing controls Right pane detailed view Exploring MS Visual Basic 6 Copyright 1999 Prentice-Hall, Inc. 7

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 computer’s 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 n n n n n 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 Active. X 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 Picture box Label Text box Frame Command button Check box Option button Combo box List box Vertical scroll bar Horizontal scroll bar Timer Drive list Directory list box File list box Shape Line Image OLE container Exploring MS Visual Basic 6 Data Copyright 1999 Prentice-Hall, Inc. 18

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 Msg. Box function - prompt user or display message Input. Box 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 Load. Picture 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 n display, edit and update data from existing databases n 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: img. World. Visible = True txt. Name. 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 n n n n n 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 Exploring MS Visual Basic 6 Copyright 1999 Prentice-Hall, Inc. 26

Elements of a 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 Menu control list box Separator bar 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 n n n n Open the Learning Arithmetic project Save project files with a new name Add menu titles Add menu items Modify the About form Add the How. To form and controls Add code to activate the menus Test the menus and forms Exploring MS Visual Basic 6 Copyright 1999 Prentice-Hall, Inc. 32

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 Ø Active. X 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 Ø Active. X Controls Ø Controls from the Web Exploring MS Visual Basic 6 Copyright 1999 Prentice-Hall, Inc. 36