gmf_tutorial4 [GMF Samples And Tutorials]


In this topic we will see how to build a custom node figure.

We will redefine the file node figure of the filesystem tutorial to get something like this :

This tutorial is based on the third tutorial.

The tutorial 3 model files can be downloaded from this location.

Full code is availabale through :

This tutorial has been built with :

  • Eclipse 3.5.1
  • Graphical Modeling Framework SDK 2.2.1
  • Eclipse Modeling Framework 2.5.0

Build the custom figure

In order to build our custom figure, we will use a Scalable polygon built like this (the edges give the polygon path) :

Our path is equivalent to A1→A2→A3→A6→A4→A3→A4→A5→A1.

These are the steps to follow :

  • Open the filesystem.gmfgraph file
  • Delete the Rectangle FileFigure
  • Under the Figure Descriptor FileFigure node, add a Scalable Polygon node
  • Set its name to FileFigure in the property view
  • Under the Scalable Polygon FileFigure node, add a Label node and set its name to FileNameFigure and it Text to <..> in the property view
  • Select the Child Access which is under the Figure Descriptor FileFigure node
  • In the propertye view, select the Label FileNameFigure for the Figure attribute
  • Under the Scalable Polygon FileFigure node, add a Template Point child node and set its properties to x=0, y=0.
  • Add seven other Template Point nodes with this values :
    • x=40, y=0
    • x=40, y=30
    • x=30, y=30
    • x=30, y=40
    • x=40, y=30
    • x=30, y=40
    • x=0, y=40
  • Click on the Transform label of the dashboard
  • Regenerate the diagram editor

You should get this result :

Edge anchor default...

This situation is not perfect because if we reorganize our diagram, and if an edge anchor comes near the right bottom of a file node figure, the edge does not touch it as you can see here :

It is because GMF believes by default that every figure is a rectangle.

Reconnect the edges with our figure !

To allow GMF to connect correctly the edges to our figure, we have to describe the external polygon on which anchors should be attached.

To do that, we have to modify the Java class /Filesystem.diagram/src/jfb/examples/gmf/filesystem/diagram/edit/parts/, and more precisely the method createNodePlate().

By default this method only create a default node figure :

	 * @generated
	protected NodeFigure createNodePlate() {
		DefaultSizeNodeFigure result = new DefaultSizeNodeFigure(40, 40);
		return result;

We will override the getPolygonPoints() of the DefaultSizeNodeFigure like this (you may recognize the external representation of our figure, in other words, the path A1→A2→A3→A4→A5→A1) :

	 * @generated NOT
	protected NodeFigure createNodePlate() {
		DefaultSizeNodeFigure result = new DefaultSizeNodeFigure(40, 40) {
			public PointList getPolygonPoints() {
				PointList points = new PointList(6);
				Rectangle anchRect = getHandleBounds();
				points.addPoint(anchRect.x,                          anchRect.y);                         // A1
				points.addPoint(anchRect.x + anchRect.width,         anchRect.y);                         // A2
				points.addPoint(anchRect.x + anchRect.width,         anchRect.y + anchRect.height*30/40); // A3
				points.addPoint(anchRect.x + anchRect.width * 30/40, anchRect.y + anchRect.height);       // A4
				points.addPoint(anchRect.x,                          anchRect.y + anchRect.height);       // A5
				points.addPoint(anchRect.x,                          anchRect.y);                         // A1
				return points;
		return result;

Note that the word 'NOT' has been added in the javadoc after @generated to indicate to GMF that this method must not be regenereated in the future.

If you run your editor you should now get this :

Thank you

I hope that this material will be helpful for you. If you want to support it, your help is welcome :


Jose Angel Quintanar-Morales, 2010/05/06 15:10

Excellent, Good job, for a many monts I'm searching, it just I need.

Congratulations from Mexico.

Jose Angel Quintanar-Morales, 2010/05/06 15:10

Excellent, Good job, for a many monts I'm searching, it just I need.

Congratulations from Mexico.

Jean-François Brazeau, 2010/07/07 21:46

Thank you very much !

Nice to see that these pages helps some people in the world.

Thank you again !


Oscar Fajardo, 2010/10/22 19:18

Hi, I wish to congratulate you for this effort. I've been looking for this for a while and I'm very grateful.

I've been wondering if there's a detailed documentation of every item that exists in GMF for example in the GMFgraph eg: Data, Layout, Color, Dimension, etc.. or in GMFmap the AuditContainer, Is there any place where I can find this, by examples perhaps?

Thank you very much!

Greetings from Colombia

Oscar Fajardo, 2010/10/22 20:29

Hi, I've also been wondering if there's any posibility to make the label of a figure appear inside the figure(it is a circle and a pentagon) not just inside the invisible retangle GMF assigns… Thank you very much

Jean-François Brazeau, 2010/10/23 08:12

Hello Oscar,

The documentation you're looking for probably exists… But I can't tell you where. As far as I can see, the best way to find some help on GMF is to use Google and to persevere ! I'm not sure to understand what you mean when you talk about the invisible rectangle GMF assigns, but it is possible to get another figure than a rectangle for a node. To do that, you have to modify you gmfgraph file, for example by turning the default rectangle generated by GMF into another figure (ellispe, …). There is an example in the 5th GMF tutorial, the operator result is an ellipse containing a label (the easiest way to transform the node figure is to edit the gmfgraph in a text editor mode).

Good luck !


vikas, 2011/03/14 08:06

Hi, First of all I would like to thank you for these excellent turorials. I was wondering if I can change the connection arcs also, for instance, adding aggregation or composition arcs with filled or empty diamond structures.

Thanks again vikas

Jean-François Brazeau, 2011/04/19 20:56


Yes it is possible to modify the connection arcs. To achieve this, you will have to declare a Polygon Decoration in your Polyline Connection and select it as the Source Decoration (or Target Decoration). Generate your diagram code and edit the corresponding EditPart java class. At the end of this class, there is an inner class extending PolylineConnectionEx. You will have to customize the createSourceDecoration() (or createTargetDecoration()) method for example like this (diamond example) :

 * @generated NOT
private RotatableDecoration createSourceDecoration() {
	PolygonDecoration df = new PolygonDecoration();
	df.setBackgroundColor(new Color(null, 200, 200, 200));
	PointList pointList = new PointList();
	pointList.addPoint(0, 0);
	pointList.addPoint(-1, 1);
	pointList.addPoint(-2, 0);
	pointList.addPoint(-1, -1);
	return df;

Hope it helps. It would be a good idea to add a paragraph about this in the current tutorial. I will try to do it soon.



Ezzine Achraf, 2011/03/19 11:57

Hello, is there any possibility to drag and drop an image? is whether you can give me a useful link


Jean-François Brazeau, 2011/04/19 20:57


What do you want to do exactly ? I am not sure that a GMF diagram editor is adapted for such an operation. Are you sure you want to be able to drag'n'drop an image ?



Rahma, 2011/05/04 16:15


I have in my gmfgraph a scalable polygon: having the form of Diamond. On the edge of this Diamond, I have a port (having the propriety Affixed Parent Side: WEST). The problem that the port isn't attached to the Diamond because because GMF believes by default that every figure is a rectangle. What should I do to attach the to the Diamond.


Jean-François Brazeau, 2011/05/05 06:59


Maybe you should take a look at the fourth GMF tutorial in which a similar problem is solved (about edge connections).



Aksel scofeld, 2011/06/15 09:48

Really great work, and thanks so much for this detailed tutorial. If possible could you put a tutorial for using image as custom figures and adding Label to it. I am successful in using image as custom figures but when i try to ass label to it it has constructor problems. So if possible please help me in this regard.

Thanks again

Jean-François Brazeau, 2011/06/15 18:36

Thank you. A tutorial with images as custom figures is a good idea for a new tutorial. I'm sorry but I don't have enough availabilty this time to do it now. Maybe later…..



Jean Jaques Michel, 2014/03/30 22:30

Absolutely great work here, congrats. I have a queston for you if it's possible. I would know if there is a way to connect to edges of an ellipse, because ellipses seem to be considered as a rectangle too. Listing (programatically) all the points of an ellipse is a solution, but i do not like it, so if you have another one, i'll take it.



Jacket Tang, 2014/05/14 05:33

An excellent work! I'm working for my undergraduate thesis recently,and your tutorials help me a lot. Regards, from China.

gmf_tutorial4.txt · Last modified: 2011/08/08 20:06 by jfbraz
Except where otherwise noted, content on this wiki is licensed under the following license:CC Attribution-Noncommercial-Share Alike 3.0 Unported
Recent changes RSS feed Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki