XXV. Interface Objects

Information Systems Analysis and Design

CSC340

XXV. Interface Objects Three-Tier Architectures The Presentation layer Sequence Diagrams for User Interface Classes Prototyping the User Interface User Interface Class and Package Diagrams Model-View-Controller Architecture Revisited Statechart Diagrams for Dialogue Dynamics

© 2002 Jaelson Castro and John Mylopoulos

Object-Oriented Interface Design -- 1

Information Systems Analysis and Design

CSC340

The ThreeThree-Tier Architecture Revisited n

n

n

User interfaces for an information system are part of the presentation layer in the three-tier architecture. The three-tier architecture separates cleanly user interfaces from application logic/business classes and from data storage components of the system. Business classes “know nothing” of how their (business) objects will be presented to the users.

© 2002 Jaelson Castro and John Mylopoulos

Object-Oriented Interface Design -- 2

1

Information Systems Analysis and Design

CSC340

Ex: Check Campaign Budget

© 2002 Jaelson Castro and John Mylopoulos

Object-Oriented Interface Design -- 3

Information Systems Analysis and Design

CSC340

Add a Dialog Box Object

© 2002 Jaelson Castro and John Mylopoulos

Object-Oriented Interface Design -- 4

2

Information Systems Analysis and Design

CSC340

Prototyping the Dialogue n

Prototyping can be used to determine what the interface will look like.

© 2002 Jaelson Castro and John Mylopoulos

Object-Oriented Interface Design -- 5

Information Systems Analysis and Design

CSC340

Class Diagram for Interface Classes n

Dialog

Composition specifies that a dialogue box is made up of other components

CBWindow 1

1

1

2

2

Button 2 Label

© 2002 Jaelson Castro and John Mylopoulos

1

Choice 1 TextField

Object-Oriented Interface Design -- 6

3

Information Systems Analysis and Design

CSC340

Another Class Diagram n

This can also be represented as a class with the graphical components that make it up as attributes.

CBWindow clientLabel campaignLabel budgetLabel checkButton closeButton budgetTextField client Choice campaignChoice

© 2002 Jaelson Castro and John Mylopoulos

Object-Oriented Interface Design -- 7

Information Systems Analysis and Design

CSC340

Packages for Interface Classes n

Package diagram shows the dependencies classes in different packages.

© 2002 Jaelson Castro and John Mylopoulos

between interface

Object-Oriented Interface Design -- 8

4

Information Systems Analysis and Design

CSC340

Revised Class Diagram n

Composition shows that a dialogue box is made up of other components from the AWT package.

AWT::Dialog

CBWindow 1

1

1

1

2

2

AWT::Button 3 AWT::Label

© 2002 Jaelson Castro and John Mylopoulos

AWT::Choice 1

AWT::TextField

Object-Oriented Interface Design -- 9

Information Systems Analysis and Design

CSC340

Prototyping the Dialogue n

There are several ways for entering the Client and Campaign name: ü Use a separate look-up window for each class; ü Allow the user to enter a part of a name, then have the system return a list of close matches; ü Use a tree data structure to show clients and campaigns in a tree-like hierarchy.

© 2002 Jaelson Castro and John Mylopoulos

Object-Oriented Interface Design -- 10

5

Information Systems Analysis and Design

CSC340

Alternative Dialogue Prototypes n

Separate window for look-up

© 2002 Jaelson Castro and John Mylopoulos

Object-Oriented Interface Design -- 11

Information Systems Analysis and Design

CSC340

Alternative Dialogue Prototypes: Three View Control

© 2002 Jaelson Castro and John Mylopoulos

Object-Oriented Interface Design -- 12

6

Information Systems Analysis and Design

CSC340

Updating the Sequence Diagram

Choice: Client (CL) Campaign (CA) Lookup n

© 2002 Jaelson Castro and John Mylopoulos

Object-Oriented Interface Design -- 13

Information Systems Analysis and Design

CSC340

Updating the Class Diagram

© 2002 Jaelson Castro and John Mylopoulos

Object-Oriented Interface Design -- 14

7

Information Systems Analysis and Design

CSC340

Model-View-Controller 4: Update Presentation User Event

:Controller

6: Notify Change

:View

1: Broadcast 7: Request Model data

2: Update self

:Model

5: Ask What Has Changed 3: Notify Change

© 2002 Jaelson Castro and John Mylopoulos

Object-Oriented Interface Design -- 15

Information Systems Analysis and Design

CSC340

The ActionListener Approach 4: Update Self User Event

:Component

any:Class

1: ActionPerformed (ActionEvent e)

2: Inspect Event

3: [Event of Interest] Notify Class of Event :ActionListener

© 2002 Jaelson Castro and John Mylopoulos

Object-Oriented Interface Design -- 16

8

Information Systems Analysis and Design

CSC340

Modelling the Dynamic Behaviour of the Interface n

n

n

n

The sequence diagrams show the sequential view of the user working through the fields on the screen from top to bottom. But in GUI interfaces the user can click on the interface object out of sequence. What happens if the user clicks on the Check button before a client and a campaign have been selected? To specify what happens, we can use Statechart diagrams!

© 2002 Jaelson Castro and John Mylopoulos

Information Systems Analysis and Design

Object-Oriented Interface Design -- 17

CSC340

Client listbox, Campaign Listbox, Cursor

© 2002 Jaelson Castro and John Mylopoulos

Object-Oriented Interface Design -- 18

9

Information Systems Analysis and Design

CSC340

CheckButton, BudgetTextbox

© 2002 Jaelson Castro and John Mylopoulos

Object-Oriented Interface Design -- 19

Information Systems Analysis and Design

CSC340

Additional Readings n

n

Bennett S, Farmer R and McRobb S (1999) Object-Oriented Systems Analysis and Design Using UML. McGraw-Hill. Chapter 16 - Designing interface objects. Larman C (1998) Applying UML and Patterns. Prentice-Hall. Chapter 22 - Issues in System Design.

© 2002 Jaelson Castro and John Mylopoulos

Object-Oriented Interface Design -- 20

10