CSE2207/CSE3007Rapid Applications

Programming with Windows

Week 2

Topics Week 2

Prototyping Martin, J (1990) Rapid Application

Development, Prentice HallEvent-driven programmingA VB6 Project

Structure Components Code Documentation

Rapid Application Development (RAD)

Acknowledgement

Thanks to Dan Eaves for generously allowing me to use his material from the (ex) subject SYS2194 Systems

Prototyping

What’s a GUI?

A Graphical User InterfaceA WIMP interface

Windows Icons Mouse Pop-down Menus

Developed in early 1970’s a the Xerox Palo Alto Research Center (Xerox PARC)

First successful implementation: Apple Macintosh

Windows 95 still trails the Mac in usability

General Advantages of GUI’s

Easier to learnEasier to use (mostly)(But much harder to build (mostly))WYSIWYGBuilt around a semi-consistent

metaphor: The DesktopSupports transportability of knowledgeEvent Driven/Object Oriented

Transportability of Knowledge

You know (e.g.) how to quit ANY Windows application: File|Exit or [ALT]x

You ‘transport’ this knowledge from application to application so there are fewer things to learn with a ‘new’

system

You (the developer) must support the users’ knowledge So do you design a screen that says “Main Menu” ?

Event Driven Systems

‘Traditional’ programming/environment the program/programmer is in control the program orders the user to do things in a

specified order: user has no choice

Event-Driven Programming user is in control program responds to user’s actions user can perform task steps in any sequence program ‘butts in’ to report errors as a last resort user owns the screen until s/he passes control to

the program

Event Driven Systems...Screens (forms in VB) consist of

collections of ‘controls’ which have defined properties and behaviours menus, lists drop down when mouse-clicked buttons, scroll bars, radio buttons etc all work as

expected [F1] gets context specific Help

This consistency with expectations is critical to successful prototyping system behaviour is unexceptional, so user

can concentrate on system functionalitySo, NO ‘creative’ or unique interface!

Types of Prototypes...

Interface PrototypeTest the usability of the system’s

intended interfaceRequires a working system ‘underneath’Should determine the

cost of learning the system cost of using the system (these are different issues!)

Happens late in the development process

Types of Prototypes...

Logic PrototypeTest the analyst/designers’

understanding of the users’ requirements

Important phase of analysis when the users are experts at their tasks and not able to articulate requirements

Requires a skilled analyst/programmerMust happen early in the analysis phase

Types of Prototypes...

System SketchUsed to determine the look and feel of

the applicationUseful in both Interface and Systems

prototypingRequires a superprogrammer/analystRequires a large number of sketchesHappens very early in the analysis

phase

Types of Prototypes...

Incremental ImplementationSystem prototyped and developed in

‘chunks’Prototypes put into production use as

implementedAssumes

preliminary analysis can accurately ‘chunk’ system components

prototypes are reliable and can be maintained

Types of Prototypes...

Prototyping as Requirements ElicitationHuman Expertise

Know what - knowledge that can be consciously retrieved and articulated e.g. ‘book learning’

Know how - skill-based knowledge which is basis of expert performance without much conscious thought - the result of experience.

Expertise is hard to access

Types of Prototypes...

Prototyping as Requirements Elicitation…Experts find it difficult to articulate

their expertisePrototypes (that work) throw experts

into their normal tasks the expertise may well emerge

This approach is not appropriate where ‘Know What’ needs to be accessed, and the expert is perfectly capable of articulating system requirements e.g. most accounting systems

Developing VB6 Applications

Steps:Design and Create a VB projectRun the VB project from the IDE for testingCreate an .EXE file and run it from

WindowsDevelop program documentationCreate set-up disks with the Setup WizardDeploy, install the application

Steps to Create a VB Application

Identify the specification: Be clear about what to do. (Use prototyping here, perhaps)

Use some sort of design aid to show the relationship between application tasks, objects/controls, and events (see TOE chart next week)

Create the interface, including the form(s) and controls. E.g., a button Quit to end the program and Clear to initialize all text boxes.

Set properties of controls (see methods later). Decide which events will trigger program actions. Write code for each event-triggered action. Run and test your program.

Working with Projects

A project is the collection of files you use to build an application

In the Prof. And Ent. Versions, you can work with multiple projects in a Project Group

A Project consists of:One project file that keeps track of all the

components (.VBP) list of files from Project Explorer window + options references to ActiveX controls, insertable objects

Working with Projects...

One file for each form (form modules) with .frm extension contains all details of the form including form-level

data and procedures all details of the controls, their properties, and

code for their event procedures.

One binary data file (.frx) for each form with binary properties like Picture or Icon

Optionally, one file for each class module (.cls) similar to form modules, with no visible interface create objects from classes with properties,

methods

Working with Projects...

Optionally, one file for each standard module (.bas) procedures and declarations commonly

accessed by other modules in the application can be re-used across applications provided

code does not reference forms, controls by name

Optionally, only one (resource file (.res). Contains bitmaps, text strings etc which can be

used to customize an app. without re-compiling Often used for different language versions of

interfaces

Working with Projects...

Optionally, one or more files containing ActiveX controls (.ocx) optional controls that can be added to the toolbox

and used on forms supplied by VB or vendors, or written by yourself

Choose File|Make myproject.exeAll files in a project can be shared by other

projectsUse the Application Wizard

File|New Project, click on Application Wizard

The Toolbox Window

Always contains all the intrinsic (or standard) controls: part of the VB .exe file

Developer can add more controls ActiveX Controls: separate files with .ocx

extension (.vbx files in earlier VB versions)All VB editions have e.g. DataCombo, DataListOnly Prof. And Ent editions have e.g. Toolbar,

Animation, Tabbed DialogMany 3rd party ActiveX controls available too

e.g. the Pinnacle Graph control

The Toolbox Window...

To add an ActiveX Control to the toolbox: Project|Components|Controls Tab then

select the required check box Developer can add…

Insertable Objects: e.g. a MSExcel Worksheet object, an MS Project Calendar object.Some support automation (i.e. expose their

properties, methods, thus enabling the VB developer to manipulate their data and appearance within a VB application)

The Toolbox Window...

Create a reference to an insertable object: Project|References, check the required

checkboxChoose View|Object Browser to view the

referenced type library You can use all the objects, methods, and

properties listed in the Object Browser in your VB Application

Note that the Object Browser shows all the objects, with properties, methods from your VB application too

The Standard ControlsPointer, Command buttonTo select a command button at run-time: mouse click TAB to the button (has focus), then press ENTER or

press SPACEBAR ALT + access key (underlined letter) cmdClose.Value = True (So who is in control here??) cmdClose_Click (Ditto!!) If the button is the default Command button, then

press ENTER If the button is the default Cancel button, then press

ESC

The Standard Controls...

Display, Enter Text Label (Autosize), Text Box (MultiLine,

ScrollBars, SelStart, SelLength, SelText, Locked, PasswordChar)

Sub Form_Load ()Text1.Text = “Here are two lines” _& vbCrLf & “in a text box”

See Text.frm in the Controls.vbp sample app

Note standard syntax: object.property

The Standard Controls...

Present choices to the user Check Boxes (choose 1 or more options)

value is 0 (vbUnchecked) or 1 (vbChecked)work independently of each other

All Option Buttons placed directly on a form are automatically part of a group - only one is currently selectedfor more groups, create a Frame or Picture

Box, place option buttons on them (or cut, paste existing controls onto the Frame)

The Standard Controls...Present Choices to the User...Option Buttons… Default button in group: set value to True at design

time

List Boxes, Combo boxesPresent a list of choicesSingle, multi columns; auto scroll barscombo has 3 styles, option to enter text tooEnter values:

design time:(List property, CTRL + Enter for each new line)

run-time: e.g. List1.AddItem = “Paris”

The Standard Controls...Display Pictures, GraphsPicture Box, Image Control, Shape or Line controlPicture Box

Display a picture specified at design, run timepicLogo.Picture = LoadPicture(“VANGOGH.BMP”)Careful if setting Autosize to True!

Use as a container for other controls (as a toolbar, status bar using the Align property)

Can Paint, Draw, Print on the Picture Box, then clear it e.g. picStatus.Cls

Use PaintPicture method for simple animation

The Standard Controls...

Image Control Display a picture, like a Picture Box, but

faster Check its Stretch property Recognizes the Click event: use as a

button with a picture on it; or grouped in a Picture box as buttons in a ToolBar (but does not ‘depress’ when clicked)

Shape, Line Controls No events

The Standard Controls...Scroll Bars: Horizontal and Vertical

Can use as input devices (value, min, max) Replaced by slider control

DriveListBox, DirListBox, FileListBox now replaced by Common Dialog control

Accessing data, components outside VB ADO Data Control OLE container Control

The Timer control: puts you in charge of regular events!

Interface Navigation

FocusTabIndex property

Determines order in which a control receives the focus when the user is using the Tab key to tab through the application

Complete interface design, set TabIndex properties (begin from 0) then lock controls (Toolbar)

SetFocus method Allows object focus to be changed via code while

application is running. Object can be e.g. form, control which is currently

visible.

Interface Navigation...

Access KeysAllow user to select a control via ALT+letterPreferred alternative to mouse actions for

someApplies only to Caption property e.g.

&Name Nu&mber E&xit

If caption must include &, set UseMnemonic property to False (default is True)

FormsSpecify the Startup Form via Tools|OptionsBring a form into memory (but not display

it yet): Load frmInput Remove a form from memory: Unload

frmInput, or Unload meDisplay a form (and load it if necessary):

frmInput.ShowRemove a form from the screen, but keep

it in memory: frmInput.Hide

Forms...

A form’s Load event procedure: Useful for ‘setting things up’ before the user

starts working with the applicationPrivate Sub Form_Load()

frmInput.Top = (Screen.Height - frmInput.Height) / 2frmInput.Left = (Screen.Width - frmInput.Width) / 2

End Sub

Printing: (Design Time) File|Print then Form Image, Code, or

Form as Text (Run Time) frmInput.PrintForm

Writing An Event Procedure

An event procedure is a block of program code that executes whenever a particular event occurs.

Click the mouse on a command button, e.g., triggers a click event. Even mouse movement and location are events.

To create the event procedure: Double-click the control or form to open the Code

Editor By default, code window displays skeleton code for

the most common event for the selected object

The VB Code Editor

List Boxes allow choice of objects in that module (as displayed in Project Explorer) event procedures for the selected object

VB generates the appropriate skeleton code once an object and event procedure are selected.

Automatic Code Completion and Auto Quick Info can be (de)selected via Tools|Options|Editor Tab

View one/all procedures in the moduleNB!! DON’T change names of objects after code

has been written for them!