Vainolo's Blog

Creating an OPM GEF Editor – Part 24: Showing Feedback to the User


Previous tutorial: Creating an OPM GEF Editor – Part 23: Drag & Drop from the Palette

Giving feedback to the user is very important in graphical editors which may have lots of information and we would like to minimize the amount of mistakes the user does. One example of feedback is coloring a figure when it is the target of an “add” operations – for example, color the Object to which a State is being added. The user can see very fast the change in the object and act upon the change (validate/cancel).

This is one of the places where the investment in GEF gives its fruits. Adding feedback seemed so simple that I thought is wouldn’t work. Feedback is handled by the EditPolicy in charge of creating new model elements, in my case, OPMContainerXYLayoutPolicy. Two functions were overriden to provide feedback: showLayoutTargetFeedback and eraseLayoutTargetFeedback. Both of these functions are called automatically by the GEF framework. To show how this works, I decided to paint the target figure a light blue color and to add a Donald Duck icon that moves with the cursor while you can apply the policy. This is the code that implements this functionality:

  protected void showLayoutTargetFeedback(Request request) {
    if(getHostFigure() instanceof OPMThingFigure) {
      OPMThingFigure figure = (OPMThingFigure) getHostFigure();
      // Adding a new ellipse somewhere in the screen:
      if(!request.getExtendedData().containsKey("feedbackFigure")) {
        IFigure feedbackFigure =
            new ImageFigure(ImageDescriptor.createFromFile(this.getClass(), "../icons/dd.png").createImage());
        feedbackFigure.setLocation(((DropRequest) request).getLocation());
        request.getExtendedData().put("feedbackFigure", feedbackFigure);
      } else {
        IFigure feedbackFigure = (IFigure) request.getExtendedData().remove("feedbackFigure");
        feedbackFigure.setLocation(((DropRequest) request).getLocation());
        request.getExtendedData().put("feedbackFigure", feedbackFigure);

  protected void eraseLayoutTargetFeedback(Request request) {
    if(getHostFigure() instanceof OPMThingFigure) {
      OPMThingFigure figure = (OPMThingFigure) getHostFigure();
      IFigure feedbackFigure = (IFigure) request.getExtendedData().remove("feedbackFigure");

And this is how it looks (thanks to Screencast-O-Matic):


Cool, Ah? As usual, the source code for this example (as part of the whole project) can be found here.

Next Tutorial: Creating an OPM GEF Editor – Part 25: “Smart” Multi-line Text Figure

Enhanced by Zemanta

Written by vainolo

February 17th, 2013 at 11:20 pm

8 Responses to 'Creating an OPM GEF Editor – Part 24: Showing Feedback to the User'

Subscribe to comments with RSS or TrackBack to 'Creating an OPM GEF Editor – Part 24: Showing Feedback to the User'.

  1. Hi,
    I have two questions.
    (1) I would like to bring some of the custom shapes inside my GEF editor palette. Kindly please help me to bring in the .svg files (or related files) in my Palette .
    (2) How can i rotate the OPMObject / OPMProcess in the GEF Editor ?
    Thanks in advance.


    22 Nov 14 at 21:30

  2. The best place to ask questions like this is StackOverflow.


    24 Nov 14 at 09:39

  3. Hi,
    As for the feedback to the user, I need to develop an editor that can provide a pop-up message to the user when user are making mistakes during designing, eg. naming two model elements with the same name. I’ve got a bit of the ideas from this tutorial, but until now i still cannot find a way to do it. Really hoping for your help.

    Thank you.


    23 May 15 at 15:30

  4. Should be straightforward to show a popup dialog with the desired feedback on it. You can find information on how to show dialogs here.


    28 May 15 at 17:16

  5. Hi,
    I’ve found the way to show the dialog, but still stuck on how to import the text from the label of the model elements and how to loop it. Can you give me some ideas? Thank you very much !


    28 May 15 at 17:25

  6. Your model should be available when you try and change something, so this should not be a problem.


    30 May 15 at 22:25

  7. Hi,
    I realize that the solution might be easy for you but I am truly a beginner in Java and GEF, I really have no idea what to do now. I’ve tried out several possible ways but nothing seems to work out.

    below is my current required code in “OPMThingDirectEditPolicy” by editing your tutorial code:

    @Override protected Command getDirectEditCommand(DirectEditRequest request) {
    OPMThingRenameCommand command = new OPMThingRenameCommand();
    String labelText = ((OPMThingFigure)getHostFigure()).getNameLabel().getText();

    command.setModel((OPMThing) getHost().getModel());
    command.setNewName((String) request.getCellEditor().getValue());

    MessageDialog.openWarning(null, “Diagram Critics”,
    “A model element name must be unique. \n\nPlease rename or delete the new model element.”);

    return command;

    However, this code only returns a popup dialog when editing a model element with its old name. I need it to read all the others’ name and return a popup message when a same name is detected.

    I’ve tried to find the solution on the net but couldn’t find it until now.

    Really need your help. Thank you very much


    31 May 15 at 16:45

  8. You can take the OPMThing model and fetch its container, from which you can then get all children and check their names.


    1 Jun 15 at 13:12

Leave a Reply

%d bloggers like this: