graphical views for xtext
Post on 22-May-2015
883 Views
Preview:
DESCRIPTION
TRANSCRIPT
Graphical Views For XtextJan Köhnlein
2014, Kiel
Why Go Graphical?
I Like Diagrams
Are very suggestive
Simplify communication
Highlight relations between elements
Are made for humans!
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
Graphical Model Editing
Mapping Mismatch
TreeNode*
children Diagram
Node Edge
edgesnodes * *
TreeNode A { TreeNode B }
Diagram { Node A Node B Edge (A,B)}
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
The workarounds for these problems…
…will not only require a lot of effort…
…but will also cause major usability quirks.
Graphical Editor View
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
1 - Graphviz
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
2 - Zest
Zest
Views based on GEF
JFace abstractions for diagrams IContentProvider ILabelProvider
Hooks to configure figures, nesting and filters
New layouts
Enhanced Usability (?)
Live Views for Xtext
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 ] } ...
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 }}
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) }]
Diagram Layout
KIELER Open-source, University of Kiel Java API to various open-source layout algorithms Including Graphviz layout
yFiles (yWorks)
ILOG JViews (IBM)
3 - Build Your Own GEF View
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
4 - JavaFX
JavaFX
Next generation graphics framework
Overcomes limitations of GEF/SWT
Not primarily a diagram framework
Intuitive API
Combine with Xtend for max productivity
An Unfair Comparison
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 + ++
Conclusion
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
Links
https://github.com/JanKoehnlein
https://www.informatik.uni-kiel.de/rtsys/kieler/
top related