1. UI/UI PROTOTYPE GENERATION Sum Pham

2. C ONTENTS Framework overview Current approaches Introduce a model-driven user interface generation

3. F RAMEWORK OVERVIEW Declarative models?

4. C ONTENTS Framework overview Current approaches Introduce a model-driven user interface generation

5. C ONTENTS XIS approach (Silva et al., 2007; Silva & Videira, 2008; Silva, 2003) The OO-Method approach (Pastor & Molina, 2007; Pastor et al., 2004; Molina, 2004; Molina & Hernández, 2003) The ZOOM approach (Jia et al., 2005) Martinez methodology (Martinez et al., 2002) Elkoutbi approach(Elkoutbi et al., 2006) Forbrig approach (Wolff et al., 2005a; Wolff et al., 2005b; Javahery et al., 2007; Radeke et al., 2007; Forbrig et al., 2004; Reichart et al., 2004)

6. T HE XIS APPROACH Model-to-model generation Separates modelling of different system into sub- models: Entities view Use Case view User Interface view Has two approaches Dummy approach Smart approach

7. T HE XIS APPROACH - D UMMY Entities View: Composes only domain model Use case view: only defines an actors’ hierarchy (actors view) User interface view: must be fully specified comprising an Interaction Spaces View: Abstract screens Navigation Space View

8. T HE XIS APPROACH - S MART Entities View: Domain View: models the domain entities by using a UML class model + XIS-profile stereotyped Business Entities View: group domain entities Use-Cases View: Actors View: defines the hierarchy of actors UseCases View: identifies use cases and relates each actor with the use cases User-Interfaces View: can be generated from other models A XIS model may, then, be inputted to a model to code (M2C) generation process

9. C ONTENTS XIS approach (Silva et al., 2007; Silva & Videira, 2008; Silva, 2003) The OO-Method approach (Pastor & Molina, 2007; Pastor et al., 2004; Molina, 2004; Molina & Hernández, 2003) The ZOOM approach (Jia et al., 2005) Martinez methodology (Martinez et al., 2002) Elkoutbi approach(Elkoutbi et al., 2006) Forbrig approach (Wolff et al., 2005a; Wolff et al., 2005b; Javahery et al., 2007; Radeke et al., 2007; Forbrig et al., 2004; Reichart et al., 2004)

10. T HE OO-M ETHOD APPROACH Producing a formal specification of a software system using OASIS(the execution model.). Graphically model a system at a conceptual level → OASIS specification: Object Model(UML class diagram): capturing domain classes and classes associated to user roles. Dynamic Model: Used to specify valid object lifecycles and interaction between objects. Object lifecycles: state transition diagram/class Object interactions: interaction diagram Functional Model: the semantics of change of state Presentation Model: How users will interact with the system

11. C ONTENTS XIS approach (Silva et al., 2007; Silva & Videira, 2008; Silva, 2003) The OO-Method approach (Pastor & Molina, 2007; Pastor et al., 2004; Molina, 2004; Molina & Hernández, 2003) The ZOOM approach (Jia et al., 2005) Martinez methodology (Martinez et al., 2002) Elkoutbi approach(Elkoutbi et al., 2006) Forbrig approach (Wolff et al., 2005a; Wolff et al., 2005b; Javahery et al., 2007; Radeke et al., 2007; Forbrig et al., 2004; Reichart et al., 2004)

12. T HE ZOOM APPROACH ZOOM: Z-based OO modelling notation Separates an application into three parts: Structure: ZOOM for structural models Behaviour: ZOOM-FSM User-interface: ZOOM-UIDL Java-like textual syntax for structural and behavioural models XML-based language for the User-Interface model ZOOM provides a graphical representation of models consistent with UML diagrams

13. C ONTENTS XIS approach (Silva et al., 2007; Silva & Videira, 2008; Silva, 2003) The OO-Method approach (Pastor & Molina, 2007; Pastor et al., 2004; Molina, 2004; Molina & Hernández, 2003) The ZOOM approach (Jia et al., 2005) Martinez methodology (Martinez et al., 2002) Elkoutbi approach(Elkoutbi et al., 2006) Forbrig approach (Wolff et al., 2005a; Wolff et al., 2005b; Javahery et al., 2007; Radeke et al., 2007; Forbrig et al., 2004; Reichart et al., 2004)

14. M ARTINEZ METHODOLOGY Extracting use cases and actors from the business process model Build sequence diagrams for each use case Enriched sequence diagrams with UI related information. Generating application forms and state transition diagrams for the interface objects and control objects present in the sequence diagrams

15. C ONTENTS XIS approach (Silva et al., 2007; Silva & Videira, 2008; Silva, 2003) The OO-Method approach (Pastor & Molina, 2007; Pastor et al., 2004; Molina, 2004; Molina & Hernández, 2003) The ZOOM approach (Jia et al., 2005) Martinez methodology (Martinez et al., 2002) Elkoutbi approach(Elkoutbi et al., 2006) Forbrig approach (Wolff et al., 2005a; Wolff et al., 2005b; Javahery et al., 2007; Radeke et al., 2007; Forbrig et al., 2004; Reichart et al., 2004)

16. E LKOUTBI APPROACH Start with system domain structural model and a use case model Formalizing each use case through a set of UML collaboration diagrams

17. E LKOUTBI APPROACH Collaboration diagram message is manually labelled with UI constraints (inputData and outputData)

18. E LKOUTBI APPROACH A statechart is created for each distinct class in a collaboration diagram

19. E LKOUTBI APPROACH Generate UI prototypes for every interface object defined in the class diagram

20. C ONTENTS XIS approach (Silva et al., 2007; Silva & Videira, 2008; Silva, 2003) The OO-Method approach (Pastor & Molina, 2007; Pastor et al., 2004; Molina, 2004; Molina & Hernández, 2003) The ZOOM approach (Jia et al., 2005) Martinez methodology (Martinez et al., 2002) Elkoutbi approach(Elkoutbi et al., 2006) Forbrig approach (Wolff et al., 2005a; Wolff et al., 2005b; Javahery et al., 2007; Radeke et al., 2007; Forbrig et al., 2004; Reichart et al., 2004)

21. Interactively generates an abstract UI model, and then a concrete UI Start with: Task model Business objects model User model Device model Create more concrete models by modeller(computer assisted: DiaTask tool, PIM Tool)

22. C ONTENTS Framework overview Current approaches Introduce a model-driven user interface generation

23. MODEL - DRIVEN UI GENERATION AND DEVELOPMENT From Domain and Use Case Models General approach

24. MODEL - DRIVEN UI GENERATION AND DEVELOPMENT Domain model: UML class diagram, with classes (base domain entities), attributes and relationships Simple domain model (DM):first iterations Extended domain model (EDM): domain model is extended with additional features. Use case model (UCM): integrated with the EDM On each iteration, the generated UI may be tuned by a UI designer Output UI is in a XML-based UI description language

25. MODEL - DRIVEN UI GENERATION AND DEVELOPMENT

26. MODEL - DRIVEN UI GENERATION AND DEVELOPMENT - E XAMPLE