Graphical Views For Xtext
2 likes2,717 views
This document discusses options for creating graphical views for Xtext models. It recommends using unidirectional mapping from models to diagrams to keep views read-only and simple. Graphviz is recommended for its simplicity and powerful layout algorithms. Zest provides views based on GEF with additional configuration options. Building custom GEF views allows maximum freedom but has rendering limitations. JavaFX overcomes GEF limitations and has an intuitive API. The conclusion recommends focusing on usability, using graphical views to avoid editor issues, and leveraging modern frameworks with custom behavior.
![Graphviz
Simple 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](https://image.slidesharecdn.com/slides-140603030326-phpapp02/85/Graphical-Views-For-Xtext-14-320.jpg)
![Xtext -> Diagram
class 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
]
}
...](https://image.slidesharecdn.com/slides-140603030326-phpapp02/85/Graphical-Views-For-Xtext-18-320.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)
}
]](https://image.slidesharecdn.com/slides-140603030326-phpapp02/85/Graphical-Views-For-Xtext-20-320.jpg)
Graphical Views For Xtext
- 1. Graphical Views For Xtext Jan Köhnlein 2014, Kiel
- 3. I Like Diagrams Are very suggestive Simplify communication Highlight relations between elements Are made for humans!
- 4. 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
- 6. Mapping Mismatch TreeNode * children Diagram Node Edge edgesnodes * * TreeNode A { TreeNode B } Diagram { Node A Node B Edge (A,B) }
- 7. Editor Sync Projection means Changes have to be merged with other editors Frameworks won’t help! Solutions introduce further usability issues IDE surprises Loss of changes
- 8. The workarounds for these problems…
- 9. …will not only require a lot of effort…
- 10. …but will also cause major usability quirks.
- 12. 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
- 13. 1 - Graphviz
- 14. Graphviz Simple 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
- 15. 2 - Zest
- 16. Zest Views based on GEF JFace abstractions for diagrams IContentProvider ILabelProvider Hooks to configure figures, nesting and filters New layouts Enhanced Usability (?)
- 17. Live Views for Xtext
- 18. Xtext -> Diagram class 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 ] } ...
- 19. URIs vs EObjects class 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 } }
- 20. 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) } ]
- 21. Diagram Layout KIELER Open-source, University of Kiel Java API to various open-source layout algorithms Including Graphviz layout yFiles (yWorks) ILOG JViews (IBM)
- 22. 3 - Build Your Own GEF View
- 23. 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
- 24. 4 - JavaFX
- 25. JavaFX Next generation graphics framework Overcomes limitations of GEF/SWT Not primarily a diagram framework Intuitive API Combine with Xtend for max productivity
- 27. 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 + ++
- 28. Conclusion
- 29. 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