graphical views for xtext
DESCRIPTION
Slides of a talk held at XtextCon 2014TRANSCRIPT
![Page 1: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/1.jpg)
Graphical Views For XtextJan Köhnlein
2014, Kiel
![Page 2: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/2.jpg)
Why Go Graphical?
![Page 3: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/3.jpg)
I Like Diagrams
Are very suggestive
Simplify communication
Highlight relations between elements
Are made for humans!
![Page 4: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/4.jpg)
Diagram Tools
Human-centric requirements Good visuals Usability
Customizable behavior Limited amount of information
Multiple diagrams for single model (projection) Integration with non-graphical tooling
![Page 5: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/5.jpg)
Graphical Model Editing
![Page 6: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/6.jpg)
Mapping Mismatch
TreeNode*
children Diagram
Node Edge
edgesnodes * *
TreeNode A { TreeNode B }
Diagram { Node A Node B Edge (A,B)}
![Page 7: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/7.jpg)
Editor SyncProjection means
Changes have to be merged with other editors Frameworks won’t help!
Solutions introduce further usability issues IDE surprises Loss of changes
![Page 8: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/8.jpg)
The workarounds for these problems…
![Page 9: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/9.jpg)
…will not only require a lot of effort…
![Page 10: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/10.jpg)
…but will also cause major usability quirks.
![Page 11: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/11.jpg)
Graphical Editor View
![Page 12: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/12.jpg)
Graphical Model Views
K.I.S.S. Uni-directional mapping from model to diagram Read-only model access
Makes multiple views on the same model easy
Leave model modification and details to Xtext
Simplicity allows to focus on Visuals Usability Custom behavior
![Page 13: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/13.jpg)
1 - Graphviz
![Page 14: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/14.jpg)
GraphvizSimple but powerful DSL for diagrams
“LATEX for diagrams”
Print-ready rendering
Excellent open-source layout algorithms
Used in PlantUML
digraph MrsGrantsSecretCompartments { "idle2"->"active" [label="doorClosed"] "active"->"waitingForLight" [label="drawOpened"] "active"->"waitingForDraw" [label="lightOn"] "waitingForLight"->"unlockedPanel" [label="lightOn"] "waitingForDraw"->"unlockedPanel" [label="drawOpened"] "unlockedPanel"->"idle2" [label="panelClosed"]}
idle2
active
doorClosed
waitingForLight
drawOpened
waitingForDraw
lightOn
unlockedPanel
lightOn drawOpened
panelClosed
![Page 15: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/15.jpg)
2 - Zest
![Page 16: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/16.jpg)
Zest
Views based on GEF
JFace abstractions for diagrams IContentProvider ILabelProvider
Hooks to configure figures, nesting and filters
New layouts
Enhanced Usability (?)
![Page 17: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/17.jpg)
Live Views for Xtext
![Page 18: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/18.jpg)
Xtext -> Diagramclass ShowInViewHandler extends AbstractHandler {! @Inject EObjectAtOffsetHelper eObjectAtOffsetHelper override Object execute(ExecutionEvent event) throws ExecutionException { ... val editor = EditorUtils.getActiveXtextEditor(event) if (editor != null) { val selection = editor.selectionProvider.selection as ITextSelection editor.document.readOnly[ val selectedElement = eObjectAtOffsetHelper.resolveElementAt(it, selection.offset) if (selectedElement != null) { ... // open in view } null ] } ...
![Page 19: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/19.jpg)
URIs vs EObjectsclass EObjectHandle { URI uri EObject element new(EObject element) { this.element = element this.uri = EcoreUtil.getURI(element) } def getElement() { element } def getURI() { uri } override hashCode() { uri.hashCode }! override equals(Object obj) { if(obj instanceof EObjectHandle) return obj.uri == uri else return false }}
![Page 20: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/20.jpg)
Diagram -> Xtext
@Inject IURIEditorOpener editorOpener ...selectionListener = [ event | val selection = event.selection as IStructuredSelection if(selection.size == 1) { val selectedElement = selection.firstElement if(selectedElement instanceof EObjectHandle) editorOpener.open(selectedElement.URI, true) }]
![Page 21: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/21.jpg)
Diagram Layout
KIELER Open-source, University of Kiel Java API to various open-source layout algorithms Including Graphviz layout
yFiles (yWorks)
ILOG JViews (IBM)
![Page 22: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/22.jpg)
3 - Build Your Own GEF View
![Page 23: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/23.jpg)
GEF
GEF is the base of all graphical Eclipse frameworks
Lowest level of abstraction -> maximum freedom
Allows to enhance usability to a certain degree… …but is seriously limited in rendering
![Page 24: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/24.jpg)
4 - JavaFX
![Page 25: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/25.jpg)
JavaFX
Next generation graphics framework
Overcomes limitations of GEF/SWT
Not primarily a diagram framework
Intuitive API
Combine with Xtend for max productivity
![Page 26: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/26.jpg)
An Unfair Comparison
![Page 27: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/27.jpg)
Graphviz Zest GEF JavaFX
Link with Editor no/(dot4zest) yes yes yes
Simplicity ++ + - - 0
Rendering ++ - - ++
Layouts ++ + - 0/++
Export vector raster raster raster/vector
Extensibility - - 0 + ++
![Page 28: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/28.jpg)
Conclusion
![Page 29: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/29.jpg)
Conclusion
Please, start to focus on humans/users again! Visuals and ease of use are essential Build your own behavior
Graphical views Are simple to implement Avoid usability issues of graphical editors
Head for A state-of-the art rendering framework A diagram library to get you started quickly A powerful language to build your own additions
![Page 30: Graphical Views For Xtext](https://reader034.vdocuments.us/reader034/viewer/2022050723/555e236fd8b42a6a4c8b4d3b/html5/thumbnails/30.jpg)
Links
https://github.com/JanKoehnlein
https://www.informatik.uni-kiel.de/rtsys/kieler/