CSC340 Information Systems Analysis and Design XXII 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 2004 Jaelson Castro and John Mylopoulos Object Oriented Interface Design 1 CSC340 Information Systems Analysis and Design The Three Tier Architecture Revisited Remember that User interfaces for are part of the presentation layer in a 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 about how their business objects will be presented to the users 2004 Jaelson Castro and John Mylopoulos Object Oriented Interface Design 2 CSC340 Information Systems Analysis and Design Check Campaign Budget Select a client 2004 Jaelson Castro and John Mylopoulos Object Oriented Interface Design 3 CSC340 Information Systems Analysis and Design Add a Dialog Box Object 2004 Jaelson Castro and John Mylopoulos Object Oriented Interface Design 4 CSC340 Information Systems Analysis and Design Prototyping the Dialogue Prototyping can be used to determine what the interface will look like 2004 Jaelson Castro and John Mylopoulos Object Oriented Interface Design 5 CSC340 Information Systems Analysis and Design Class Diagram for Interface Classes Dialog Composition specifies that a dialogue box is made up of other components CBWindow 1 1 1 2 2 Button 3 2 Label 2004 Jaelson Castro and John Mylopoulos 1 Choice 1 TextField Object Oriented Interface Design 6 CSC340 Information Systems Analysis and Design Another Class Diagram CBWindow can also be represented as a class with the graphical components that make it up as attributes This is OK only if you don t want to say much about the different elements of CBWindow 2004 Jaelson Castro and John Mylopoulos CBWindow clientLabel campaignLabel budgetLabel checkButton closeButton budgetTextField client Choice campaignChoice Object Oriented Interface Design 7 CSC340 Information Systems Analysis and Design Packages for Interface Classes Package diagrams show the dependencies among interface classes in different packages Java Abstract Windowing Toolkit 2004 Jaelson Castro and John Mylopoulos Object Oriented Interface Design 8 CSC340 Information Systems Analysis and Design Revised Class Diagram Composition shows that a dialogue box is made up of other components from the AWT package AWT Dialog CBWindow 1 1 1 2 2 AWT Button 3 AWT Label 2004 Jaelson Castro and John Mylopoulos 1 AWT Choice 1 AWT TextField Object Oriented Interface Design 9 CSC340 Information Systems Analysis and Design Prototyping the Dialogue 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 2004 Jaelson Castro and John Mylopoulos Object Oriented Interface Design 10 CSC340 Information Systems Analysis and Design Alternative Dialogue Prototypes Separate window for look up 2004 Jaelson Castro and John Mylopoulos Object Oriented Interface Design 11 CSC340 Information Systems Analysis and Design Alternative Dialogue Prototypes Tree View Control 2004 Jaelson Castro and John Mylopoulos Object Oriented Interface Design 12 CSC340 Information Systems Analysis and Design Updating the Sequence Diagram Choice Client CL Campaign CA Lookup 2004 Jaelson Castro and John Mylopoulos Object Oriented Interface Design 13 CSC340 Information Systems Analysis and Design Updating the Class Diagram 2004 Jaelson Castro and John Mylopoulos Object Oriented Interface Design 14 CSC340 Information Systems Analysis and Design Model View Controller 4 Update Presentation User Event Controller 6 Notify Change View 1 Broadcast 7 Request Model data 5 Ask What Has Changed 2 Update self Model 3 Notify Change 2004 Jaelson Castro and John Mylopoulos Object Oriented Interface Design 15 CSC340 Information Systems Analysis and Design The Java 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 2004 Jaelson Castro and John Mylopoulos Object Oriented Interface Design 16 CSC340 Information Systems Analysis and Design Modeling the Dynamic Behaviour of the Interface 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 state diagrams 2004 Jaelson Castro and John Mylopoulos Information Systems Analysis and Design Object Oriented Interface Design 17 CSC340 Client listbox Campaign Listbox Cursor 2004 Jaelson Castro and John Mylopoulos Object Oriented Interface Design 18 CSC340 Information Systems Analysis and Design CheckButton BudgetTextbox 2004 Jaelson Castro and John Mylopoulos Object Oriented Interface Design 19 CSC340 Information Systems Analysis and Design Additional Readings Bennett S Farmer R and McRobb S 1999 Object Oriented McGraw Hill Systems Analysis and Design Using UML Chapter 16 Designing interface objects Larman C 1998 Applying UML and Patterns Prentice Hall Chapter 22 Issues in System Design 2004 Jaelson Castro and John Mylopoulos Object Oriented Interface Design 20
View Full Document
Unlocking...