Date post: | 27-Jun-2015 |
Category: |
Technology |
Upload: | joergreichert |
View: | 100 times |
Download: | 5 times |
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●
© 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)