Providing own images is platform dependent (e.g. Eclipse specific).
You have to copy an icon representing an association to the location "icons/ereference.gif" of your plugin. This icon will be registered and used in this chapter.
Own images can be provided through implementations of image providers, which have to be registered using extensions in the plugin.xml.
Graphiti is (mostly) platform independent, but instances of images are platform dependent. Thus images in Graphiti are only used via identifiers, and the task of the image provider is to deliver the platform-dependent image for an image identifier.
In the following example we provide an own image representing an EReference, and use it for the context button “create connection” we created previously.
First we have to create an image provider.
An image provider has to implement the interface IImageProvider. Instead of implementing it directly it is recommended to extend the base class AbstractImageProvider.
In this case we have to implement/overwrite one method:
The method addAvailableImages has to register all available image identifiers, and map them to their platform-dependent images.
You can see the complete implementation of the image provider here:
package org.eclipse.graphiti.examples.tutorial;
import org.eclipse.graphiti.ui.platform.AbstractImageProvider;
public class MyTutorialImageProvider extends AbstractImageProvider {
// The prefix for all identifiers of this image provider
protected static final
String PREFIX =
// The image identifier for an EReference. public static final String IMG_EREFERENCE= PREFIX + "ereference";
@Override protected void addAvailableImages() { // register the path for each image identifier addImageFilePath(IMG_EREFERENCE, "icons/ereference.gif"); } }
|
The newly created image provider is registered through the extension point imageProviders.
Additionally the image provider has to be added to the extension point diagramTypeProviders.
The corresponding part of the plugin.xml should look like this:
<extension point="org.eclipse.graphiti.ui.diagramTypeProviders"> <diagramTypeProvider class="org.eclipse.graphiti.examples.tutorial.diagram. MyTutorialDiagramTypeProvider" description="This is my editor for the Graphiti tutorial"
id="org.eclipse.graphiti.examples.tutorial.diagram. name="My tutorial editor"> <diagramType
id="org.eclipse.graphiti.examples.tutorial.diagram. </diagramType> <imageProvider id="org.eclipse.graphiti.examples.tutorial.MyTutorialImageProvider"> </imageProvider> </diagramTypeProvider> </extension> <extension point="org.eclipse.graphiti.ui.imageProviders"> <imageProvider class="org.eclipse.graphiti.examples.tutorial.MyTutorialImageProvider" id="org.eclipse.graphiti.examples.tutorial.MyTutorialImageProvider"> </imageProvider> </extension>
|
Finally we can set the image for the context button we created previously.
This has to be done in the method getContextButtonPad of the tool behavior provider, as you can see here:
@Override public IContextButtonPadData[] getContextButtonPad(IPictogramElementContext context) {
// ... EXISTING CODING ...
// create context button and add all applicable features ContextButtonEntry button = new ContextButtonEntry(null, context); button.setText("Create connection"); button.setIconId(MyTutorialImageProvider.IMG_EREFERENCE);
// ... EXISTING CODING ...
}
|
Now start the editor and create a new EClass. Hover on top of the EClass to display the context buttons. Verify that the “create connection” context button has the image you provided before.