GUI Architectures GUI and systems Presentation and models

GUI Architectures GUI and systems Presentation and models Views and presentation logic Karlstads University Computer Science Software Engineering, DVGC 05

GUI Architectures • • • GUI and systems Presentation and models Views and presentation logic Karlstads University Computer Science 2 Software Engineering, DVGC 05

Visual Interfaces and Application Logic • Yes, – with a widget-based system – it is easy to avoid having to think about the (required) separation • between the user interface • and the application domain objects, – but it is all too easy to allow • one’s domain code • to become inextricably linked with • the general interface logic. • From Dolphin Smalltalk design report Karlstads University Computer Science 3 [TWISTING THE TRIAD] Design paper for Dolphin Smalltalk, 2000 Software Engineering, DVGC 05

How to Select an Application Architecture Security Operational Management Communication Caching? State? Users Focus 1 UI Components Presentatio n Layer 2 UI Process Components ”Interface logic” Service Interfaces ”Domain code” Business Workflows Business Components Data Access Logic Components Data Layer Karlstads University Computer Science Data Sources Business Entities Service Agents Business Services Layer Additional Services Layer Services 4 [MSF], Microsoft Solution Framework, [MSPn. P] patterns & practices: Architecture Software Engineering, DVGC 05

Integrated Logic • Let us make a quick booking solution Wizard. Form with a Booking. Forms – Using the Visual Studio Design Wizard – Including direct access to the database • Generated code for saving a new booking private void booking. Binding. Navigator. Save. Item_Click (object sender, Event. Args e) { this. Validate(); this. booking. Binding. Source. End. Edit(); this. table. Adapter. Manager. Update. All(this. r. BSData. Set); } Karlstads University Computer Science 5 Software Engineering, DVGC 05

The Elements of the Integrated Program • Visual Studio creates a binding source-object – Acts as a data source for navigation bar and data grid • level of indirection with a uniform protocol – May be bound to different kinds of data sources • Is an adapter between the data clients and the data source • The binding source gets its data from the dataset – An off-line representation of part of the database • A table adapter synchronizes the dataset with the database – Fills the dataset and updates the database • Small group discussion – Identify the layers of this solution on the reengineered structure at the next slide Karlstads University Computer Science 6 With permission from Program. Utvikling as Software Engineering, DVGC 05

Reengineering the Integrated Program : Rooms. Form «launch» rooms. Binding. Navigator : Binding. Navigator -event handler rooms. Data. Grid. View : Data. Grid. View +Data. Source -rooms. Binding. Source -rooms. Table. Adapter -r. BSData. Set : Rooms. Table. Adapter «use» +Binding. Source : Binding. Source +Data. Source : RBSData. Set «use» «table» : Rooms Karlstads University Computer Science 7 Software Engineering, DVGC 05

Study the Application Logic • Identify the responsibilities of each layer • The presentation layer – Knows how to present, receive and navigate through data • The data source layer – Knows how to make data available to the presentation layer – Keeps track of which data have been removed, added or changed – Knows how to move data between the data source and the off-line data representation • There is no domain logic in this application – Information about the rules for using the data – It is with the user alone Karlstads University Computer Science 8 Software Engineering, DVGC 05

Add some Domain Logic • Add data validation – Entered number of seats cannot be negative • Class Discussion: Evaluate alternative strategies – Add constraint to the database • CK_Seats. Non. Negative: ([Seats]>=(0)) • Discussion: – Add constraint to the dataset • Discussion: – Add validation code run during data input • Event handling for cell value changed • Discussion: Karlstads University Computer Science 9 Software Engineering, DVGC 05

Some Possible Considerations • Add constraint to the database – Can not be validated before data is saved – Signalled by throwing an exception • Must be caught and handled in the application • Add constraint or validation to the record set – Unique constraints and foreign-key constraints are readily available – On. Column. Changing event handler may add further validation • Requires manual programming • Record set will have domain validation • Add validation code run during data input – Makes immediate validation possible • Data grid will have domain validation – Requires manual programming • Where to locate that code? Karlstads University Computer Science 10 Software Engineering, DVGC 05

Rudimentary Data Validation for Number of Seats • Event handling for cell value change – Located in Rooms. Form private void rooms. Data. Grid. View_Cell. Value. Changed( object sender, Data. Grid. View. Cell. Event. Args e) { Data. Grid. View sender. View = (Data. Grid. View)sender; if (e. Row. Index >= 0) // Only validate data cells { switch (sender. View. Columns[e. Column. Index]. Header. Text) { case "Seats": Validate. Seats(sender. View, e. Row. Index, e. Column. Index); break; } // switch Header. Text } // row. Index >= 0 } Karlstads University Computer Science 11 Software Engineering, DVGC 05

A Support Function to do the Validation /// <summary> /// Validate data entry for the Seats property /// <pre>Pre: The current cell is a Seats data cell</pre> /// <post>Post: If the current value is valid, nothing has happened, else /// the user has been notified and the cell has been restored to its /// previous value</post> /// </summary> private void Validate. Seats(Data. Grid. View sender, int row, int column) { object value. Object = sender. Rows[row]. Cells[column]. Value; if (value. Object != null && value. Object. Get. Type() != typeof(System. DBNull)) { int value = (int)value. Object; if (!(value >= 0)) { Message. Box. Show("Invalid value: " + value); sender. Rows[row]. Cells[column]. Value = current. Value; } } // has a value } // Validate. Seats Karlstads University Computer Science 12 Software Engineering, DVGC 05

Architecture and Dependencies Presentation Layer View Input Controller Message. Box Binding Navigator Data Grid View Rooms Form Binding Source Save. Item_Click Cell. Enter Cell. Value. Changed Load Form. Closing Domain Layer Model Validate. Dirty Validate Seats Save Data Source Layer Karlstads University Computer Science Data Source Logic 13 Table. Adapter Record Set Software Engineering, DVGC 05

Architecture and Dependencies Presentation Layer View Input Controller Message. Box Binding Navigator Data Grid View Rooms Form Binding Source Save. Item_Click Cell. Enter Cell. Value. Changed Load Form. Closing Domain Layer Model Validate. Dirty Validate Seats Save Data Source Layer Karlstads University Computer Science Data Source Logic 14 Table. Adapter Record Set Software Engineering, DVGC 05

GUI Architectures • • • GUI and systems Presentation and models Views and presentation logic Karlstads University Computer Science 15 Software Engineering, DVGC 05

Transaction Script Integrates All Logic Search and display Modify, save, display Presentation and presentation Logic Application Logic Karlstads University Computer Science 16 Software Engineering, DVGC 05

A Solution with an Object Model • Example code to insert a booking private void Add. Button_Click(object sender, Event. Args e) { Booking candidate = Make. New. Booking(); if (Booking. Validation. Is. Valid(candidate)) { Mapper. Booking. Mapper. Add(candidate); Load. Data(); Locate. At(candidate); } else { Message. Box. Show("Illegal booking data entered"); } } Karlstads University Computer Science 17 Software Engineering, DVGC 05

Presentation is Supported by Domain • Run application and make a booking • Input event is caught by an event handler – Does some validation • Supported by domain objects – Calls domain objects to do some operation – Displays result – Similar to a pure update (next slide) • • Design principle: Separate Presentation Information flow: Flow Synchronization – The form knows who needs the information Karlstads University Computer Science 18 Software Engineering, DVGC 05

Query Example: Get Available Rooms • For queries / accessors (no change) or one single view – Transfer result to View Logics From time: 2006 -12 -12 To time: 2006 -12 -12 Fossekallen 2006 -12 -12 10. 00– 12. 00 Setesdal 2006 -12 -12 10. 00– 15. 00 Fossekallen 2006 -12 -12 14. 00– 17. 00 Search 1: click event 5 display list 2: get data 4 Display. Available(rooms) : Input Controller : View or Presenter Presentation logic 3 rooms = Get. Available(from, to) : Booking. Finder Karlstads University Computer Science 19 = model in MVC terms Domain logic Software Engineering, DVGC 05

A More Elaborate Example • Run application with several windows displaying overlapping information – You want a change in one of the windows to appear in the others • • • Design principle: Separate Presentation Information flow: Observer Synchronization Design pattern: Observer –. NET implementation: Events – Implicitly handled by data binding Karlstads University Computer Science 20 Software Engineering, DVGC 05

Command Example: Reserve a Room • For commands / transformers (change) and more than one view – View subscribes to Service Layer events – Notification is implicit through events (Separate Presentation) Fossekallen Room: From time: 2006 -12 -12 08. 00 To time: 2006 -12 -12 12. 00 Fossekallen 2006 -12 -12 10. 00– 12. 00 Setesdal 2006 -12 -12 10. 00– 15. 00 Fossekallen 2006 -12 -12 14. 00– 17. 00 Controls Reserve 1: click event 6 display list 2: get data : Input Controller : View Logic 4 change event 5 get display info 3 Reserve. Room(room, from, to) : Booking Karlstads University Computer Science Form class 21 = model in MVC terms Presentation layer Domain layer Software Engineering, DVGC 05

Subscribing To and Handling Events • Observer 1. Subscribes to (or is subscribed to) the event and does initial update 2. Receives events to handle incremental update 1 2 Karlstads University Computer Science 22 Software Engineering, DVGC 05

Implementing Observers in C# • Part 1: Initialization – Define and subscribe to the event 1. Model (class Booking) declares an event public event System. Event. Handler Participants. Changed; 2. Observer client supplies a model to the observer RBS: new Booking. Form(booking). Show(); Booking. Form: new Add. Participant. Form(booking). Show(); 3. Observers define event handler for incremental event handling • Booking. Form, Add. Participants. Form private void booking_Participants. Changed( object source, System. Event. Args args) {. . . } 4. Observers subscribe to the event (in constructor or set Model property) booking. Participants. Changed += new Event. Handler(booking_Participants. Changed); 5. Observers perform initial update from model • Part 2: Update – Model triggers and observer receives event 1. Model (class Booking) fires event (e. g. in Add. Participants) Participants. Changed(this, new System. Event. Args()); 2. Causes observer (Booking. Form, Add. Participants. Form) event handler to be called booking_Participants. Changed(object source, System. Event. Args args); Karlstads University Computer Science 23 Software Engineering, DVGC 05

Adding Another UI Device • You want to allow room booking over the web – Display a simple demo of ASP. NET server side application logic – A data grid bound to Booking objects • Through Booking. Mapper • Don’t forget to initialize the Mapper. Factory singleton – Four separate fields and a button implement booking functionality • Web application is supported by same domain logic as before – Thanks to Separate Presentation Karlstads University Computer Science 24 Software Engineering, DVGC 05

A Web Session server client Karlstads University Computer Science 25 Software Engineering, DVGC 05

One Page Life Cycle server client Karlstads University Computer Science 26 Software Engineering, DVGC 05

Handling ASP. NET Page Life Cycle Events • A page raises events for each stage of its life cycle – Can be handled in your own code – Bind the event handler to the event • Declaratively using attributes such as onclick • In code • Pages also support auto event wire-up – ASP. NET looks for methods with particular names – Automatically runs those methods when certain events are raised – Requires <%@ Page Auto. Event. Wireup="true" %> – Naming convention Page_event • Page_Load, Page_Init Karlstads University Computer Science 27 Software Engineering, DVGC 05

Web Servers are Stateless • The HTTP protocol does not relate subsequent Web requests to each other – The request following mine may come from a completely unrelated browser • The server must establish the connection between related requests – By storing an identification at the client side – This identifies a session from one browser • Two main strategies for recognizing a session identity – Server stores an id with the client and asks for it each time • Cookies – Server includes an id in the Web page, returned with the next request • Hidden field • A parameter in the URL Karlstads University Computer Science 28 Software Engineering, DVGC 05

Strategies for Storing Session State • Once the session is identified – The session state data may be retrieved – Different data storage techniques • Session State – Session identifier identifies a state object in server memory • Contains all the session variables • View State – Session data sent between server and client with each view • Persistent State – Session variables stored on disk • Search key = session identifier Karlstads University Computer Science 29 Software Engineering, DVGC 05

Fully Dressed Class Structure Karlstads University Computer Science 30 Software Engineering, DVGC 05

Working with Session Data • ASP. NET Session data object is only accessible through a Web page • Encapsulate session data in a typed class – Declared separately internal class Typed. Session { private Http. Session. State session; public Typed. Session() {session = System. Web. Http. Context. Current. Session; } public string User. Id{ get { return (string)session[”User. Id”]; } set { session[”User. Id”] = value; } }. . . more session variables. . . } – Used from a Web page or layer supertype object, initialised in Page_Load private Typed. Session = new Typed. Session(); University Reference. Karlstads to System. Web. dll required Computer Science 31 Software Engineering, DVGC 05

Delegate Event Handling to Input Controller • Getting hold of an input controller • Suggest an implementation of the Controller property Karlstads University Computer Science 32 Software Engineering, DVGC 05

Getting Hold of a Controller • One implementation of the Controller property – In the code-behind class – Implement the controller as a local ”singleton” – The controller may have to call back for properties or commands private My. Input. Controller controller; protected My. Input. Controller { get { if (controller == null){ controller = new My. Input. Controller(this); } return controller; } } Karlstads University Computer Science 33 Software Engineering, DVGC 05

Initial Page-Load Event Handling • Initial loading of a page is done signalled in Page_Load event handler if (!Is. Postback){ Controller. Handle. Request. Parameters(parameters); this. Load. Form. Data(); } Karlstads University Computer Science 34 Software Engineering, DVGC 05

GUI Architectures • • • GUI and systems Presentation and models Views and presentation logic Karlstads University Computer Science 35 Software Engineering, DVGC 05

Validation code • From Win. Form solution Booking candidate = Make. Booking(); if (Booking. Validation. Is. Valid(candidate)) { Mapper. Booking. Mapper. Add(candidate); Load. Data(); Locate. At(candidate); } else { Message. Box. Show("Illegal booking data entered"); } Karlstads University Computer Science 36 Software Engineering, DVGC 05

Validation Code • From Web. Form solution Booking candidate = Make. New. Booking(); if (Is. Booking. Valid(candidate)) { Add(candidate); Response. Redirect("Bookings. Form. aspx"); } else { Response. Write("<P>Den nya beställningen är inte giltig</P>"); } Karlstads University Computer Science 37 Software Engineering, DVGC 05

The Input Handling is The Same • There is code duplication between the two – Symptom of wrong location • Separate common code in a separate input controller class – Delegate from event handler to input controller – Supply the information needed by the controller – Some of the functions may be pushed all the way to the domain logic • Similar situations occur on output – Separate out common presentation aspects in a presenter – Presenter must talk with the form – The form is dumb • Input controller and presenter may be developed using TDD – May be combined into one Input Controller/Presenter Karlstads University Computer Science 38 Software Engineering, DVGC 05

Communication Scenario for MVC 1: New. Booking 2: Add. Booking 3: Booking. Added. Event 4: Get. Bookings 5: Show. Bookings 6: alarm = Is. Alarm 7: if (alarm) Set. Color(red) : Form 5, 7 1 : Input Controller : Presenter 3 2 : Domain Logic Karlstads University Computer Science 39 4, 6 = model in MVC terms Software Engineering, DVGC 05

Issues for Different Output Devices • The controller and presenter do the same job for both windows and web – Talk to the form through an interface – Or use an adapter in-between • Requires all output operations in the form to be formalised – Set. Booking. List(bookings) • instead of Booking. Data. Grid. Data. Source = bookings – Defined in the interface • Implemented in each of the forms or the adapter • The forms may be replaced by dummy classes for testing – The whole application is tested except physical input and display Karlstads University Computer Science 40 Software Engineering, DVGC 05

Exercise 6. 2 – Web Presentation Architecture : Page 1: New. Booking 2: Add. Booking 3: Booking. Added. Event 4: Get. Bookings 5: Show. Bookings 6: alarm = Is. Alarm 7: if (alarm) Set. Color(red) or : Form 1 5, 7 : Input Controller : Presenter 3 2 4, 6 : Domain Logic Karlstads University Computer Science 41 Software Engineering, DVGC 05

References [TWISTING THE TRIAD] Andy Bower, Blair Mc. Glashan, TWISTING THE TRIAD, The evolution of the Dolphin Smalltalk MVP application framework, Tutorial Paper for ESUG 2000, http: //www. object-arts. com/papers/Twisting. The. Triad. PDF Karlstads University Computer Science 42 Software Engineering, DVGC 05