spray democamp dresden 2011-11-08
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.TRANSCRIPT
βββββββββββββββββββββββββββββββββββββ
β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β
Β© 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)