Graphical Views For Xtext

2,085 views

Published on

Slides of a talk held at XtextCon 2014

Published in: Software
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,085
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Graphical Views For Xtext

  1. 1. Graphical Views For Xtext Jan Köhnlein 2014, Kiel
  2. 2. Why Go Graphical?
  3. 3. I Like Diagrams Are very suggestive Simplify communication Highlight relations between elements Are made for humans!
  4. 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. 5. Graphical Model Editing
  6. 6. Mapping Mismatch TreeNode * children Diagram Node Edge edgesnodes * * TreeNode A { TreeNode B } Diagram { Node A Node B Edge (A,B)
 }
  7. 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. 8. The workarounds for these problems…
  9. 9. …will not only require a lot of effort…
  10. 10. …but will also cause major usability quirks.
  11. 11. Graphical EditorView
  12. 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. 13. 1 - Graphviz
  14. 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. 15. 2 - Zest
  16. 16. Zest Views based on GEF JFace abstractions for diagrams IContentProvider ILabelProvider Hooks to configure figures, nesting and filters New layouts Enhanced Usability (?)
  17. 17. Live Views for Xtext
  18. 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. 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. 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. 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. 22. 3 - Build Your Own GEF View
  23. 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. 24. 4 - JavaFX
  25. 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. 26. An Unfair Comparison
  27. 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. 28. Conclusion
  29. 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. 30. Links https://github.com/JanKoehnlein https://www.informatik.uni-kiel.de/rtsys/kieler/

×