Your SlideShare is downloading. ×
0
Spray Democamp Dresden 2011-11-08
Spray Democamp Dresden 2011-11-08
Spray Democamp Dresden 2011-11-08
Spray Democamp Dresden 2011-11-08
Spray Democamp Dresden 2011-11-08
Spray Democamp Dresden 2011-11-08
Spray Democamp Dresden 2011-11-08
Spray Democamp Dresden 2011-11-08
Spray Democamp Dresden 2011-11-08
Spray Democamp Dresden 2011-11-08
Spray Democamp Dresden 2011-11-08
Spray Democamp Dresden 2011-11-08
Spray Democamp Dresden 2011-11-08
Spray Democamp Dresden 2011-11-08
Spray Democamp Dresden 2011-11-08
Spray Democamp Dresden 2011-11-08
Spray Democamp Dresden 2011-11-08
Spray Democamp Dresden 2011-11-08
Spray Democamp Dresden 2011-11-08
Spray Democamp Dresden 2011-11-08
Spray Democamp Dresden 2011-11-08
Spray Democamp Dresden 2011-11-08
Spray Democamp Dresden 2011-11-08
Spray Democamp Dresden 2011-11-08
Spray Democamp Dresden 2011-11-08
Spray Democamp Dresden 2011-11-08
Spray Democamp Dresden 2011-11-08
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Spray Democamp Dresden 2011-11-08

96

Published on

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 …

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
96
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  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 ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●

×