UI/UI PROTOTYPE GENERATION Sum Pham
Feb 23, 2016
UI/UI PROTOTYPE GENERATION
Sum Pham
CONTENTS
Framework overview
Current approaches
Introduce a model-driven user interface
generation
FRAMEWORK OVERVIEWDeclarative
models?
CONTENTS
Framework overview
Current approaches
Introduce a model-driven user interface
generation
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 (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)
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
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
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 UseCases View: identifies use cases and relates
each actor with the use cases User-Interfaces View: can be generated from
other modelsA XIS model may, then, be inputted to a model to code (M2C) generation process
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 (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)
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
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 (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)
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
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 (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)
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
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 (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)
ELKOUTBI APPROACH Start with system domain structural model
and a use case model Formalizing each use case through a set of
UML collaboration diagrams
ELKOUTBI APPROACH Collaboration diagram message is manually
labelled with UI constraints (inputData and outputData)
ELKOUTBI APPROACH A statechart is created for each distinct class
in a collaboration diagram
ELKOUTBI APPROACH Generate UI prototypes for every interface
object defined in the class diagram
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 (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)
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)
CONTENTS
Framework overview
Current approaches
Introduce a model-driven user interface
generation
MODEL-DRIVEN UI GENERATION AND DEVELOPMENT From Domain and Use Case Models General approach
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
MODEL-DRIVEN UI GENERATION AND DEVELOPMENT
MODEL-DRIVEN UI GENERATION AND DEVELOPMENT - EXAMPLE
MODEL-DRIVEN UI GENERATION AND DEVELOPMENT - EXAMPLE