Graphical Editing Framework (GEF) Directed Graph Example (Digraph1)

Getting the source for the example

A team project set file for the digraph1 example is here. Download the team project set file and do the following to import the plug-in project into your workspace.

  • From the File menu, choose Import. This will open the Import dialog.
  • In the Import dialog, choose Team > Team Project Set and click Next.
  • Browse for or type in the name of the project set file and click Finish.
  • The digraph1 project contained in the project set will be fetched from the CVS repository on Eclipse.org.

The example was created with Eclipse 3.3 and GEF 3.3


Basic Graphical Editor

The main objective of the digraph1 example was to provide a simple graphical editor that demonstrates GEF's Model-View-Controller (MVC) architecture. This first directed graph example is as simple as it gets.

digraph1_editor

Model

The model is a simple graph (Digraph1Graph) with a number of nodes (Digraph1Node). In this simple example the graph has a fixed number of nodes and a fixed location for each node in the graph.

Figure

We define the view to display the graph using figures. The figure for the graph is simply a FreeformLayer. Each node figure is a Digraph1NodeFigure.

EditPart

We bridge the model and view with the controller, or EditPart. We have an EditPart for the graph and each node (Digraph1GraphEditPart and Digraph1NodeEditPart).

Factory

The graphical viewer has an edit part factory (Digraph1EditPartFactory) to create new EditParts for the example.

Policy

We make use of a XYLayoutEditPolicy to place the nodes on the graph (Digraph1XYLayoutEditPolicy).

Editor

Finally, we use an editor with no editing functionality to display the graphical viewer (Digraph1GraphicalEditor).

Opening the Example Editor

The graph example editor opens for any file with the digraph1 file extension. So we need a project and file in the workspace to open the editor. First, create a new project resource File > New > Project. Then a new file resource, such as file.digraph1 using File > New > File. After creating the file, the Directed Graph Example Editor will open.


Graphical View

Most frequently, GEF is used to graphically display your model in an Eclipse editor. However, GEF's viewers can also be used in views, dialogs, or just about anywhere you can place a control.

The digraph1 example hosts the same content from the editor in a view. The code in the Digraph1GraphicalView is exactly like the content in the GraphicalEditor.

digraph1_view

To open the view, select Window > Show View > Other and select the Directed Graph Example View from the Other category.


Graphical Editor in a RCP Application

The org.eclipse.gef.examples.digraph1.rcp package provides the four classes required to put the graphical editor in a RCP application.

The RCP application can be directly started by running an Eclipse application from Run > Open Run Dialog... A new configuration can be created as below:

digraph1_run_rcp

Our WorkbenchWindowAdvisor works by creating a dummy file in a project. Since our example loads from a static model, the editor opens when the RCP application starts.

digraph1_rcp


By Anthony Hunter, IBM Rational Software
: /cvsroot/org.eclipse/www/gef/reference/digraph1.php,v 1.10 2007/11/16 04:29:04 ahunter Exp $

    Please send comments about this example document to the eclipse.tools.gef newsgroup.