Image courtesy of Nasa

4Sightseeing MarsNeon

Alexander Nyßenitemis AGGraphical Editing Framework Project Lead

GEF4• Our approach to develop the next generation API of

the Graphical Editing Framework. • Developed in parallel to Draw2D/GEF (MVC) 3.x and

Zest 1.x, which are in pure maintenance mode.• First official release (0.1.0) with Mars, followed by bugfix

release (0.2.0) with Mars.1. • Next release (0.3.0/1.0.0) with Neon, including revision of

various parts of the still provisional API with the goal to graduate it.

Image courtesy of Lile Nel / flickr

GEF4 Components• GEF4 provides nine loosely coupled components.

• DOT and Cloudio provide end-user features• The other components form two basic framework stacks:

• Common, Geometry, FX, MVC

• Graph, Layout, Zest

Image courtesy of Michael Stern / flickr

GEF4 DOT - DOT editor

GEF4 DOT - DOT Graph view

GEF4 Cloudio - TagCloud View

GEF4 - Components

Image courtesy of AndiH / flickr

UI ≃ Eclipse UI FX ≃ JavaFX

GEF4 Common

GEF4 Common• Provides common (graphical-independent) abstractions

(IActivatable, IDisposable, etc.), including:• IAdaptable „2.0“

*) probably revised in the future

// register and retrieve adapter 'a' of raw type 'A' under role 'a1'adaptable.setAdapter(AdapterKey.get(A.class, "a1"));A a = adaptable.getAdapter(AdapterKey.get(A.class, "a1"));

// register and retrieve adapter 'a' of parameterized type 'A<T>' under 'default' roleadaptable.setAdapter(new TypeToken<A<T>>(){}, a);A<T> a = adaptable.getAdapter(new TypeToken<A<T>>(){});

// obtain a map binder to bind adapters for the respective IAdaptable type.MapBinder<AdapterKey<?>, Object> adapterMapBinder = AdapterMaps.getAdapterMapBinder(binder(), MyAdaptable.class); // add adapter (map) binding for binding adapter 'a' with parameterized type 'A<T>' to each MyAdaptable instanceadapterMapBinder.addBinding(AdapterKey.get(new TypeToken<A<T>>(){})).toInstance(a);

• AdapterMap injection

GEF4 - Components

Image courtesy of AndiH / flickr

UI ≃ Eclipse UI FX ≃ JavaFX

GEF4 GeometryGEF4 Common

GEF4 Geometry• Provides a double-precision Geometry API (with built-in

imprecision).• Different geometric abstractions for different purposes:

• Euclidean (Vector, Straight, Angle)• Projective (Vector3D, Straight3D)• Planar (Point, Dimension, Line, QuadraticCurve, CubicCurve,

BezierCurve, Polyline, PolyBezier, Ellipse, Rectangle, Pie, Arc, Polygon, CurvedPolygon, RoundedRectangle, Ring, Region, Path)

• Conversions to/from AWT, SWT, and JavaFX.

GEF4 Geometry - Examples

GEF4 - Components

Image courtesy of AndiH / flickr

UI ≃ Eclipse UI FX ≃ JavaFX

GEF4 Geometry

GEF4 FX.SWT GEF4 FX

GEF4 Common

GEF4 FX.JFace

GEF4 FX• Pure JavaFX extension like FXGeometryNode,

FXConnection, and InfiniteCanvas.• Enhancements for the integration of JavaFX with SWT:

• FXCanvasEx, which supports forwarding of SWT gesture events and proper notification of SWT focus listeners.

• FXControlAdapter to integrate SWT Controls into an embedded JavaFX scene.

• Color and gradient pickers for usage in cell editors. • JFace cell editor(s) and dialog(s) for color/gradient selection.

GEF4 FX - Examples

GEF4 - Components

Image courtesy of AndiH / flickr

UI ≃ Eclipse UI FX ≃ JavaFX

GEF4 Geometry

GEF4 FX.SWT GEF4 MVC

GEF4 MVC.FX

GEF4 MVC.FX.UI

GEF4 FX

GEF4 MVC.UI

GEF4 Common

GEF4 FX.JFace

GEF4 MVC• An intentionally light-weight model-view-controller

framework dedicated to graphical editors and views

• Split into UI-toolkit-independent abstractions (MVC), JavaFX-based specializations (MVC.FX), and related Eclipse UI-integration (MVC.UI/MVC.FX.UI)

• Flexibly configurable using (an enhanced) IAdaptable as well as Guice-based dependency injection.

• Can be used to realize standalone (including web-deployed) and Eclipse UI-integrated graphical applications.

DEMO - GEF4 MVC.FX.UI Example

GEF4 - Components

Image courtesy of AndiH / flickr

UI ≃ Eclipse UI FX ≃ JavaFX

GEF4 Geometry

GEF4 FX.SWT GEF4 MVC

GEF4 MVC.FX

GEF4 MVC.FX.UI

GEF4 FX

GEF4 MVC.UI

GEF4 Graph

GEF4 Common

GEF4 FX.JFace

GEF4 Graph• Provides a simple (POJO) Graph model to represent graph-

like structures and a related builder structure.

// Nodes, edges, and attributes can be added in arbitrary order */Graph g1 = new Graph.Builder().attr(DotProperties.GRAPH_TYPE, DotProperties.GRAPH_TYPE_UNDIRECTED) .node("n1").attr(DotProperties.NODE_LABEL, "1").attr(DotProperties.NODE_ID, "1") .node("n2").attr(DotProperties.NODE_LABEL, "2").attr(DotProperties.NODE_ID, "2") .node("n3").attr(DotProperties.NODE_LABEL, "3").attr(DotProperties.NODE_ID, "3") .edge("n1", "n2").edge("n1", "n3").build();

GEF4 - Components

Image courtesy of AndiH / flickr

UI ≃ Eclipse UI FX ≃ JavaFX

GEF4 Geometry

GEF4 FX.SWTGEF4 Layout

GEF4 MVC

GEF4 MVC.FX

GEF4 MVC.FX.UI

GEF4 FX

GEF4 MVC.UI

GEF4 Graph

GEF4 Common

GEF4 FX.JFace

GEF4 Layout• Provides abstractions (ILayoutAlgorithm, ILayoutContext,

ILayoutFilter) related to layout algorithms

• Provides concrete layout algorithm implementations: Grid, Box, Spring, HorizontalShift, Tree, Radial, SpaceTree, Sugiyama

GEF4 - Components

Image courtesy of AndiH / flickr

UI ≃ Eclipse UI FX ≃ JavaFX

GEF4 Geometry

GEF4 FX.SWTGEF4 Layout

GEF4 MVC

GEF4 MVC.FX

GEF4 Zest.FX

GEF4 MVC.FX.UI

GEF4 FX

GEF4 MVC.UI

GEF4 Graph

GEF4 Zest.FX.UI

GEF4 Common

GEF4 FX.JFace

GEF4 Zest.FX.JFace

GEF4 Zest• Provides graph based visualization with auto-layout

• Support for hierarchies with nested graphs

• Semantic zooming (zoom into nested graphs)• Provides a JFace API (ContentViewer, ContentProvider)• Customizable using CSS and GEF4 MVC mechanisms.• Rewritten from scratch, replacing the former Zest2 code

base, which was initially transferred to GEF4

DEMO - GEF4 Zest.FX.UI Example

GEF4 - Components

Image courtesy of AndiH / flickr

UI ≃ Eclipse UI FX ≃ JavaFX

GEF4 Geometry

GEF4 FX.SWTGEF4 Layout

GEF4 MVC

GEF4 MVC.FX

GEF4 Zest.FX

GEF4 MVC.FX.UI

GEF4 FX

GEF4 MVC.UI

GEF4 Graph

GEF4 Zest.FX.UI

GEF4 DOT

GEF4 Common

GEF4 Cloudio.

UI

GEF4 FX.JFace

GEF4 Zest.FX.JFace

GEF4 DOT.UI

Image courtesy of Bilal Kamoon / flickr