Getting started with GEF - Part I: The foundations

Since 2010 a new code base of the Graphical Editing Framework (GEF) was developed under the name GEF4, which reached version 1.0.0 in the current (Neon) Eclipse release train. 

In this tutorial series we will dive into the new GEF API and develop a simple mind map editor. But first, let me explain, what GEF really is.

About GEF

The Graphical Editing Framework (GEF) is a framework to build graphical applications that can be integrated into the Eclipse UI. Its most common use is to develop diagram editors, like the simple mind map editor we will create in this tutorial series.

GEF was developed by IBM and released as an open source project in 2002. Initially, it consisted of two components: Draw2D, a graphical visualization library on top of SWT (the Standard Widget Toolkit of Eclipse) , and GEF (MVC), a model-view-controller framework for the development of graphical applications. Additionally, the Zest component for graph rendering was contributed to GEF in 2007.

In 2010 the GEF team started developing a new version of the framework in parallel to the maintenance of the existing code base. The new version was called GEF4 and used the org.eclipse.gef4 namespace to prevent collisions with the old GEF code (in contrast to org.eclipse.gef). Several topics were addressed when developing the new version: the use of JavaFX instead of SWT as the rendering framework, support for touch devices, support for rotation and other transformations, rethinking the componentization, etc.

After the release of GEF 4.0.0 (that shipped GEF4 1.0.0) as part of Eclipse Neon, the codebase was migrated to GitHub and the project names were changed for the next release train (Eclipse Oxygen). The former version of the framework is now called GEF Legacy, and the new version of the framework uses the original GEF name, and the corresponding namespace again. For more information, please refer to the GEF Github Wiki.

The Code

I strongly advise to follow the instructions and create the code on your own. Each class will be shown in the tutorial, so you can copy/paste parts as you like. If you want to see the final projects after a step, you can find the code of this tutorial on Github. Each step in the tutorial is committed separately, so you'll be able to compare your own code with the commit belonging to the respective step.


The tutorial will contain a lot of code and UI descriptions. It will use the following conventions:

In a paragraph of text, variables, method names, and class names will be emphasized as code, and labels of UI elements (buttons to click, etc.) will be emphasized as well.

Longer sections of source code will be rendered in a code block like this:

public void implementMe(boolean done) {
    // nothing to show for now

But let's start with the requirements for developing a GEF-based application.

Only one step left

To get started with this tutorial please register.

Register for the GEF Tutorials
PLUS. More from itemis

More information. Check out our blog.