Creating an OPM GEF Editor – Part 19: Displaying Tooltips

Last updated on 2014-09-07

Previous Tutorial: Creating an OPM GEF Editor – Part 18: Snapping to Grid and to Geometry.

Well, I was wrong by saying that there would be more tutorials :-). The tooltip functionality is simply great eye-candy and easy to implement, so why not do it (I may be suffering from featuritis, please call a doctor).

The draw2d framework provides an easy way to add tooltips to a figure. Just call the IFigure.setToolTip(IFigure) method and you are done. While displaying a simple Label may do the trick, for long tooltips this is not good, so we need a Figure that know how to display multi-line text. Thankfully I found an example in the package org.eclipse.gef.ui.palette.editparts.PaletteEditPart which showed how to do this, and I though I should share this with you.

1. First we create a new Figure class which will display the tooltip. This Figure extends a FlowPage and adds to it a TextFlow where the tooltip’s message is written:

   package com.vainolo.phd.opm.gef.editor.figure;
   
   import org.eclipse.draw2d.Border;
   import org.eclipse.draw2d.MarginBorder;
   import org.eclipse.draw2d.geometry.Dimension;
   import org.eclipse.draw2d.text.FlowPage;
   import org.eclipse.draw2d.text.TextFlow;
   
   public class TooltipFigure extends FlowPage {
       private final Border TOOLTIP_BORDER = new MarginBorder(0, 2, 1, 0);
       private TextFlow message;
       
       public TooltipFigure() {
           setOpaque(true);
           setBorder(TOOLTIP_BORDER);
           message = new TextFlow();
           message.setText("");
           add(message);
       }
       
       @Override
       public Dimension getPreferredSize(int w, int h) {
           Dimension d = super.getPreferredSize(-1, -1);
           if (d.width > 150)
               d = super.getPreferredSize(150, -1);
           return d;
       }
       
       public void setMessage(String txt) {
           message.setText(txt);
           revalidate();
           repaint();
       }
   }
   

2. We have changed the OPMFigure implementation to an abstract class to remove code duplication. In this class we now set the tooltip (in the class constructor) and add an method to change the tooltip’s text:

   package com.vainolo.phd.opm.gef.editor.figure;
   
   import org.eclipse.draw2d.Figure;
   import org.eclipse.draw2d.IFigure;
   import org.eclipse.draw2d.Label;
   import org.eclipse.draw2d.XYLayout;
   
   public abstract class OPMThingFigure extends Figure implements OPMNodeFigure {
   
       private Label nameLabel;
       private TooltipFigure tooltipFigure;
       
       /**
        * The figure on which this figure's childs should be added
        * instead of adding them directory.
        * @return a figure on which child figures can be added.
        */
       abstract public IFigure getContentPane();
       
       public OPMThingFigure() {
           setLayoutManager(new XYLayout());
           nameLabel = new Label();
           add(nameLabel);
           tooltipFigure = new TooltipFigure(); 
           setToolTip(tooltipFigure);
       }
       
       /**
        * Get the name {@link Label} of the figure.
        * @return the name {@link Label} of the figure.
        */
       public Label getNameLabel() {
           return nameLabel;
       }    
       
       public void setTooltipText(String tooltipText) {
           tooltipFigure.setMessage(tooltipText);
       }
       
       protected final boolean useLocalCoordinates() {
           return true;
       }    
   }
   

3. Finally, we set the tooltip’s text when the OPMThingEditPart.refreshVisuals method is called (same place where the figure’s label is set):

   	@Override protected void refreshVisuals() {
   		OPMThingFigure figure = (OPMThingFigure)getFigure();
   		OPMThing model = (OPMThing)getModel();
   		GraphicalEditPart parent = (GraphicalEditPart) getParent();
   		
   		figure.getNameLabel().setText(model.getName());
   		parent.setLayoutConstraint(this, figure, model.getConstraints());
   		
   		figure.setTooltipText(model.getDescription());
   	}
   

4. Fire up your editor, add descriptions to your things (using the properties view) and look at the tooltips. Nice, ah?
   

Another day, another feature.

Next Tutorial: Creating an OPM GEF Editor – Part 20: Creating a Context Menu and Adding Custom Actions.