ui/ui prototype generation

28
UI/UI PROTOTYPE GENERATION Sum Pham

Upload: lysa

Post on 23-Feb-2016

73 views

Category:

Documents


1 download

DESCRIPTION

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. - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: UI/UI prototype generation

UI/UI PROTOTYPE GENERATION

Sum Pham

Page 2: UI/UI prototype generation

CONTENTS

Framework overview

Current approaches

Introduce a model-driven user interface

generation

Page 3: UI/UI prototype generation

FRAMEWORK OVERVIEWDeclarative

models?

Page 4: UI/UI prototype generation

CONTENTS

Framework overview

Current approaches

Introduce a model-driven user interface

generation

Page 5: UI/UI prototype 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)

Page 6: UI/UI prototype generation

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

Page 7: UI/UI prototype generation

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

Page 8: UI/UI prototype generation

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

Page 9: UI/UI prototype 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)

Page 10: UI/UI prototype generation

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

Page 11: UI/UI prototype 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)

Page 12: UI/UI prototype generation

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

Page 13: UI/UI prototype 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)

Page 14: UI/UI prototype generation

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

Page 15: UI/UI prototype 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)

Page 16: UI/UI prototype generation

ELKOUTBI APPROACH Start with system domain structural model

and a use case model Formalizing each use case through a set of

UML collaboration diagrams

Page 17: UI/UI prototype generation

ELKOUTBI APPROACH Collaboration diagram message is manually

labelled with UI constraints (inputData and outputData)

Page 18: UI/UI prototype generation

ELKOUTBI APPROACH A statechart is created for each distinct class

in a collaboration diagram

Page 19: UI/UI prototype generation

ELKOUTBI APPROACH Generate UI prototypes for every interface

object defined in the class diagram

Page 20: UI/UI prototype 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)

Page 21: UI/UI prototype generation

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)

Page 22: UI/UI prototype generation

CONTENTS

Framework overview

Current approaches

Introduce a model-driven user interface

generation

Page 23: UI/UI prototype generation

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

Page 24: UI/UI prototype generation

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

Page 25: UI/UI prototype generation

MODEL-DRIVEN UI GENERATION AND DEVELOPMENT

Page 26: UI/UI prototype generation

MODEL-DRIVEN UI GENERATION AND DEVELOPMENT - EXAMPLE

Page 27: UI/UI prototype generation

MODEL-DRIVEN UI GENERATION AND DEVELOPMENT - EXAMPLE

Page 28: UI/UI prototype generation