Providing Own Images

Prerequisite

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.

Creating an Image Provider

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:

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 =
              "org.eclipse.graphiti.examples.tutorial.";
 
    // 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.
             MyTutorialDiagramTypeProvider"
         name="My tutorial editor">
      <diagramType
            id="org.eclipse.graphiti.examples.tutorial.diagram.
                MyTutorialDiagramType">
      </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 ...
 
}

 

Test: Verify the Own Image for the Context-Button

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.