UI Prototyping with VB 6.0

UI Prototyping with VB 6.0 SIMS213 Tutorial March 5, 1999 Melody Y. Ivory

Tutorial Outline • VB 6.0 Overview • Designing Screens • Adding Interactivity

VB 6.0 Overview • Quickly design interactive UI prototype • Create new project • Standard Windows application • Design screens (forms) • Add controls (text boxes, buttons, etc.) • Set properties (color, caption, size, etc. for forms & controls) • Add interactivity • Write code for controls (event handling) • Run application

Getting Started • Starting VB 6.0 • Creating new project (application) • Standard Windows Application • DB Application • DHTML Application • Application Wizard

VB 6.0 IDE Controls that can be added to form Form to design List of project components Properties for selected object Code associated with object and event Description of property Position form(s) on screen

Project Overview • Project Components (UI Prototype) • Form Modules • Optional • Resource Files • Standard Modules

Activity One - Create New Project Run application Stop application • Create a new project (Standard EXE) • Change the project name to Orders • Change the name and caption for Form1 to Ord1 and Customer Information respectively • Add a new form to the project • Change the name and caption for this new form to Ord2 and Customer Preferences respectively • Save the project • Run the application • Stop the application

Tutorial Overview • VB 6.0 Overview • Designing Screens • Adding Interactivity

Designing Screens • Changing form properties • size, screen position, background

Designing Screens • Adding controls • select control & draw on form • control properties • name, caption, tab order • text label & box - size, alignment, font, multiline, scrollbars, text • check box & radio button - value, frames • list & combo list boxes - adding items Controls Graphic Control Text Box Command Button Radio Button List Box Vertical Scroll Bar Lines Text Label Frame (grouping controls) Check Box Combo List Box Horizontal Scroll Bar Shapes Image

Activity Two - Create Ord1 Screen • Create the screen • Customer Information Text Label • Font - size 24, bold • Border - Fixed Single • Address Text Box • MultiLine set to True • Next & Cancel Buttons • Font - size 10, bold • Use meaningful names for the text boxes & command buttons • Resize the form and set the Startup Position to center of screen • Run the application to see the screen • Stop the application

Activity Two - Resulting Ord1 Screen

Activity Three - Create Ord2 Screen • Create the screen • Customer Preferences Text Label • Font - size 24, bold • Border - Fixed Single • Use frames for both the radio buttons and the check boxes • Set the value of the email radio button to True • Use meaningful names for the radio buttons, check boxes & command buttons • Resize the form and set the Startup Position to center of screen • Set the project Startup object to this screen • Run the application to see the screen

Activity Three - Resulting Ord2 Screen

Tutorial Overview • VB 6.0 Overview • Designing Screens • Adding Interactivity

Adding Interactivity • VB Programming Model • Object-Oriented • Objects - Application, Form, Control, etc. • referenced by name and possibly context • e.g. NextButton or Ord1.NextButton • Objects have properties • e.g. NextButton.Value or If Ord1.Visible Then • Objects have methods (actions) • e.g. Ord1.Unload, List1.RemoveItem

Adding Interactivity • VB Programming Model • Event-Driven • Objects have events • e.g. click on Next command button or check box • Subroutines associated with each object x event • add event handling code • e.g. change object properties, • e.g. invoke object methods • double clicking object brings up code window

Adding Interactivity • Event Handling Examples Stop application on Cancel button click Private Sub Cancel_Click(Index As Integer) End End Sub Add items to combo list when form loads Private Sub Form_Load() Combo1.AddItem "AK" Combo1.AddItem "CA" Combo1.AddItem "CO" End Sub

Adding Interactivity • Screen transition • load form & show • unload form Screen Transition on Button Click Private Sub Next_Click(Index As Integer) Unload Ord1 Load Ord2 Ord2.Show End Sub

MsgBox Types vbOKOnly - Display OK button only. vbOKCancel - Display OK and Cancel buttons. vbYesNoCancel - Display Yes, No, and Cancel buttons. vbYesNo - Display Yes and No buttons. vbCritical - Display Critical Message icon. vbQuestion - Display Warning Query icon. vbExclamation - Display Warning Message icon. vbInformation - Information Message icon. • Using predefined dialog boxes • MsgBox ”Msg”, Type, ”Title" Private Sub Next_Click(Index As Integer) Response = MsgBox("Are you sure you want to quit?", vbYesNo, "Exit Application") If Response = vbYes Then ' User chose Yes. End End If End Sub

Activity Five - Add Interactivity • Set the project Startup object to Ord1 • Add the following actions to Ord1 • The Next button unloads Ord1 and loads/shows Ord2 • The Cancel button ends the application • Add code to the form Load event to add the items, AK, CA and CO, to the state combo box • Add the following actions to Ord2 • The Next button displays the vbOkOnly predefined dialogue box using MsgBox, then stops the application • Use the message “Your information is complete.” and the title “Information Complete” • The Prev button unloads Ord2 and loads/shows Ord1 • The Cancel button ends the application • Run the application to see the interactivity

UI Prototyping with VB 6.0