Change the outline, part 3

You can judge an outline by its outfit

Time for some make up!

Changing the icons of the outline is quite easy, just write the right methods in the LabelProvider (MyDslLabelProvider) class. Xtext expect a method named image which returns a String and has the element of our model as the sole parameter. That element is the one that we want to define the icon in the outline and the String is the name of the file containing the image. The default implementation expects that the images are in a folder, of the plug-in, called icons. If you don’t like this behaviour you can still customize it through Google Guice, changing the proper member of PluginImageHelper.
Here are the project’s folders, with the icons folder:

Don’t forget to set that folder to be included in the binary build (in plugin.xml)!

With everything in place, just edit the LabelProvider:

String image(TypeDeclaration type)
   return "yellow_square.gif";
String image(Room room)
   return "red_square.gif";
String image(FurnitureDeclaration furn)
   return "green_square.gif";
String image(Share share)
   return "blue_square.gif";
String image(RoomReference roomRef)
   //Of course, you can return different icons according to the model's state.
   String featName = roomRef.eContainmentFeature().getName();
      return "one_square.gif";
   return "two_square.gif";

Now the outline looks like this:

Changing the style of a label of the outline, again, is not hard: each ContentOutlineNode holds a StyledString that we can customize. Just override the relative createNode method in the Transformer class, updating the StyledString. A StyledString need a StyledString.Styler that apply the styles. To build that we need a font and a color, each one registered in the right ResourceRegistry (FontRegistry and ColorRegistry). We have some initialization to do, so we explicit the default constructor of MyDslTransformer annotating it with @Inject, to direct it to Google Guice.
Here is the code for all these things:

  * We want a separate styler to get the bold font.
protected StyledString.Styler roomStyler;
@Inject//For Google Guice.
public MyDslTransformer()
   //Put the colors that we need later. Use Class names as keys.
   JFaceResources.getColorRegistry().put(TypeDeclaration.class.getSimpleName(), new RGB(255, 0, 0));
   JFaceResources.getColorRegistry().put(Room.class.getSimpleName(), new RGB(255, 100, 0));
   //Get the default font height. We get only the first element of the array.
   int defHeight = (int)JFaceResources.getFontRegistry().defaultFont().getFontData()[0].height;
   //Create the font data so that it becomes bold.
   FontData fontData = new FontData(Room.class.getSimpleName(), defHeight, SWT.BOLD);
   //Put the font in the registry.
   JFaceResources.getFontRegistry().put(Room.class.getSimpleName(), new FontData[]{fontData});
   roomStyler = new StyledString.Styler()
      public void applyStyles(TextStyle textStyle)
         //Retrieve the registered font and color.
         textStyle.font = JFaceResources.getFontRegistry().get(Room.class.getSimpleName());
         textStyle.foreground = JFaceResources.getColorRegistry().get(Room.class.getSimpleName());
public ContentOutlineNode createNode(TypeDeclaration semanticNode, ContentOutlineNode outlineParentNode)
   ContentOutlineNode node = super.newOutlineNode(semanticNode, outlineParentNode);
   //Update the StyledString for all the label.
   node.getStyledString().setStyle(0, node.getLabel().length(), StyledString.createColorRegistryStyler(TypeDeclaration.class.getSimpleName(), null));
    return node;

public ContentOutlineNode createNode(Room semanticNode, ContentOutlineNode outlineParentNode)
   ContentOutlineNode node = super.newOutlineNode(semanticNode, outlineParentNode);
   //Set the styler with the one created to all the label.
   node.getStyledString().setStyle(0, node.getLabel().length(), roomStyler);
   return node;

Now, your outline should looks like this:


About Luong

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s