Last updated on 2014-09-07
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:
@Override
protected void showLayoutTargetFeedback(Request request) {
if(getHostFigure() instanceof OPMThingFigure) {
OPMThingFigure figure = (OPMThingFigure) getHostFigure();
figure.setBackgroundColor(ColorConstants.lightBlue);
figure.setOpaque(true);
// 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());
feedbackFigure.setSize(feedbackFigure.getPreferredSize());
addFeedback(feedbackFigure);
request.getExtendedData().put("feedbackFigure", feedbackFigure);
} else {
IFigure feedbackFigure = (IFigure) request.getExtendedData().remove("feedbackFigure");
feedbackFigure.setLocation(((DropRequest) request).getLocation());
request.getExtendedData().put("feedbackFigure", feedbackFigure);
}
}
}
@Override
protected void eraseLayoutTargetFeedback(Request request) {
if(getHostFigure() instanceof OPMThingFigure) {
OPMThingFigure figure = (OPMThingFigure) getHostFigure();
figure.setBackgroundColor(ColorConstants.white);
figure.setOpaque(false);
IFigure feedbackFigure = (IFigure) request.getExtendedData().remove("feedbackFigure");
removeFeedback(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
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.
The best place to ask questions like this is StackOverflow.
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.
Should be straightforward to show a popup dialog with the desired feedback on it. You can find information on how to show dialogs here.
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 !
Your model should be available when you try and change something, so this should not be a problem.
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());
if(command.getNewName().equals(labelText)){
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
You can take the
OPMThingmodel and fetch its container, from which you can then get all children and check their names.