UI/UI PROTOTYPE GENERATION Sum Pham. C ONTENTS Framework overview Current approaches Introduce a...

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

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