Slides of a talk held at XtextCon 2014

1. Graphical Views
For Xtext
Jan Köhnlein
2014, Kiel

2. Why Go Graphical?

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

5. Graphical Model Editing

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.

11. Graphical
EditorView

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

26. An Unfair Comparison

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

30. Links
https://github.com/JanKoehnlein
https://www.informatik.uni-kiel.de/rtsys/kieler/