1 / 28

UI/UI prototype generation

UI/UI prototype generation. Sum Pham. Contents. Framework overview Current approaches Introduce a model-driven user interface generation. Framework overview. Declarative models?. Contents. Framework overview Current approaches Introduce a model-driven user interface generation.

lysa
Download Presentation

UI/UI prototype generation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. UI/UI prototype generation Sum Pham

  2. Contents • Framework overview • Current approaches • Introduce a model-driven user interface generation

  3. Framework overview Declarative models?

  4. Contents • Framework overview • Current approaches • Introduce a model-driven user interface generation

  5. Contents • 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 (Jiaet al., 2005) • Martinez methodology (Martinez et al., 2002) • Elkoutbiapproach(Elkoutbiet 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. The 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. The XIS approach - Dummy • 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. The XIS approach - Smart • 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 • UseCasesView: 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. Contents • 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 (Jiaet al., 2005) • Martinez methodology (Martinez et al., 2002) • Elkoutbiapproach(Elkoutbiet 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. The OO-Method 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. Contents • 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 (Jiaet al., 2005) • Martinez methodology (Martinez et al., 2002) • Elkoutbiapproach(Elkoutbiet 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. The 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. Contents • 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 (Jiaet al., 2005) • Martinez methodology (Martinez et al., 2002) • Elkoutbiapproach(Elkoutbiet 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. Martinez 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. Contents • 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 (Jiaet al., 2005) • Martinez methodology (Martinez et al., 2002) • Elkoutbiapproach(Elkoutbiet 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. Elkoutbi approach • Start with system domain structural model and a use case model • Formalizing each use case through a set of UML collaboration diagrams

  17. Elkoutbi approach • Collaboration diagram message is manually labelled with UI constraints (inputDataand outputData)

  18. Elkoutbi approach • A statechart is created for each distinct class in a collaboration diagram

  19. Elkoutbi approach • Generate UI prototypes for every interface object defined in the class diagram

  20. Contents • 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 (Jiaet al., 2005) • Martinez methodology (Martinez et al., 2002) • Elkoutbiapproach(Elkoutbiet 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. Contents • 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 - Example

  27. model-driven UI generation and development - Example

More Related