GEF5 Tutorial - Part 3 - Model updates

In step 3 of this tutorial, the model, the parts and the visuals are compositions of multiple objects. Each model node type is mapped with the ModelPartFactory to a corresponding content part (ModelPart and TextNodePart).

For the source of this tutorial step see github - gef5.mvc.tutorial3.

In the previous example the model was a flat list of objects, now we have a tree like model. One instance of Model having 2 childs of TextModel.

The model and part elements need to implement some type of update mechanism. Here the bean property listeners are used. You might use the javafx ObservableValues or something else.
However, in the end the "refreshVisual()" of the part needs to be called.

This example has a button on the top, that applies changes to the model. So the text and the position of the boxes is varied.

GEF5 Tutorial - Part 2 - Multiple Visuals

In this step 2 of the tutorial, we will have composed visuals.

A text node, that is a rounded rectangle from before, but with a text in it and the dimension of the rectangle is adjusted to the text.

And there will be symbols for logic gates, that illustrate how to work with Circle, PolyLine, Path, ...

For the source code see github gef5.mvc.tutorial2

The ModelParts are now extending AbstractContentPart<Group> this allows to have multiple child nodes and to compose the visual presentation.

MVC structure

Compared to step 1, the visual is now a composition of multiple objects.

The result

Next part of the tutorial >>

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