< Previous

Lesson 5: Insert images in profile tooling

In this lesson, you add images to a profile and its tooling.
Before you begin, you need access to graphic files such as a 16 pixel x 16 pixel GIF or JPG file for the icons that are displayed in the Project Explorer view, as well as a 50 pixel x 50 pixel SVG or GIF file for the images that are displayed in the diagram editor.
When you, as a profile author, add custom icons and images to a stereotype in a profile, the custom graphics are displayed in the following locations in the generated profile tooling:
You can specify an icon and a graphic to identify each stereotype that you create. When you apply the stereotype to a model element, the specified icon is displayed beside the stereotype name, and the specified graphic replaces the default graphic for a diagram element in the diagram editor.
Note: In this lesson, the icon file named yellowA.gif is used for the icon graphic, and the image file named greenA.gif is used for the image of Stereotype <A>.

To add custom images to a profile:

  1. Create a new Profile Tooling plug-in project, as described in Lesson 1 and Lesson 2.
  2. Using a graphics editing program, create two graphic files to use later in this lesson. Although the appearance of the graphics is not important for this tutorial, you might want to create graphics that are similar to those in the screen capture that is displayed later in this lesson:
    1. Create a small stereotype icon for the Project Explorer view. Create an uppercase A with a yellow background, name the file yellowA.gif, and ensure it is a 16 pixel x 16 pixel GIF file.
    2. Create an image for the diagram editor. Create an uppercase A with a green background, name the file greenA.gif, and ensure it is a 50 pixel x 50 pixel GIF file.
      Note: These image files do not have to reside in your project directory; you can browse to your local file system to find the images.
    3. Create a small stereotype icon to appear on the Property tab of a stereotype in the Properties view. Create an uppercase A with an orange background, name the file orangeA.gif, and ensure it is a 16 pixel x 16 pixel GIF file.
      Important: This file must reside in the package of the Profile Tooling plug-in project. Before you customize the Property tab, you must import this graphic into the profile tooling plug-in project (for example, icons/orangeA.gif).
  3. To add an icon and image to a stereotype, in the Project Explorer view, in the Profiles folder, navigate to the stereotype (for example, <<A>>).
  4. In the Properties view, click the General tab; in the Icon field, navigate to and specify the location of the yellowA.gif file.
  5. In the Properties view, click the General tab; in the Shape Image field, navigate to and specify the location of the greenA.gif file.
  6. Click File > Save.
  7. In the Project Explorer view, under Profiles, right-click My Profile; then click Generate Profile Tooling Model.
    Note: If the tooling model was generated, you must update the tooling model after you add the images to the profile. However, in the visual compare-merge window, you can overwrite any customizations that you made to the profile tooling model.
  8. To add a custom image to a stereotype's Property tab, ensure that the image is available in the package of the profile tooling plug-in project. Before you customize the Property tab, import the orangeA.gif image into the icons directory for the project.
  9. In the Project Explorer view, open the My Profile tooling model, and expand the following elements: <<Properties>> Properties package and the <<PropertyTabs>> Property Tabs.
  10. Select the Property tab for the element for which to add a custom icon: <<PropertyTab>> <A> Actor.
  11. In the Properties view, select the PropertyTab tab.
  12. Set the value of the image property to the location of the custom icon: icons/orangeA.gif.
  13. To indent the Property tab, you can specify True for the indented property. The following figure shows the resulting properties for the <<PropertyTab>><A> Actor.Properties window for the <<PropertTab>><A> Actor.
  14. Click File > Save.
  15. In the Project Explorer view, right-click on the tooling model; then click Generate Tooling.

When you deploy the Profile Tooling plug-in and create a new model based on this profile, the custom images are displayed in the diagram editor, Project Explorer view, Palette, Outline view, and Properties view and should look similar to the following figure: Custom images in the diagram editor as well as the Project Explorer, Palette, Outline, and Properties views.

< Previous

Feedback