The Graphiti framework is a new approach to create highly sophisticated visual editors on top of the GEF framework. Graphiti can easily be integrated with EMF as the domain modeling framework. The creation of visual editors is done in Java, programming against the Graphiti framework API. It is fairly simple, but yet repetitive, which makes it a candidate to be supported by the means of model-driven development. Spray aims to provide Domain Specific Languages (DSL) (implemented with Xtext) to describe Visual DSL Editors against the Graphiti runtime, and provide code generation (implemented with Xtend) to create the boilerplate code for realizing the implementation against the Graphiti framework. Potentially the Spray DSL can be used to generate code for other graphical editor frameworks as well, although it is not the primary focus of the project now. The generated code is structured in such a way that one can always extend/overwrite the generated code with handwritten Java to add advanced Graphiti features that are not supported directly by the Spray DSL. Therefore Spray makes use of the "Generation Gap Pattern". With the help of the tools created with Spray, Graphiti based diagram editors can be created much faster and reliable than doing it purely by hand.

1. Spray – A quick way to create Graphiti
Eclipse Demo Camp
Dresden
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
8.11.2011 ●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
© itemis AG

2. Agenda
Spray – A quick way to create Graphiti
Aspects of Graphiti development

Motivation of Spray

Demo

Next steps
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●

© itemis AG
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
2

3. Agenda
Spray – A quick way to create Graphiti
Aspects of Graphiti development

Motivation of Spray

Demo

Next steps
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●

© itemis AG
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
3

4. •
Graphiti is a framework for developing graphical editors
•
is an alternative to the Graphical Modeling Framework (GMF)
•
official site: http://www.eclipse.org/graphiti/
•
user guide:
http://help.eclipse.org/indigo/topic/org.eclipse.graphiti.doc/resources/docu/gfw/graphitiintroduction.htm
•
can be used to develop multiple kinds of diagram editors:
•
box and lines diagrams as known from UML (e.g. use case , class, activity, sequence,
state chart diagrams)
•
workflow diagrams (e.g. BPMN2)
•
modeling UIs (with going beyond the abilities of common UI designers)
•
with some restrictions even technical drawings
(http://en.wikipedia.org/wiki/Technical_drawing) / computer aided design (CAD), like
engineering drawings
•
electrical diagrams
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
•
© itemis AG
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
4

5. Graphiti is used in more and more projects:
JPA Diagram Editor:
http://wiki.eclipse.org/
JPA_Diagram_Editor_Project_Tutorial
eTrice:
http://www.eclipse.org/etrice/
BPMN2 Editor for Eclipse:
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
https://github.com/imeikas/
BPMN2-Editor-for-Eclipse/wiki
© itemis AG
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
5

6. CreateFeature
UpdateFeature
AddFeature
RemoveFeature
DirectEditingFeature
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
DeleteFeature
© itemis AG
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
6

7. ResizeFeature
MoveFeature
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
DrillDownFeatureFeature
© itemis AG
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
7

8. SelectionBehavior
Tool Tips
ConnectionDecorator
ContextButtons
Decorators
Context Menus
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
Palette
© itemis AG
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
8

9. bold
states
italic
selection
style
interaction
text formatting
size
font
color
polygone
color gradients
figures
visual properties
rectangle
background color
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
ellipse
symbols
© itemis AG
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
9

10. ●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
© itemis AG
10

11. Graphiti approach:
•
framework in place of code generation
•
encapsulates Graphical Editing Framework (GEF) in a comprehensible API
•
command pattern separates tasks
•
low effort to apply changes /extensions of the domain model to the diagram editor code
disadvantages:
repetitive programming, code duplication
•
Some soft spots in the Graphiti API
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
•
© itemis AG
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
11

12. Agenda
Spray – A quick way to create Graphiti
Aspects of Graphiti development

Motivation of Spray

Demo

Next steps
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●

© itemis AG
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
12

13. Spray approach:
•
specify diagram editors in a concise domain specific language(DSL)
•
generate the Graphiti code
•
use of the generation gap pattern, to adapt and extend the generated code
•
provide extensions to the Graphiti framework (e.g. wizards, dependency injection)
advantages:
no need for deep insight neither in GEF API nor in Graphiti API
•
get to a first running graphical editor with low effort
•
adapt your diagram editor quickly (change your DSL  regenerate  test)
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
•
© itemis AG
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
13

14. vision
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
USING SPRAY TO DEVOLOP
GRAPHICAL DSLS SHOULD BE
AS EASY AS DEVLOPING
TEXTUAL DSLS USING XTEXT.
© itemis AG
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●

15. Agenda
Spray – A quick way to create Graphiti
Aspects of Graphiti development

Motivation of Spray

Demo

Next steps
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●

© itemis AG
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
15

16. ●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
© itemis AG
16

17. imported
domain model
background color
referenced attribut
of state
let the concept
„State“ be a
container in the
diagram
referenced
anchors
let the concept
„Transition“ be
a connection
line in the
diagram
referenced
containment
that is
represented
by its name
attribut
expressions
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
introduces the palette
compartment
„Transistions“ where
to place the Transition
element
© itemis AG
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
17

18. ●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
© itemis AG
18

19. ●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
© itemis AG
9

20. ●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
Generation Gap Pattern
© itemis AG
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●

21. Agenda
Spray – A quick way to create Graphiti
Aspects of Graphiti development

Motivation of Spray

Demo

Next steps
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●

© itemis AG
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
21

22. Next steps
Nächste Schritte
support more Graphiti features by
DSL and generator

gain more users and feedback
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●

http://code.google.com/a/eclipselabs.org/p/spray/
© itemis AG
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●

23. ●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
© itemis AG
23

24. Jörg Reichert
itemis AG – outlet Leipzig
+49 151 173 96 690
joerg.reichert@itemis.de
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
itemis AG | Am Brambusch 15-24 | D-44536 Lünen | www.itemis.de
© itemis AG
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●

25. Agenda
Spray – A quick way to create Graphiti
Aspects of Graphiti development

Motivation of Spray

Demo

Next steps

Backup
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●

© itemis AG
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
25

26. history
•
started as public founded research project
•
first practical adoption for visual modeling of insurance products (PMW project)
•
generation of multiple diagram editors
•
editors are used by non IT staff in production
•
put under Eclipse licence since July 2011: http://code.google.com/a/eclipselabs.org/p/spray/
•
since then at lot happened to the development infrastructure
continuous build on a CloudBees hosted Jenkins server:
https://spray.ci.cloudbees.com/job/spray-ci-build/
•
started user and developer documentation
•
unit tests for the Spray DSL
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
•
© itemis AG
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●

27. technology
Eclipse 3.7.1: development and runtime environment
•
EMF 2.7.1: model framework for domain and diagram model
•
Graphiti 0.8.1: runtime for diagram editor
•
Xtext 2.1.0: grammar framework for the Spray DSL
•
Xbase 2.1.0: provider of expressions inside the DSL
•
Xtend 2.1.0: generator templates
•
Maven Tycho 0.13.0: build framework
•
Xtext-Utils Unit-Testing 0.9.2: testing the DSL
•
SWTBot 2.0.5: testing the RCP and diagram UI
•
WikiText Textile 1.6.0: writing and generation the documentation
•
Jenkins 1.4: continuous integration (CI) server hosted on CloudBees (spray.ci.cloudbees.com)
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
•
© itemis AG
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●
●