Embed Size (px)
DESCRIPTION
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.
Citation preview
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
© itemis AG
●●
Spray – A quick way to create Graphiti
Eclipse Demo Camp Dresden 8.11.2011
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
© itemis AG
Agenda
Aspects of Graphiti development
Motivation of Spray
Demo
Next steps
Spray – A quick way to create Graphiti
2
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
© itemis AG
Agenda
Aspects of Graphiti development
Motivation of Spray
Demo
Next steps
Spray – A quick way to create Graphiti
3
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
© itemis AG
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/graphiti-
introduction.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
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
5
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
© itemis AG
6
AddFeature
DirectEditingFeature
CreateFeature
RemoveFeature
DeleteFeature
UpdateFeature
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
© itemis AG
7
ResizeFeature
MoveFeature
DrillDownFeatureFeature
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
© itemis AG
8
Tool Tips
ContextButtons
Palette
ConnectionDecorator
SelectionBehavior
Context Menus
Decorators
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
© itemis AG
9
text formatting
background color
color gradients
font size
color
style
bold italic
symbols
figures
rectangle
ellipse
polygone
visual properties
states
selection interaction
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
© itemis AG
10
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
© itemis AG
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
11
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
© itemis AG
Agenda
Aspects of Graphiti development
Motivation of Spray
Demo
Next steps
Spray – A quick way to create Graphiti
12
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
© itemis AG
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
USING SPRAY TO DEVOLOP GRAPHICAL DSLS SHOULD BE
AS EASY AS DEVLOPING TEXTUAL DSLS USING XTEXT.
vision
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
© itemis AG
Agenda
Aspects of Graphiti development
Motivation of Spray
Demo
Next steps
Spray – A quick way to create Graphiti
15
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
© itemis AG
16
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
© itemis AG
17
imported domain model
let the concept „State“ be a
container in the diagram
referenced attribut of state
referenced containment
that is represented by its name
attribut
let the concept „Transition“ be a connection
line in the diagram
referenced anchors
expressions
introduces the palette compartment
„Transistions“ where to place the Transition
element
background color
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
© itemis AG
18
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
© itemis AG 9
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
© itemis AG
Generation Gap Pattern
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
© itemis AG
Agenda
Aspects of Graphiti development
Motivation of Spray
Demo
Next steps
Spray – A quick way to create Graphiti
21
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
© itemis AG
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/ Next steps
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
© itemis AG
23
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
© itemis AG
itemis AG | Am Brambusch 15-24 | D-44536 Lünen | www.itemis.de
Jörg Reichert
itemis AG – outlet Leipzig
+49 151 173 96 690
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
© itemis AG
Agenda
Aspects of Graphiti development
Motivation of Spray
Demo
Next steps
Backup
Spray – A quick way to create Graphiti
25
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
© itemis AG
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
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)
