CSC340 Information Systems Analysis and Design The Three Tier Architecture Revisited XXII Interface Objects 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 CSC340 Information Systems Analysis and Design Check Campaign Budget 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 Add a Dialog Box Object Select a client 2004 Jaelson Castro and John Mylopoulos Object Oriented Interface Design 3 CSC340 Information Systems Analysis and Design Prototyping the Dialogue 2004 Jaelson Castro and John Mylopoulos Object Oriented Interface Design 4 CSC340 Information Systems Analysis and Design Class Diagram for Interface Classes Classes Prototyping can be used to determine what the interface will look like 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 Object Oriented Interface Design 5 2004 Jaelson Castro and John Mylopoulos 1 Choice 1 TextField Object Oriented Interface Design 6 CSC340 Information Systems Analysis and Design Packages for Interface Classes Another Class Diagram Package diagrams show the dependencies among interface classes in different packages Java 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 Abstract Windowing Toolkit CBWindow clientLabel campaignLabel budgetLabel checkButton closeButton budgetTextField client Choice campaignChoice 2004 Jaelson Castro and John Mylopoulos Object Oriented Interface Design 7 CSC340 Information Systems Analysis and Design 2004 Jaelson Castro and John Mylopoulos Composition shows that a dialogue box is made up of other components from the AWT package CBWindow 1 1 2 3 AWT Label 2004 Jaelson Castro and John Mylopoulos 1 2 AWT Button 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 AWT Choice 1 AWT TextField Object Oriented Interface Design 9 CSC340 Information Systems Analysis and Design Alternative Dialogue Prototypes Separate window for look up 2004 Jaelson Castro and John Mylopoulos CSC340 Prototyping the Dialogue AWT Dialog 1 Object Oriented Interface Design 8 Information Systems Analysis and Design Revised Class Diagram CSC340 Information Systems Analysis and Design Object Oriented Interface Design 11 2004 Jaelson Castro and John Mylopoulos Object Oriented Interface Design 10 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 CSC340 Information Systems Analysis and Design Updating the Class Diagram Choice Client CL Campaign CA Lookup 2004 Jaelson Castro and John Mylopoulos Object Oriented Interface Design 13 CSC340 Information Systems Analysis and Design Model View Controller 2004 Jaelson Castro and John Mylopoulos The Java ActionListener Approach 4 Update Self User Event User Event 6 Notify Change CSC340 Information Systems Analysis and Design 4 Update Presentation Controller Object Oriented Interface Design 14 View Component any Class 1 ActionPerformed ActionEvent e 1 Broadcast 7 Request Model data 2 Update self 5 Ask What Has Changed 2 Inspect Event Model ActionListener 3 Event of Interest Notify Class of Event 3 Notify Change 2004 Jaelson Castro and John Mylopoulos Object Oriented Interface Design 15 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 Object Oriented Interface Design 17 2004 Jaelson Castro and John Mylopoulos Information Systems Analysis and Design Object Oriented Interface Design 16 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 Additional Readings 2004 Jaelson Castro and John Mylopoulos Object Oriented Interface Design 19 CSC340 Information Systems Analysis and Design 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 2004 Jaelson Castro and John Mylopoulos Object Oriented Interface Design 20
View Full Document
Unlocking...