ui modeling in action with pmf, e4(xwt) and egf

Ecl

ipse

Co n

20 1

0

© 2010 by Soyatec and Thales; made available under the EPL v1.0

UI modeling in Action with PMF, e4 and EGFYves Yang – Soyatec

Benoît Langlois – Thales/EPM

Thomas Guiu - Soyatec

2

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


Agenda

Introduction

PMF

EGF

PMF to XWT with EGF

Conclusion

3

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


Why UI modeling in Software Engineering?

Current Practice Writing UI (User Interface) code for a target platform

Ex: JFace, SWT code

Main Drawbacks Time-consuming activity

Scalability issue

Target platform-dependent Maintenance issue UI Technology is changing quickly

4

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


Why UI modeling in Software Engineering?

Paradigm shift Modeling UI in order to abstract UI description:

1. Creating a platform-independent UI model

2. Next, targeting platform-specific UI code

This implies:

1. A platform-independent UI metamodel PMF

2. A generation engine to target a UI platform EGF

5

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


From PMF to UI Code

conforms to conforms toconforms to

M1: Model levelM2: Metamodel level

6

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


From PMF to UI Code

conforms to conforms toconforms to

M1: Model levelM2: Metamodel level

XWT Codeof purcharse order UI

Purcharse order UI

7

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


Agenda

Introduction

PMF

EGF

PMF to XWT with EGF

Conclusion

8

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


Purpose

PMF is a high Extensible Exterprise Modeling Solution for data presentation

9

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


Purpose

• Abstraction Data Model

UI Model

Data Binding technology

Target programming language

• Extensibility & Customization UI Model

Model Transformation engine

Integration with other tools such as DSL

• Top-down approach

PIM

PSM

10

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


Purpose

• Runtime mode Interactive

Standalone Embedded in other tools

Automating Batch for integration in build system

• Users Framework developer

Application designer

11

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


Benefices

Make development of UI’s easier

More productive

Separate roles in UI development to enable specialization and customization

Integrate UI development with other Eclipse tool stack

12

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


Architecture

13

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


Agenda

Introduction

PMF

EGF

PMF to XWT with EGF

Conclusion

14

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


What is EGF?

EGF (Eclipse Generation Factories) is an Eclipse open source project under the EMFT project.

Purpose: provide a model-based generation framework

Operational objectives: Supporting complex, large-scale and customizable generations Promoting the constitution of generation portfolios in order to

capitalize on generation solutions Providing an extensible generation structure

15

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


Generative Software

Dealing with generation complexityIssue

An integrated and extensible software factory framework

Proposedsolution

What target-platform?

Generation reusability?

Generation orchestration?

Generation data, which ones, where?

One-click generation solution?

Update strategy of the produced artifacts?

Combining [model|text|dsl]-to-[Model|text|dsl]?

How to develop & test?

Generation customization?

Generation scope?

Best practices, guidance?

Generation workflow?

Executability? Distribution?

Merging Generation?

Performance, scalability?

Variability? Product lines?

Integration of new language?

Software IndustrializationPurpose

Multiplicity of languages and engines?

16

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


Generation units of EGF

17

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F



works with

uses

Factory Component

Composite generation unit Location to declare: - Generation data - Generation orchestration

Composite generation unit Location to declare: - Generation data - Generation orchestration

18

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F



works with

Portfolio

uses

Capitalization

Factory Component

Consistent set of Factory Components Meets the need to have off-the-shelf generation solutions

Consistent set of Factory Components Meets the need to have off-the-shelf generation solutions

19

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F



works with

0 1 0 1

uses

Implementation

Task (e.g., Java)

Factory Component

The smallest generation unit Reference to executable code in a given language

The smallest generation unit Reference to executable code in a given language

20

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F



works with

uses

Pattern

Factory Component

Systematicbehavior

Notation to define systematic behavior applicable onto a resource Declarative style The behavior conforms to a language (e.g., Jet, Java)

Notation to define systematic behavior applicable onto a resource Declarative style The behavior conforms to a language (e.g., Jet, Java)

21

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F



works with

Portfolio

0 1 0 1

uses

Capitalization Implementation

Task (e.g., Java) Pattern

Factory Component

Systematicbehavior

Today

22

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


EGF

EGF Structure

23

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


Activity Hierarchy

Activity

Factory Component

Task […]

Activity Type

24

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


Activity Hierarchy

Activity

Factory Component

Task

Java Task [Language]Task

[…]

Java Class

1 implementation

Activity Type

Implementation

25

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


Activity and Production Plan

Activity

Factory Component

Task

invocation * ContractContainer

Contract*

0-1

Production Plan

0-1

Activity Invocation

*

Invocation Contract*

contract

26

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


Activity and Production Plan

Activity

Factory Component

Task

invocation * ContractContainer

Contract*

0-1

Production Plan

0-1

Activity Invocation

*

Contract

IN Contract

OUT Contract IN/OUT Contract

27

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


EGF Structure

• Storage In FCore file: factory components + tasks

• Execution Dynamic

Resolution of platform / workspace environment

Structure check

• Extensibility EGF can be enriched by the principle of model extension

Discovery at runtime

Java Task and production plan are examples of implementation and workflow today

28

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


Pattern – Definition

• Definition: A pattern is a solution to a recurrent generation problem

• Purpose Applying a systematic behavior onto a resource

Clearly dissociating the specification (external view) from the implementation (internal view) of the behavior

Reusing and customizing a pattern in different contexts

Supporting multilingual patterns in order to apply the best programming language to a situation, and then supporting multi-paradigm (M2T, M2M, T2M, T2T)

29

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


EGF

PATTERN

30

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


Pattern Relationships

Pattern inheritance

Pattern delegation Pattern injection

Pattern callback

Pattern extension

extends

(not available yet)

The Pattern orchestration specifies the pattern relationshipsPossibility to combine different pattern relationships in the same orchestration

Multilingual call

31

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


Pattern execution Big Picture

Result

Final Result

Pattern Execution onto a resource

Resource,

e.g. Model

PatternPatternPattern

Pattern Execution Process

Pattern execution engines, e.g. for Jet, Java

Optional - Pattern reporter for final form

PatternStrategy

Patterns selection Way to apply patterns

32

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


Agenda

Introduction

PMF

EGF

PMF to XWT with EGF

Conclusion

33

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


« PMF to (e4)XWT » Generation

xwt fileruntime

34

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F



UI Designer

realizes

Provides: - PMF model - data model .ecore

UI User

uses UI

Provides: - domain data

35

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F



PMF/XWT Designer/ Developer

realizesportfolio

36

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


Generation description

Creation of the application description files; e4-specific Declaration of menus, commands, part layouts

2

1234

Creation of the Java part of the XWT components; XWT-specific3

Creation of XWT files; XWT-specific Description of the components, supported events

4

Creation of the project1

37

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


Project Creation & Configuration Files

38

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F



PMF model

Create Project

Java Pattern

39

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F



PMF model

Jet Pattern

40

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


« Create Manifest » Pattern explained

• Objective: Producing the « MANIFEST.MF » file

• Input: PMF model

Pattern parameter: Application node of the PMF model

• Means: Using a Jet-based Pattern for « Model-to-text » transformation

Using a reporter for persistence of the pattern result

41

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F



Create Manifest

Base

Inheritance

42

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F



Create Manifest

Base

Applicationparameter

Inheritance

43

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F



Polymorphism

applied orchestration

44

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F



Polymorphism

applied orchestration

45

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


Parts Creation – XWT Files

46

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F



Forms /XWT filemapping

47

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F




Model-driven pattern strategyused

48

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F




Form_xwt

Jet Pattern

1

49

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F




Collection

Jet Pattern

21

50

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F




DataField

Jet Pattern

21

3

51

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F




Reference

Jet Pattern

21

3

4

52

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


Summary

Engineering activity

Multi-target

53

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


Summary

Generation Portfolio

PMF-to-XWT Portfolio

based on

customization

Eclipse Component

Off-The-Shelf solution

Variants

54

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


Development Environment

• Design PMF: Eclipse Galileo, 3.5.x

EGF: Eclipse Galileo, > 3.5.1

• Runtime XWT: e4/Helios

55

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


Agenda

Introduction

PMF

EGF

PMF to XWT with EGF

Conclusion

56

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


Conclusion

Regarding the PMF-to-(e4)XWT generation with EGF Maturity level: Prototype, but promising

Not covered: events, multi-forms

Interest to have an integrated generation tool with EGF

Improvement #1 1. Code-oriented to model-based paradigm shift,

2. Engineering-driven activities: producing UI, UI tests, doc…

Could be applied to other engineering activities, such as diagram

Improvement #2 Interest of off-the-shelf factories

Future work: Pattern contribution and customization for flexible generations

57

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


UI modeling in Action

Thank You!

EGF is supported by the European Project OPEES

58

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


UI modeling in Action

Additionnal Slides

59

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


Demo #1 EGF – EMF Wrapper

Library.fcore file

contains

Task and Factory component invocation orchestration

Main Factory Component

60

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F



Library.fcore file

contains

Task reference Contract value for a contract (= task parameter)

implementation Task Java Class

Java Task usage

61

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F



Library.fcore file

contains

Factory component contracts

Factory component reference

Factory Component usage

Pattern viewpoint

Task invocation orchestration

62

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


In/Output relationships

Quantity’s Properties

Amount’s Properties

63

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


EGF – Pattern – External View

Super-Pattern

Pattern PatternTypedelegation

Language

Type 0..n variable

0..n parameter

1 nature

Query

Constraint 0..1 preCondition

Definition: • query/parameter: query for object selection onto a resource• nature: language used for the pattern implementation • preCondition/Constraint: constraint to be verified before application• variable/Type: local variable declaration for the pattern implementation

64

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


EGF – Pattern – External View

EClassifierGen

EClass Gen

EStructural Feature

GenEClass

delegation

Jet

Example

• The EClassGen pattern is applied on a Ecore resource • Objects selected on the ecore resource: EClass instances• It specializes the EClassifierGen pattern• It applies a model-to-text generation in Jet• Its also applies a generation on its features by delegation to the EStructuralFeatureGen pattern

ECoreResource

element

nature

Query

65

Ecl

ipse

Co

n 2

010

– U

I m

od

elin

g i

n A

ctio

n w

ith

PM

F,

e4 a

nd

EG

F


EGF – Pattern – Implementation View

Methods which implement the pattern Order to execute the methods

header: typically used for the Jet headerinit: method for pattern initialization (e.g., variable initialization)A method editor allows to edit pattern methods

ui modeling in action with pmf, e4(xwt) and egf

Documents

ui modeling

generation units of

generation customization

generation engine

ui development

generation solutions

generation complexity

generation reusability