GEF4 Tutorial - Part 1 - Minimal MVC

Note: there is a GEF5 Tutorial

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

GEF4 is the new version (10-2015) of the Graphical Editing Framework in the Eclipse ecosystem. See https://wiki.eclipse.org/GEF/GEF4

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 view.
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.

GEF4 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();

    binder()

        .bind(new TypeLiteral<IContentPartFactory<Node>>(){})

        .toInstance(new ModelPartFactory());

}

The ModelPartFactory uses 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 ModelPart extends AbstractFXContentPart<FXGeometryNode<RoundedRectangle>>.

Ok this is not easy. I want to draw a RoundedRectangle, which is a GEF4 geometry (not depending on FX). The FXGeometryNode is an adaption to have it as FX Path. The AbstractFXContentPart is an abstract content part implementation, acting on the given JavaFX node element, here the FXGeometryNode. 

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:

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