| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
| <html> |
| |
| <head> |
| <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> |
| <title>Providing own images</title> |
| <link href="../book.css" rel="Stylesheet" type="text/css"> |
| <link href="../code.css" rel="Stylesheet" type="text/css"> |
| </head> |
| |
| <body> |
| |
| <h1>Providing Own Images</h1> |
| <h2>Prerequisite</h2> |
| <p>Providing own images is platform dependent (e.g. Eclipse specific). </p> |
| <p>You have to <em>copy an icon</em> representing an association to the location |
| <em>"icons/ereference.gif"</em> of your plugin. This icon will be registered and |
| used in this chapter.</p> |
| <h2>Creating an Image Provider</h2> |
| <p>Own images can be provided through implementations of image providers, which |
| have to be registered using extensions in the <em>plugin.xml.</em></p> |
| <p>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.</p> |
| <p>In the following example we provide an own image representing an EReference, |
| and use it for the <a href="context-buttons.htm">context button</a> "create connection" |
| we created previously.</p> |
| <p>First we have to create an image provider.</p> |
| <p>An image provider has to implement the interface |
| <a href="../../../javadoc/org/eclipse/graphiti/ui/platform/IImageProvider.html"> |
| IImageProvider</a>. Instead of implementing it directly it is recommended to extend |
| the base class |
| <a href="../../../javadoc/org/eclipse/graphiti/ui/platform/AbstractImageProvider.html"> |
| AbstractImageProvider</a>.</p> |
| <p>In this case we have to implement/overwrite one method:</p> |
| <ul> |
| <li>The method |
| <a href="../../../javadoc/org/eclipse/graphiti/ui/platform/AbstractImageProvider.html#addAvailableImages()"> |
| addAvailableImages</a> has to register all available image identifiers, and |
| map them to their platform-dependent images.</li> |
| </ul> |
| <p>You can see the complete implementation of the image provider here:</p> |
| <!-- Begin code ------------------------------------------------------------------------------- --> |
| <p> </p> |
| <div class="literallayout"> |
| <div class="incode"> |
| <p class="code"><span class="keyword">package</span> org.eclipse.graphiti.examples.tutorial;<br> <br> |
| <span class="keyword">import</span> org.eclipse.graphiti.ui.platform.AbstractImageProvider;<br> <br> |
| <span class="keyword">public class</span> MyTutorialImageProvider |
| <span class="keyword">extends</span> AbstractImageProvider {<br> <br> |
| <span class="comment">// The prefix for all identifiers of this image provider</span><br> |
| <span class="keyword"> protected static final</span> String |
| <span class="string"><em>PREFIX</em> </span>= <br> |
| <span class="string">"org.eclipse.graphiti.examples.tutorial."</span>;<br> <br> |
| <span class="comment">// The image identifier for an EReference.</span><br> |
| <span class="keyword">public static final</span> String |
| <span class="string"><em>IMG_EREFERENCE</em></span>= |
| <span class="string"><em>PREFIX</em></span> + <span class="string">"ereference"</span>;<br> <br> |
| @Override<br> <span class="keyword">protected void</span> |
| addAvailableImages() {<br> |
| <span class="comment">// register the path for each image identifier</span><br> |
| addImageFilePath(<span class="string"><em>IMG_EREFERENCE</em></span>, |
| <span class="string">"icons/ereference.gif"</span>);<br> |
| }<br>}<br></p> |
| </div> |
| </div> |
| <p> </p> |
| <!-- End code ------------------------------------------------------------------------------- --> |
| <p>The newly created image provider is registered through the extension point |
| <a href="../extension-points/imageProviders.html">imageProviders</a>.</p> |
| <p>Additionally the image provider has to be added to the extension point |
| <a href="../extension-points/diagramTypeProviders.html">diagramTypeProviders</a>.</p> |
| <p>The corresponding part of the <em>plugin.xml</em> should look like this:</p> |
| <!-- Begin code ------------------------------------------------------------------------------- --> |
| <p> </p> |
| <div class="literallayout"> |
| <div class="incode"> |
| <p class="code"><span class="string"><extension<br> |
| point=</span><span class="comment">"org.eclipse.graphiti.ui.diagramTypeProviders"</span><span class="string">></span><br> |
| <span class="string"><diagramTypeProvider<br> |
| class=</span><span class="comment">"org.eclipse.graphiti.examples.tutorial.diagram.<br> |
| MyTutorialDiagramTypeProvider"</span><br> |
| <span class="string"> description=</span><span class="comment">"This |
| is my editor for the Graphiti tutorial"</span><br> |
| <span class="string">id=</span><span class="comment">"org.eclipse.graphiti.examples.tutorial.diagram.<br> |
| MyTutorialDiagramTypeProvider"</span><br> |
| <span class="string">name=</span><span class="comment">"My tutorial editor"</span><span class="string">></span><br> |
| <span class="string"><diagramType<br> |
| id=</span><span class="comment">"org.eclipse.graphiti.examples.tutorial.diagram.<br> |
| MyTutorialDiagramType"</span><span class="string">></span><br> |
| <span class="string"></diagramType><br> <imageProvider<br> |
| id=</span><span class="comment">"org.eclipse.graphiti.examples.tutorial.MyTutorialImageProvider"</span><span class="string">></span><br> |
| <span class="string"></imageProvider><br> </diagramTypeProvider><br> |
| </extension><br><br><extension<br> point=</span><span class="comment">"org.eclipse.graphiti.ui.imageProviders"</span><span class="string">></span><br> |
| <span class="string"><imageProvider<br> |
| class=</span><span class="comment">"org.eclipse.graphiti.examples.tutorial.MyTutorialImageProvider"</span><br> |
| <span class="string">id=</span><span class="comment">"org.eclipse.graphiti.examples.tutorial.MyTutorialImageProvider"</span><span class="string">></span><br> |
| <span class="string"></imageProvider><br></extension> </span></p> |
| </div> |
| </div> |
| <p> </p> |
| <!-- End code ------------------------------------------------------------------------------- --> |
| <p>Finally we can set the image for the <a href="context-buttons.htm">context button |
| we created previously</a>. </p> |
| <p>This has to be done in the method |
| <a href="../../../javadoc/org/eclipse/graphiti/tb/IToolBehaviorProvider.html#getContextButtonPad(org.eclipse.graphiti.features.context.IPictogramElementContext)"> |
| getContextButtonPad</a> of the tool behavior provider, as you can see here:</p> |
| <!-- Begin code ------------------------------------------------------------------------------- --> |
| <p> </p> |
| <div class="literallayout"> |
| <div class="incode"> |
| <p class="code">@Override<br><span class="keyword">public</span> IContextButtonPadData[] |
| getContextButtonPad(IPictogramElementContext context) {<br> <br> |
| <span class="comment">// ... EXISTING CODING ...</span><br> |
| <br> <span class="comment">// create context button and |
| add all applicable features</span><br> ContextButtonEntry |
| button = <span class="keyword">new</span> ContextButtonEntry(null, context);<br> |
| button.setText(<span class="string">"Create connection"</span>);<br> |
| button.setIconId(MyTutorialImageProvider.<span class="string"><em>IMG_EREFERENCE</em></span>);<br> <br> |
| <span class="comment">// ... EXISTING CODING ...</span><br> <br>} |
| </p> |
| </div> |
| </div> |
| <p> </p> |
| <!-- End code ------------------------------------------------------------------------------- --> |
| <h2>Test: Verify the Own Image for the Context-Button</h2> |
| <p>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.</p> |
| <p> </p> |
| |
| </body> |
| |
| </html> |
