Graphical Views For Xtext
Upcoming SlideShare
Loading in...5
×
 

Graphical Views For Xtext

on

  • 373 views

Slides of a talk held at XtextCon 2014

Slides of a talk held at XtextCon 2014

Statistics

Views

Total Views
373
Views on SlideShare
370
Embed Views
3

Actions

Likes
0
Downloads
5
Comments
0

1 Embed 3

http://www.slideee.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Graphical Views For Xtext Graphical Views For Xtext Presentation Transcript

  • Graphical Views For Xtext Jan 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 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
  • The workarounds for these problems…
  • …will not only require a lot of effort…
  • …but will also cause major usability quirks.
  • Graphical EditorView
  • 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
  • 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
  • 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 -> 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 ] } ...
  • 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 } }
  • 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/