Overview

In this topic, we will see how to change the default icons generated by EMF / GMF.

When the EMF editor is generated, severals icons are created in the plugin icons folders.

Changing our diagram default icons is mainly to replace these images.

Full code is availabale through :

This tutorial has been built with :

Eclipse 3.5.1
Graphical Modeling Framework SDK 2.2.1
Eclipse Modeling Framework 2.5.0

Model and icons

This tutorial is based on the model built in the first tutorial.

The model files can be downloaded from this location.

The icon files are available at this location.

Diagram editor icons modification

Replace /Filesystem.diagram/icons/obj16/FilesystemDiagramFile.gif by FilesystemDiagram16x16.gif (which means that you have to delete the existing FilesystemDiagramFile.gif file, copy/paste the FilesystemDiagramFile16x16.gif file and rename it with the deleted file name (ie. FilesystemDiagramFile.gif)
Replace /Filesystem.edit/icons/full/obj16/File.gif by File16x16.gif (the same way as above)
Replace /Filesystem.edit/icons/full/obj16/Filesystem.gif by Filesystem16x16.gif (the same way as above)
Replace /Filesystem.edit/icons/full/obj16/Folder.gif by Folder16x16.gif (the same way as above)

You should get this result :

Tools palette icons modification

If you don't modify the tools palette icons, GMF will select the default EMF icons (the icons that are located in /Filesystem.edit/icons). In the previous example, we can see that edges tools icons are not very representative.

It is possible to override this :

In Filesystem.edit/icons/full/obj16, copy Edge16x16.gif and rename it to Edge.gif
In Filesystem.edit, create a folder icons/full/obj32
Copy the icons File32x32.gif, Folder32x32.gif and Edge32x32.gif
Rename these files into File.gif, Folder.gif and Edge.gif
Open the filesystem.gmftool file
Under the Creation Tool File :
- delete both Default image nodes
- Add a small icon bundle image with these properties :
  - Bundle : Filesystem.edit (plugin name in wich the icons are located)
  - Path : icons/full/obj16/File.gif (plugin relative path of the icon)
- Add a large icon bundle image with these properties :
  - Bundle : Filesystem.edit (plugin name in wich the icons are located)
  - Path : icons/full/obj32/File.gif (plugin relative path of the icon)
Repeat this operation with this values :
- Creation Tool Folder :
  - small icon : icons/full/obj16/Folder.gif
  - large icon : icons/full/obj32/Folder.gif
- Creation Tool FolderFolders :
  - small icon : icons/full/obj16/Edge.gif
  - large icon : icons/full/obj32/Edge.gif
- Creation Tool FolderFiles :
  - small icon : icons/full/obj16/Edge.gif
  - large icon : icons/full/obj32/Edge.gif
Click on the Transform label of the dashboard
Regenerate the diagram editor and run it

The gmftool file should loook like this :

And the result should look like this (small tools palette icon size on the left, large on the right):

Model files

You can get the filesystem model files described in this tutorial following this link : gmf-tutorial3-filesystem-model.zip

Thank you

I hope that this material will be helpful for you. If you want to support it, your help is welcome :

Discussion

Bobster, 2011/03/30 10:11

It took me a while to figure it out this part of the tutorial:

Replace /Filesystem.diagram/icons/obj16/FilesystemDiagramFile.gif by FilesystemDiagram16x16.gif

By “Replace X by Y” is meant “Delete X and put Y in its place, and rename Y to X's name”.

Jean-François Brazeau, 2011/04/19 20:14

OK, I've added a few explanations to make it clearer. I agree to say that it wasn't easy to understand… Thank you for the feedback.

Idrees Ashraf, 2011/05/01 21:08

How to add tool tip for each icon. I mean what is the way to show our own description for each each icon when we bring arrow on the icon. Thanks

djamel, 2013/05/03 09:42

hello there,

I would like to know, how can i visualize the large icons, i did exactly all the steps, but i have only the small tools palette icon size , and not the large one.

thanks :)

djamel, 2013/05/03 09:46

it's ok, i have just to choose “use large icons”. i didn't see it :p see you.

Hamza, 2013/06/08 17:12

hi djamel, Pls where did you get the “use large icons” option? Thanks in advance