GEF5 Tutorial - Part 1 - Minimal MVC

This is a re-make of my previous GEF4 tutorial, now for GEF5.

The source for this tutorial can be retrieved from github: gef5.mvc.tutorial1.

GEF5 is the Graphical Editing Framework in the Eclipse ecosystem. See https://github.com/eclipse/gef/wiki/MVC
See: GEF4 + 1 = GEF 5

I have special interest in the Model-View-Controller part of this framework, but at the time of my writing, there is only the "Logo" example available. I found it quite complex, for understanding the basic concepts. So I started to reduce it and thought others could have a benefit from my work. Let's see.

Tutorial step 1

The most trivial example for MVC, is having a model, a controller (in GEF4+ speak "Part") and the visual.
The model is a POJO, storing information only application specific information. Here i store the rectangle coordinates and the color, of what i want to visualize.

The part is a the ModelPart class, that is the one transforming the model information into a presentation.

GEF makes use of Google Guice. You may have a read about it to understand the concept: https://github.com/google/guice, see the linked video there and the user guide.

The only binding needed for this minimal example is the interface IContentPartFactory to the single instance of ModelPartFactory.

protected void configure() {

    super.configure();

    bind(IContentPartFactory.class).to(ModelPartFactory.class);

}

Whent he application's model objects are passed into the GEF MVC as content, the ModelPartFactory is responsible to create the model parts. For one content object, one model part is created.
The ModelPartFactory migh use instanceof tests to check for the model types and create the appropriate part class instance. Also information of the model may be used to determine the correct type for the part.

The ModelParts in this examle extend AbstractContentPart<GeometryNode<RoundedRectangle>>.

Ok this is not easy. I want to draw a RoundedRectangle, which is a GEF5 geometry. The GeometryNode is an adaption to have it as FX Path. The AbstractContentPart is an abstract content part implementation, acting on the given JavaFX node element, here the GeometryNode. 

MVC structure

There is a single model object that a single part transfers into a single visual object.

Information is only propagated in one direction.

The result

Now it looks like this:

You see a viewer with the grid dots.

The rounded rectangle is shown with a drop shadow effect. It is configured in gef5.mvc.tutorial.Gef5MvcTutorial.configureGlobalVisualEffect(IViewer)

Realize what you can do with it:

• Mousewheel can do up/down left/right scrolling
• Ctrl+Mousewheel is zooming
• With the mouse, you can drag a mark rectangle open, but it is not yet marking.

Next part of this tutorial >>