Actions

EuGENia: Nodes with centred content

This recipe shows how to create nodes in your GMF editor whose contents are centred both horizontally and vertically. The resulting editor will produce nodes like this:

We'll start with the following metamodel and EuGENia annotations:

@gmf.diagram(foo="bar")
class System {
   val Widget[*] widgets;
}

@gmf.node(label="name", label.icon="false")
class System {
   attr String[1] name;
}

We'll use a custom layout manager to achieve the centring. We need to add a polishing transformation to our project (described in more detail in this article), which adds the custom layout to our widget figure. In a file named ECore2GMF.eol, place the following code:

findShape('WidgetFigure').layout = createCentredLayout();

operation findShape(name : String) : GmfGraph!Label {
  return GmfGraph!Shape.all.selectOne(s|s.name = name);
}

operation createCentredLayout() : GmfGraph!CustomLayout {
  var layout = new GmfGraph!CustomLayout;
  layout.qualifiedClassName = 'widgets.custom.layouts.CentredLayout';
  return layout;
}

Notice that the layout specifies a qualified class name of widgets.custom.layouts.CentredLayout. We must create a class with that name, which implements the LayoutManager of draw2d.

To implement the centred layout, we'll use this exemplar implementation of widgets.custom.layouts.CentredLayout, and place it in a widgets.custom plug-in project. We must add a dependency for the widgets.custom plugin project to the widgets.diagram project generated by GMF.