Chapter 2.  Getting started with GMF
Prev   

Chapter 2.  Getting started with GMF

In this tutorial,we suppose that GMF is already installed into Eclipse. We will copy and use the ecore metamodel fsm.ecore stored into fr.irisa.triskell.samples.fsm.demoAspect/metamodels/ after creating a new general project. The solution of this tutorial is available clicking on File -> New -> Example -> Kermeta Samples -> FSM Solutions. So, you can retrieve the following plugins :

  1. fr.irisa.triskell.kermeta.samples.fsm.gmf

  2. fr.irisa.triskell.kermeta.samples.fsm.gmf.edit

  3. fr.irisa.triskell.kermeta.samples.fsm.gmf.editor

  4. fr.irisa.triskell.kermeta.samples.fsm.gmf.diagram

  5. fr.irisa.triskell.kermeta.samples.fsm.gmf.tests

    Even if these plugins do not have the same name as the plugins you will created it is the same diagram editor .

2.1.  Mechanisms of GMF

GMF uses six files to create a generated graphical editor for instances of a given metamode like shown in the following DashBoard ( all the steps are finished). For more information about DashBoard View please refer to the section Create a new GMF project.

GMF process

Figure 2.1.  GMF process


As you can see, the generation of a GMF graphical editor contains six steps :

  1. Domain model : the metamodel we want to use to create the graphical editor. For this metamodel, you have the choice between several kinds of metamodels : Annotated Java code , Ecore model, Rose class model, UML model or XML Schema). In this tutorial we will use the ecore metamodel of FSM.

  2. Domain Gen Model (.genmodel) : this file is used to generate the domain model code with EMF (it is the EMF file genModel)

  3. Graphical Def Model (.gmfgraph) : this file is used to define the graphical elements for your domain model

  4. Tooling Def Model (.gmftool) : this file is used to define the palette of tools that you can use in the graphical editor

  5. Mapping Model (.gmfmap) : this file links the domain model, the graphical model (.gmfgraph) and the tooling model (.gmftool)

  6. Diagram Editor Gen Model (.gmfgen) : this final file us used to generate the GMF graphical editor in addition to the EMF code generated by the .genmodel file

[Tip]Tip

You can generate two kind of graphical editor with GMF : a plugin graphical editor integrated with Eclipse or as an RCP (Rich Client Platform) application which consists in an autonomous application. To generate a RCP application, just click into RCP on the DashBoard. In this tutorial we will create a GMF editor as an Eclipse plugin.

2.2.  Create a new GMF project

To start with, click on File-> New->Other-> Graphical Modeling Framework -> New GMF Project.

Create a new GMF project

Figure 2.2.  Create a new GMF project


Then, you can give to it the name org.kermeta.fsm.gmf like shown below.

Give a name to the new GMF project

Figure 2.3.  Give a name to the new GMF project


Select the DashBoard view, it will be useful to use GMF. This dashboard resumes all the necessary steps to create an editor with GMF and you can navigate between these steps with it.

Show Dashboard view

Figure 2.4.  Show Dashboard view


[Tip]Tip

You can also add this view by selecting the org.kermeta.fsm.gmf in the Package Explorer View and then click on Window->Show view-> Other-> General -> GMF DashBoard.

At the beginning, the DashBoard looks like this :

DashBoard at the beginning

Figure 2.5.  DashBoard at the beginning


Now, we will follow all the steps presented into the last section.

2.3.  Generation Process

This section details more all the steps. To start with, copy the file fsm.ecore stored into fr.irisa.triskell.kermeta.samples.fsm.demoAspects/metamodels/fsm.ecore into org.kermeta.fsm.gmf/model. In all this section we use the Dashboard view.

2.3.1.  Domain model

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.

2.3.2.  Domain Gen Model

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

Choose name for the genmodel file

Figure 2.6.  Choose name for the genmodel file


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

Select ecore model

Figure 2.7.  Select ecore model


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

Load ecore model

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.

Generate EMF Java code

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.

2.3.3.  Graphical Definition 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 :

Select elements from domain

Figure 2.11.  Select elements from domain


The resulted file fsm.gmfgraph looks like this :

fsm.gmfgraph at the beginning

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

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

Edit Rounded Rectangle 's name

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.

Edit Label 's name

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 :

Rounded rectangle

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 :

Set Target Decoration

Figure 2.16.  Set Target Decoration


Now, we create the tooling model.

2.3.4.  Tooling Definition 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 :

Tooling definition

Figure 2.17.  Tooling definition


The file fsm.gmftool looks like this :

fsmStatic.gmftool

Figure 2.18.  fsmStatic.gmftool


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

2.3.5.  Mapping Model

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:

wizard creation .gmfmap

Figure 2.19.  wizard creation .gmfmap


The fsm.gmfmap looks like this

fsmStatic.gmfmap

Figure 2.20.  fsmStatic.gmfmap


[Warning]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.

Node and tool

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 :

Select feature and add it

Figure 2.22.  Select feature and add it


Add diagram label into Feature Mapping

Figure 2.23.  Add diagram label into Feature Mapping


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

Edit the LinkMapping Transition

Figure 2.24.  Edit the LinkMapping Transition


Now, the file fsm.gmfmap looks like this :

fsm.gmfmap

Figure 2.25.  fsm.gmfmap


2.3.6.  Diagram Editor Gen Model

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

fsmStatic.gmfmap

Figure 2.26.  fsmStatic.gmfmap


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

fsmStatic.gmfmap

Figure 2.27.  fsmStatic.gmfmap


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

2.4.  Use the generated editor

To test the generated editor right click on org.kermeta.fsm.gmf.diagram -> Run as -> Eclipse application. It opens a new Eclipse instance (runtime) where the tested plugin is added. Create a new General Project in this new Eclipse named testFSMEditor. Right click on it -> New -> Example -> Fsm Diagam

Create Fsm Diagram model

Figure 2.28.  Create Fsm Diagram model


We choose to call our files test.fsm and test.fsm_diagram In this generated editor the model is stored into two files :

  1. test.fsm : store information on domain model

  2. test.fsm_diagram : store graphical informations

Open the test.fsm_diagram and use the palette. You can have a result like this :

Edit Fsm Diagram model

Figure 2.29.  Edit Fsm Diagram model


We have created a very little graphical editor to illustrate the FSM example . For more informations please refer to the GMF documentation.

Prev   
Chapter 1.  Introduction  Home