How to create a Petri net editor using GMF (Part 2)

In the first part of this tutorial you saw an overview of GMF and the different models that are created to generate a graphical editor. In this post you will see how to customize the look of your diagrams and the tool you are creating.

Overview of your Graphical Def Model

As you saw in the previous part of this tutorial, you need to describe the look of your diagrams using the Grafical Def Model. In GMF, the root element of this model is a canvas that contains the diagram. Then you need to describe what the user is allowed to put on that canvas. A canvas can contain nodes, connections, labels, compartments, and image galleries . Our Petri net contains two types of nodes and one type of connection. The nodes are the transitions and the places; the connections are the arcs; and transitions, places and arcs contain each one different sorts of labels.

The image gallery contains the "Figure Descriptors", i.e. the the actual description of the graphical elements, of the different parts of the diagrams. In our case it contains the description of a circle of a certain size that has two labels, the marking and the name of the place. It also contains a rectangle and a polyline with an arrow head. Having the figures in the image gallery allows us to reuse them when we define the parts of our diagram. 

Once we have described all the figures in our diagram, we define its different parts. Our Petri net diagram contains the following parts:

  1. Two types of node (places and transitions)
  2. A connection (the arcs)
  3. Four types of labels (place name, place marking, transition name and arc inscription)

The Graphical Def Model lets us map these different parts to their graphical description given by the descriptors in the image gallery.

Creating the Basic Graphical Def Model

You do not need to create the Graphical Def Model from scratch, in fact GMF can derive most of its skeleton for you. Let us walk through its creation step by step.

  1. Click the Derive button (on top of the Domain Model box) in the GMF Dashboard.
  2. In the first dialog leave the name of the diagram unchanged and click "Next >".
  3. The second dialog lets you choose which element of your model is represented by the diagram. Choose "Petrinet" and click "Next >"
  4. The third dialog lets you choos the basic graphical definition of the domain model, i.e. it lets you choose how each element of the is represented in the diagram. Make sure your make your model look like the figure and click finish.

 Basic graphical definition dialog

Customizing the Graphical Def Model

Once the Graphical Def Model is generated, your goal is to customize the image descriptors so that your diagram looks the way you intend it to. GMF has already created a figure descriptor for each element, each descriptor is just a rectangle.

Let's start by the easiest thing, the arc. In GMF the standard decoration for a Polyline is an arrow head, so all we need to do is add an Polyline decoration to the Polyline Connection that represents the arc. Here are the detailed instructions:

  1. Go to the "Polyline Connection ArcFigure" (In the Image Gallery, go to "Figure Descriptor ArcFigure")
  2. Right click "Polyline Connection ArcFigure" and select "New Child" -> "Polyline Decoration"
  3. After creating the decoration, select it and open the Properties view and make it look like the figure.
    Properties view for Polyline Decoration Arrow
  4. Of course, we need to tell GMF which side of the arrow will have the decoration. Go to the Properties view of "Polyline Connection ArcFigure", in "Target decoration" select the Polyline decoration you just created.

Now let's tackle the description of the place. GMF created a Figure Descriptor for the place that describes a rectangular place. Here are detailed instructions:

  1. The Figure Descriptor contains a child named "Rectangle PlaceFigure". You need to replace it by an Ellipse Place Figure. Since there is no replace command, you do this by erasing the Rectangle PlaceFigure and creating a new Ellipse PlaceFigure in the Figure Descriptor.
  2. Then you need to give a Preferred size to the ellipse and put the same labels that were already in the  Rectangle PlaceFigure. You configure your Ellipse PlaceFigure to have a "Preferred size" by creating a child and then modifying its properties to Dx = 40 and Dy = 40.
  3. Then you need to recreate (also as a child of the ellipse) two labels, one will be called PlaceName and the other PlaceMarking (you can set the names in the Properties)
  4. The you need to update the Child Accesses that refer to the labels in the Ellipse. In the Properties view, change their "Figure" to the Labels you recreated  in step 3.
  5. The final Figure descriptor should look as follows:

Final Figure descriptor for place figure.

For the transitions you won't do anything. By default GMF created Rectangles and transitions happen to be rectangles.

Overview of the Tooling Def Model

The Tooling Def Model describes the tools available in the diagram. For our Petri net editors we have three tools, an tool for creating the places, a tool for creating the transitions, and a tool for creating the arcs. The Tooling Def Model allows to create other kinds of tools but these are out of the scope of this tutorial.

Creating the Tooling Def Model

For the Tooling Def Model there is no need for customization (at least for our example). You just need to let GMF derive it for you. Here are the detailed instructions:

  1. Click the Derive button (down of the Domain Model box) in the GMF Dashboard.
  2. Do exactly the same that you did in "Creating the Basic Graphical Def Model" from steps 2 to the last and click "Finish"

Conclusion

In this part of the tutorial, you have created and customized the two models that describe your graphical editor. You also have your domain model (and generated code) from the previous tutorial. The next step is to create a new model that will combine the three the content of the three models and will allow to create a generator model for the graphical editor.

The next part of the tutorial is available here.

If you like these tutorials and would like to get them on your email, please subscribe using the side bar form. Also, do not hesitate to ask questions and give feedback in the comments!

tweet: