GMF graphical editor tutorial

On the DashBoard view, in the case Domain model click on Select and choose the fsm.ecore from org.kermeta.fsm.gmf. Then, click on the Derive at the left to create the EMF GenModel.

The following wizard appears to choose the name of the .genmodel file. (You can make appears it clicking on Select in the Domain Gen Model Case).

Figure 2.6.  Choose name for the genmodel file

Click on Next. In the following wizard select ecore model.

Figure 2.7.  Select ecore model

Click on Next. For the next wizard do not forget to click on load.

Figure 2.8.  Load ecore model

Then click on Next and Finish. The file fsmStatic.genmodel appears on the project and the DashBoard. Open it and click on the arrow near Fsm. Right click on Fsm -> Generate All. It generates the EMF Java code for the domain model.

Figure 2.9.  Generate EMF Java code

For the next steps you can choose between begin with Graphical Def Model or Tooling Def Model. We start with Graphical Def Model.

Click in Derive at the top of the Domain Model case. Like for GenModel you can select the name. Then, select the root metaclass of your metamodel, in your case FSM.

Figure 2.10. 

In this tutorial we want simply to create a graphical editor for States with their name and Transition. Select the elements like in the following figure :

Figure 2.11.  Select elements from domain

The resulted file fsm.gmfgraph looks like this :

Figure 2.12.  fsm.gmfgraph at the beginning

Now, we want to do changes on fsm.gmfgraph file. To start with we want to replace the state rectangle by a rounded state rectangle. Start with suppress the Rectangle State figure ( Right click on it -> Delete). Click on FigureDescriptor StateFigure -> New Child -> Rounded Rectangle. Then click on the created Rectangle and use the Properties view to edit its name as StateFigure.

	Tip
	If you do not see the Properties View go to Window-> Show View -> General -> Properties.

Figure 2.13.  Edit Rounded Rectangle 's name

Then right click on Rounded Rectangle StateFigure and choose Flow Layout. Then right click again and choose Label. Add its name StateFigureLabel in the Properties View.

Figure 2.14.  Edit Label 's name

A Diagram Label StateName appears on the gmfgraph file. Now, Click on the Child Access of the Rounded Rectangle and set its figure property to Label StateFigureLabel. Then right click on Child Access and choose Refresh. You can add a foreground on your Rounded Rectangle. For this right click on Rounded Rectangle StateFigure -> Foreground Color Constant Color and edit the value to blue. The file fsm.gmfgraph should look like this :

Figure 2.15.  Rounded rectangle

Then we want to customize the connection and add an open arrow on its end. Start with adding a PolylineDecoration (right click on PolylineConnection TransitionFigure -> New Child -> Polyline Decoration). Name it targetDecoration. We need to add three Template Point to draw the arrow. Right click on Polyline Target targetDecoration -> New Child -> Template Point (at the bottom of the contextual menu , use the arrow at the bottom to see all this menu) to add one of them. Then edit them respectively to (-1,1), (0,0) and (-1,-1). Now edit Polyline Connection TransitionFigure and set targetDecoration with Polyline Decoration targetDecoration. The file fsm.gmfgraph should look like this :

Figure 2.16.  Set Target Decoration

Now, we create the tooling model.

Click on Derive at the bottom of the Domain model case. Like for the graphical model choose the file name and the root metaclass (FSM). In this palette we want only to use State and Transition, so select the elements like in the following figure :

Figure 2.17.  Tooling definition

The file fsm.gmftool looks like this :

Figure 2.18.  fsmStatic.gmftool

These images can be customized. For more informations please refer to the GMF documentation.

The mapping model (.gmfmap) permits to link .genmodel, .gmfgraph and .gmftool files. In the DashBoard click on Combine. Like for Graphical and Tooling model choose a name and select the root metaclass (FSM). We want to have a very simple editor with simply State and one Transition connector. So, in the last wizard, remove owningFSM and incomingTransition in order to obtain the following wizard:

Figure 2.19.  wizard creation .gmfmap

The fsm.gmfmap looks like this

Figure 2.20.  fsmStatic.gmfmap

	Warning
	Do not forget to check if Diagram Node (or Diagram Link) and Tool properties of Node Mapping or Link Mapping have the good values. Figure 2.21.  Node and tool

On this file we need to add a Feature Label mapping to manage the name label of the state. Right click on Node mapping State -> New Child -> Feature Label Mapping. Edit the diagram label with Diagram Label StateName. You have also to edit Features to display and Features to edit thanks to the Following wizard :

Figure 2.22.  Select feature and add it

Figure 2.23.  Add diagram label into Feature Mapping

Then, edit the LinkMapping Transition like in the following image :

Figure 2.24.  Edit the LinkMapping Transition

Now, the file fsm.gmfmap looks like this :

Figure 2.25.  fsm.gmfmap

Click on Transform (at the right of the case mapping model) and the file fsm.gmfgen is created. It looks like :

Figure 2.26.  fsmStatic.gmfmap

Then click on generate diagram editor. Your project should be like this :

Figure 2.27.  fsmStatic.gmfmap

So, we have generated the graphical editor for FSM. The next section explains how to test it.