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/