This document provides an overview of the components that make up GEF4, the next generation of the Graphical Editing Framework. It describes 9 main components: DOT, Cloudio, Common, Geometry, FX, MVC, Layout, Graph, and Zest. Each component provides specific functionality like a DOT editor, tag cloud view, common abstractions, geometric shapes, JavaFX integration, MVC framework, layout algorithms, graph model, and graph visualization capabilities. The document also includes examples and demos of some of the key components.

1. Image courtesy of Nasa
4
Sightseeing MarsNeon
Alexander Nyßen
itemis AG
Graphical Editing Framework Project Lead

2. 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

3. 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

4. GEF4 DOT - DOT editor

5. GEF4 DOT - DOT Graph view

6. GEF4 Cloudio -TagCloudView

7. GEF4 - Components
Image courtesy of AndiH / flickr
UI ≃ Eclipse UI
FX ≃ JavaFX
GEF4 Common

8. 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' role
adaptable.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 instance
adapterMapBinder.addBinding(AdapterKey.get(new TypeToken<A<T>>(){})).toInstance(a);
• AdapterMap injection

9. GEF4 - Components
Image courtesy of AndiH / flickr
UI ≃ Eclipse UI
FX ≃ JavaFX
GEF4 GeometryGEF4 Common

10. 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.

11. GEF4 Geometry - Examples

12. GEF4 - Components
Image courtesy of AndiH / flickr
UI ≃ Eclipse UI
FX ≃ JavaFX
GEF4 Geometry
GEF4 FX.SWT GEF4 FX
GEF4 Common
GEF4 FX.JFace

13. 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.

14. GEF4 FX - Examples

15. 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

16. 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.

17. DEMO - GEF4 MVC.FX.UI Example

18. 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

19. 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();

20. GEF4 - Components
Image courtesy of AndiH / flickr
UI ≃ Eclipse UI
FX ≃ JavaFX
GEF4 Geometry
GEF4 FX.SWT
GEF4 Layout
GEF4 MVC
GEF4 MVC.FX
GEF4 MVC.FX.UI
GEF4 FX
GEF4 MVC.UI
GEF4 Graph
GEF4 Common
GEF4 FX.JFace

21. GEF4 Layout
• Provides abstractions (ILayoutAlgorithm, ILayoutContext,
ILayoutFilter) related to layout algorithms
• Provides concrete layout algorithm implementations: Grid,
Box, Spring, HorizontalShift,Tree, Radial, SpaceTree, Sugiyama

22. GEF4 - Components
Image courtesy of AndiH / flickr
UI ≃ Eclipse UI
FX ≃ JavaFX
GEF4 Geometry
GEF4 FX.SWT
GEF4 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

23. 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

24. DEMO - GEF4 Zest.FX.UI Example

25. GEF4 - Components
Image courtesy of AndiH / flickr
UI ≃ Eclipse UI
FX ≃ JavaFX
GEF4 Geometry
GEF4 FX.SWT
GEF4 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

26. Image courtesy of Bilal Kamoon / flickr