UI Prototyping with VB 6.0

SIMS213 TutorialMarch 5, 1999

Melody Y. Ivory

Tutorial Outline

VB 6.0 OverviewDesigning ScreensAdding 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 interactivityWrite code for controls (event handling)

Run application

Getting Started

Starting VB 6.0Creating 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

Description of property

Code associated with object and event

Position form(s) on screen

Project Overview

Project Components (UI Prototype) Form Modules Optional

Resource FilesStandard Modules

Activity One - Create New Project

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

Run application Stop application

Tutorial Overview

VB 6.0 OverviewDesigning ScreensAdding Interactivity

Designing Screens

Changing form properties size, screen

position, background

Designing Screens

Adding controls select control & draw

on form control properties

name, caption, tab ordertext label & box - size,

alignment, font, multiline, scrollbars, text

check box & radio button - value, frames

list & combo list boxes - adding items

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

Controls

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 OverviewDesigning ScreensAdding 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 ExamplesStop application on Cancel button click

Private Sub Cancel_Click(Index As Integer) EndEnd 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.ShowEnd Sub

Using predefined dialog boxes MsgBox ”Msg”, Type,

”Title"

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.

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