Creating a GEF Editor – Part 3: Basic GEF Editor

Previous Tutorial: Creating a GEF Editor – Part 2: EMF Code Generation

In the previous tutorial we finished the definition of the model and generated the model code for our editor. It is now time to start working on our editor.
The GEF editor we create will be implemented inside an eclipse plug-in. I will not explain all of the internals of eclipse plug-ins so if you are interested you can read more on the topic here. So let’s get going.

Start by creating a new plug-in project for the GEF editor. Right click on the Package or Project explorer (whichever is open) and select “New”->”Project” (You can also do this by going to the “File” menu, “New” submenu). In the wizard that opens up, select “Plug-in Project” from the provided list and click “Next”:
I will name my project “com.vainolo.phd.opd.gef” in conformance with the previous projects. Click “Next” once again:
The current wizard screen lets us edit some general information about the new plug-in, such as its name, version and such. I changed the name of the plug-in to “OPM GEF Editor”, the version to “0.1″ and the provider to “vainolo”. Also check that the option to create a Rich Client Application is marked “No”. Click “Next”:
The next screen provides us with a list or ready-made templates that can be used to create new eclipse plug-ins. While this may be useful and probably saves some time editing some files, I will start with a clean plug-in, so please un-check the “Create a plug-in using one of the templates” option, and click “Finish”.
Your plugin project should now show in the Package/Project Explorer and the project editor should be open on your main editor window, as shown below. If this is not the case, you can double-click on the MANIFEST.MF file to open up this window.

Notice that the values we set on the previous wizard show up on the “Overview” tab of the editor, so these values can be changed later on (for example in future versions of the plug-in).
Before we can start coding we have to add some project dependencies. These are code bundles that are required for the plugin-in to work, like code libraries. Go to the “Dependencies” tab in the MANIFEST.MF tab – this is the place where we can add these dependencies to the list:

Click on “Add” in the “Required Plug-ins” and search for org.eclipse.gef (the version installed on your computer may be a bit different from mine, but everything will be probably fine if the difference is only minor).

Click “OK”. We’ll also add our model to the project dependencies. Click “Add” again and select the model plug-in project we created in the previous tutorials (select the “model” plug-in project). This is how your project’s dependencies should look like:

Save your file.
Now finally for some coooooding!. We will start by creating an empty EMF editor that does NOTHING. I like to do this because I like to see things working (you can call it agile, I call it not liking to do a lot of work only to find that at the end of the tutorial things don’t work). Eclipse editors are all subclasses of org.eclipse.ui.part.EditorPart class. GEF editors are subclasses of org.eclipse.gef.ui.parts.GraphicalEditor. We will be using the org.eclipse.gef.ui.parts.GraphicalEditorWithFlyoutPalette as the base class for you editor since it already includes some pre-defined functionality (you guessed it – a flyout palette ) that is always nice to get free. So in our new plug-in project, let’s create our editor class. Right-Click on the GEF editor project (or on one of its packages), and select “New”->”Class”:

In the class wizard that pops up, set the name of the package to com.vainolo.phd.opm.gef.editor, the class name to OPMGraphicalEditor and the superclass to org.eclipse.gef.ui.parts.GraphicalEditorWithFlyoutPalette (you can click on the “Browse” button on the right of the superclass’s textbox to select the superclass from the list of available superclasses, and save some keystrokes):
Voila, we have our editor class ready. Now for the editor to work there are two more things that we must do. First, we must add this editor as a plug-in extension. Plug-In extensions define the functionality (extension) that the plug-in provides, from a list of pre-defined available functionality that is defined in the workbench and the plug-ins that are running in it (also called extension points). We are providing a new editor to the workbench, therefore we will implement a org.eclipse.ui.editors extension using our editor. Go back to the MANIFEST.MF file and click on the “Extensions” tab, where currently no extensions should be defined. Click on the “Add” button:

From the list of possible extension points, select org.eclipse.ui.editors (you can write “editor” in the filter to reduce options) and click “Finish”:

Now the eclipse workbench knows that this plugin provides an editor. But what editor? This is defined in the properties of the editor extension we just added to the MANIFEST.MF file. For now we’ll set the following properties for the editor:
- id: com.vainolo.phd.opm.gef.editorID
- name: OPM GEF Editor
- extensions: opm
- class: com.vainolo.phd.opm.gef.editor.OPMGraphicalEditor (you can click the browse button and select from a list of available classes that implement EditorPart).
Save the MANIFEST.MF file. You should now be able to navigate to the OPMGraphicalEditor class by clicking on the “class” link at the left of the “class” textbox. At this point you can try to execute the plugin, but you will get an error message (run the project as an eclipse application and double click on the model created in the previous tutorial). This is because we are still missing one more small thing for the editor to work.
So, what are we missing? We are missing the EditDomain. The EditDomain is the “common denominator to all GEF objects which participate to an editing session of a model. It binds all the things together and provides all the components with some common features necessary to edit the model like a CommandStack and a PaletteViewer with Tools” [GEF Description 2]. The meaning of this is not fully clear to me, except that we have to set the EditDomain when we construct our editor. Gratefully, a full implementation for an EditDomain is provided by the DefaultEditDomain class, so we’ll just create one and set it for editor will work. The full code of the OPMGraphicalEditor shows this:
```
package com.vainolo.phd.opm.gef.editor;

import org.eclipse.core.runtime.IProgressMonitor;

import org.eclipse.gef.DefaultEditDomain;
import org.eclipse.gef.palette.PaletteRoot;
import org.eclipse.gef.ui.parts.GraphicalEditorWithFlyoutPalette;

public class OPMGraphicalEditor extends GraphicalEditorWithFlyoutPalette {

	public OPMGraphicalEditor() {
		setEditDomain(new DefaultEditDomain(this));
	}

	@Override
	protected PaletteRoot getPaletteRoot() {
		// TODO Auto-generated method stub
		return null;
	}

	@Override
	public void doSave(IProgressMonitor monitor) {
		// TODO Auto-generated method stub
	}
}
```
Run the project as an eclipse application and see your editor working!.

Good Job!.