Danish(DK)English (United Kingdom)
Eclipse Graphiti

Eclipse Graphiti is a new graphical tool development framework meant to hide some of the complexities of GEF and Draw2D.

Graphiti is heavily based on the Eclipse Modeling Framework (EMF), and makes it relatively easy to create diagram editors for your domain models. Graphiti is build to use EMF-based domain models, but can also handle pure Java-based domain models.

Some of the advantages of Graphiti, as I see it:

  • Provides an easy to use, plain Java API for building graphical tools.
  • Provides documentation and tutorials for doing so - up to a point...
  • Allows you to start with a very simple solution, and then override or expand various aspects gradually.
  • Allows you to use whatever you need from the full Eclipse Plugin Development Environment (PDE).
  • Hides a lot of GEF complexity. A lot.
Graphiti was donated by SAP, who use it in their own tools. JBoss jBPM Editor is also build on Graphiti, I believe. 

My own Graphiti project

To get better acquainted with the tool, I wrote a simple Model Train Layout editor, expanding on my previous talk on EMF, Xtext and Xpand (found here).

I have based it on the tutorial, which is documented - once you have installed Graphiti - in Help -> Help Contents -> Graphiti Developer Guide -> Tutorial. For installation tips, see below.

The screenshots below are from my prototype - definitely a work in progress, but also shows how far you can get in a short time...

As seen from the user of the created editor

Diagram Creation Wizard

Diagram Creation Wizard

Once you have defined your Domain Model, you get a Wizard to create a new diagram of that type.

 

Palette

Diagram Creation Wizard

One of the methods you create is a small routine that constructs the palette of elements you can place in your diagram.

They will typically correspond to elements in your domain model, but the correlation is entirely up to you.

Common strategies include:

  • each palette item corresponds to a different domain model element
  • each palette item corresponds to the same domain model element (my case)
  • any combination of these

In the first case, the logic you write can be based entirely on the type of the element in question, in the other cases you need some additional information to decide how to draw the element.


Drawing elements

Diagram Creation Wizard

You can drag and drop elements from the palette, and the graphical editor decides things like:

  • can you drop it anywhere, or perhaps only in clear areas?
The actual shape is drawn in a piece of code you write.

Drawing and selecting elements

Diagram Creation Wizard

Once drawn, an element can be selected and dragged to another position.


Context actions on an element

Diagram Creation Wizard

Each element can have a number of actions attached, that you select by rightclick. Here the default remove and delete are shown.

 

Background commands

Diagram Creation Wizard

Rightclick can also bring up the general context menu, where you can add commands.

One of my functions is import, reading an entire layout from a file.


Import

Diagram Creation Wizard

Here you see part of one of the more complicated layouts I have created as testdata. Zoom in and out as well as graphical and image print are buildin functions.

 

Eclipse Plugin and SWT functions

Diagram Creation Wizard

Graphiti is a proper Eclipse Plugin and gives you access to all normal functions in SWT and otherwise.

Here I have used an ordinary ListSelectionDialog to choose among various lists to generate.

 

Links

Graphiti website http://www.eclipse.org/graphiti/
Graphiti forum http://www.eclipse.org/forums/...
EMF website http://www.eclipse.org/modeling/emf/

 

Installation tips

Graphiti itself is easy to install - simply download the Modelling version of Eclipse Helios, and Graphiti 0.7.1 is included. You can upgrade to 0.8 or the nightly builds, by choosing a different update site, see http://www.eclipse.org/graphiti/download.php.

The tutorial is included, if you choose the full Graphiti set, and found in Help. It has a very good walkthrough that gradually builds a nice editor, and explains many features on the way.

If you are looking for a ready-made editor based on the tutorial, but a bit more advanced, do the following:

  • Create a Plugin project, and choose NO Template.
  • Import the source code found in your Eclipse plugins directory (typically .../eclipse/plugins) under org.eclipse.graphiti.examples.tutorial.source_0.8.0.v20110324-1455.jar (name may be slightly different)
    Use Import from JAR, and place it in the /src directory.
  • Fix a number of dependencies by adding them to the Manifest file - their names are the same as the package names that Eclipse complains about.
  • Run the thing!