The Next Generation Eclipse Graphical Editing Framework
While the Eclipse Graphical Editing Framework (GEF) project has been a citizen of the Eclipse ecosystem for 15 years that has undoubtedly seen many highs (and lows), the graduation of its next generation code base with the Eclipse Neon release was the personal climax of our involvement, and to a journey we started 7 years ago.
We have not rested since, and have spent significant effort in maturing and enhancing the new code base during the Eclipse Oxygen development stream. To reflect this, we have decided that it is about time to also perform a changeover in terms. While the term ‘GEF4’ was initially used to refer to the new code base, we now simply use ‘GEF’, and the old code base originating back from 2002 can now – without discrimination – be referred to as ‘GEF-Legacy’. The Oxygen release will thus be GEF 5.0.0.
GEF provides some end user functionality, but it is mostly a framework for the development of arbitrary graphical rich-client applications, integrated into the Eclipse UI or standalone. While there are indeed no restrictions concerning the type of graphical application that can be realized, there are various defaults that make it especially handy when building diagram-like views and editors (nodes, edges, labels).
The framework is accompanied by a number of examples that demonstrate its usage. Most prominent are the MVC Logo example and the Zest Graph example, for rendering geometries and graphs, respectively.
The screenshot displays the MVC Logo example. It shows the following features that are available in GEF:
- Integration into Eclipse UI (as an IViewPart)
- JFace actions for the toolbar (zooming, scrolling)
- Infinite canvas with background grid (snap-to-grid is also supported)
- Snapping and alignment feedback (red lines)
- Selection feedback and handles (blue squares)
- Hover feedback and handles ("x" and "plus" icons)
- Rendering of arbitrary geometric shapes and curves
- Layered rendering of contents, feedback, and handles (for manipulation)
The framework is coupled to JavaFX as rendering technology, so we get all the nice stuff supported by a modern rendering framework out of the box: a scene graph API, CSS styling, animations, effects, etc. GEF adds additional concepts like visual anchors and connections, which are useful in a diagram context, and it ensures a seamless integration of JavaFX and SWT. The framework also provides a comprehensive geometry API that contains abstractions for geometric shapes and curves. All of that is used in the MVC Logo example: the letters and connections are actually rendered from shape and curve geometries, the connections are visually anchored to the shapes, so intersection points are automatically computed (and updated).
Much effort has been spent in making GEF-based applications feel interactive and intuitive. Besides mouse and key, touch gestures are supported throughout, and all GEF applications follow the principle of ‘live feedback, which ensures that a user interaction is directly and continuously reflected. When manipulating a connection by moving its waypoints, for example, the connection automatically ‘follows’ the handle movement, so the resulting state can directly be observed.
Three basic operations are generically provided to change the visualization as well as the underlying data model: transforming, resizing, and bending (i.e. reshaping). Further interaction capabilities are provided specific to certain specific interaction scenarios, like "bending".
Orthogonally routed connections can for example be manipulated through their segments: blue rectangular handles can be used to move (or remove) segments, white rectangular handles can be used to split segments.
Straight-routed connections, in contrast, can be manipulated through their waypoints: blue circular handles can be used to move waypoints, while white circular handles can be used to insert new waypoints.
Other than that, GEF provides a graph data model, a corresponding renderer, and integrated automatic layout. These are all demonstrated in the Zest Graph example:
To get started, there is also a nice free tutorial provided by itemis:
Try it out! Let us know what you think.
For further information about GEF, visit our web presences at:
- GEF @ GitHub: https://github.com/eclipse/gef
- GEF @ Eclipse: https://www.eclipse.org/gef/
About the Authors
