The Graphical Editing Framework (GEF) enables developers to create client-side rich graphical editors based on existing domain models.
Eclipse's GEF has a steep learning curve, and at times it can be difficult to understand even for developers fully accustomed to it. There are a number of technical challenges associated with using GEF that developers should be aware of and know how to handle.
We discuss difficulties that GEF developers face, and we enumerate ways to overcome them. Topics include using GEF correctly, implementing features not provided by the framework, and avoiding misuses of GEF that result in errors and bugs. In particular we present thoughts on MVC logic separation, the role of edit policies, customized layouts and graphical techniques, and potential threading concerns. The tips and insights provided by this talk are useful for both new and experienced GEF developers.
See http://www.architexa.com/labs#gef for more information on our work.
Conquering Gef Part 1: Effectively creating a well designed graphical editor
Creating well designed graphical editors
... and bringing them to the Web
Vineet Sinha Elias Volanakis
Works for EclipseSource
Work for Architexa Committer on Riena and
Built visual dev tools:
Worked on GEF during his
Works for IBM
Focus on solving
Lead committer on GEF
(and GMF Runtime)
Building on GEF for 5 yrs
Creating a well designed Graphical Editor
Bringing GEF apps to the web
Approaches & Challenges
Diagrams are not as useful when too many
items need to be shown. Try:
Hiding less relevant nodes.
Grouping nodes using visual containment or
Thinking of ways to show nodes in a smaller
If users need to scroll consider overlaying or
showing reminders of out of sight pieces.
Don’t want to force users to be manually positioning
Automatic layout is good.
But it is always good to let the user change things
Laying out a set of nodes…
has the problem that it often depends on the particular use-case
and on personal preferences.
if there is more than one good option, it might be too vague to
implement it correctly.
Should think about how the layout will work with
On inserting a node
On adding or removing a neighboring node
GEF allows developers to take an existing application
model and create a visual representation of it.
It consists of three components: Draw2D, Zest, and GEF.
Draw2D provides support for layout and
Zest provides support for JFace patterns
to create quick graphical views.
GEF provides for a MVC architecture,
supports users interacting with the model, and provides
LightweightSystem provides link from Draw2d to SWT.
Figures are lightweight containers
forming a tree with preorder
traversal for painting, i.e. last is
shown on top with reverse for
Layout Managers position children Figure and calculate
the preferred sizes.
Connections are also Figures positioned using
ConnectionAnchors having children like ArrowHeads and
Viewer: foundation for displaying and editing
Adapter on an SWT Control
EditPart: elements inside a viewer.
Tool: interprets user input; represents mode.
Palette: displays available tools.
CommandStack: stores Commands for
EditDomain: ties everything together.
GraphicalEditor: for building an Editor.
Stuff that we have learned over the last 5 years of GEF
To put GEF in Context:
Very rich framework
▪ Lots of predefined functionality
▪ Do very complex things with almost no code
- Koen Aers, GEF Tutorial, EC08
If you want to do something look for an example that does it and
try to understand how.
What should be in the Model (and the Commands)
No dependencies on the View and Controller
Don't have references to EditParts, EditPolicies, and Figures here.
Anything that needs to be saved.
You might need two models
▪ One from before or one for an external purpose.
▪ i.e. A presentation model (as opposed to a business model).
The Deleting Command can be tricky with multiple levels of
containment and connections.
quot;When objects (i.e. quot;nodesquot;) in a diagram are deleted, it is necessary to remove, in the
very least, the connections between the items being deleted, including contained
parts such as children, and any items remaining in the diagram. ... Care must be
taken in the implementation because both ends of the connection may be deleted
using multiple selection. To avoid deleting the connection twice, the application
should lazily determine which connections must be deleted. Do this inside the
execute() of the command. On undo, the connection will get restored just once. For
an example implementation, see DeleteCommand in the Logic example.quot;
- GEF Trouble Shooting Guide
Try to use EditPolicies
By default the controller is where the most of the code goes.
EditPolicies help in separation of concerns, and allow uniform
reuse of capabilities across different classes.
Spend some time trying to understand what policies already
exist and what they do.
Already provided policies have support for
selection, editing, connection management, etc.
You might have more than one type of child:
Group children into compartments.
Have your model have a set of fake children – one each per
Don’t try to create your own one, though highly constrained
layouts are ok.
Be careful about custom stuff – it is very hard.
Buy or port one from another layout package.
Implement one from an academic paper if you need to.
Antialiasing, Gradients and Shadows:
▪ These are possible, but each has its own complications.
▪ Look at the newsgroups for howto.
Embossing, Blur, and Glow are more complicated – but
should be doable (see Filthy Rich Clients).
Look at the flow example.
Code is available, but you need to hook into it at the right places.
▪ You will need to capture initial and final node positions and incrementally set
the bounds of nodes as a set amount of time passes
Shapes, Connections, and Anchors always deal with absolute
Figures bounds are not absolute.
These issues show up when doing using containment.
GEF/Draw2D are not thread-safe
Do not call methods on Figures from non UI threads.