< Précédent

Leçon 5 : Insérer des images dans les outils de profil

Dans cette leçon, vous allez ajouter des images à un profil et à ses outils.
Avant de commencer, vérifiez que vous disposez de fichiers graphiques tels que des fichiers GIF ou JPG de 16 x 16 pixels pour les icônes qui seront affichées dans la vue Explorateur de projets, et de fichiers SVG ou GIF de 50 x 50 pixels pour les images qui seront affichées dans l'éditeur de diagramme.
Lorsque vous ajoutez des icônes et des images personnalisées à un stéréotype dans un profil que vous créez, elles apparaissent aux endroits suivants de l'outil de profil généré :
Vous pouvez spécifier une icône et une image pour identifier chaque stéréotype que vous créez. Lorsque vous appliquez le stéréotype à un élément de modèle, l'icône spécifiée apparaît à côté du nom du stéréotype, tandis que l'image spécifiée remplace l'image par défaut des éléments de diagramme, dans l'éditeur de diagramme.
Remarque : Dans cette leçon, le fichier nommé yellowA.gif est utilisé pour l'image de l'icône et le fichier nommé greenA.gif est utilisé pour l'image du stéréotype <A>.

Pour ajouter des images personnalisées à un profil :

  1. Créez un nouveau projet de plug-in d'outil de profil en suivant les explications des leçons 1 et 2.
  2. A l'aide d'un programme d'édition graphique, créez deux fichiers graphiques que vous utiliserez plus tard dans cette leçon. Leur apparence n'a pas importance ici, puisqu'il s'agit d'un tutoriel, mais vous pouvez quand même essayer de reproduire les images visibles dans la capture d'écran présentée plus loin dans cette leçon :
    1. Créez une petite icône de stéréotype pour la vue Explorateur de projets. Créez un A majuscule avec un fond jaune, nommez le fichier yellowA.gif et veillez à ce qu'il s'agisse d'un fichier GIF de 16 x 16 pixels.
    2. Créez une image destinée à être affichée dans l'éditeur de diagramme. Créez un A majuscule avec un fond vert, nommez le fichier greenA.gif et veillez à ce qu'il s'agisse d'un fichier GIF de 50 x 50 pixels.
      Remarque : Il n'est pas obligatoire que ces fichiers soient placés dans le répertoire de votre projet ; le moment venu, vous pourrez les sélectionner en parcourant votre système de fichiers.
    3. Créez une petite icône de stéréotype destinée à apparaître sur l'onglet Property d'un stéréotype, dans la vue Propriétés. Créez un A majuscule avec un fond orange, nommez le fichier orangeA.gif et veillez à ce qu'il s'agisse d'un fichier GIF de 16 x 16 pixels.
      Important : Ce fichier doit être placé dans le package du projet de plug-in d'outil de profil. Avant de personnaliser l'onglet Property, vous devez importer le fichier graphique dans le projet de plug-in d'outil de profil (par exemple, icons/orangeA.gif).
  3. Pour ajouter une icône et une image à un stéréotype, dans la vue Explorateur de projets, développez la branche du dossier Profils et naviguez jusqu'au stéréotype voulu (par exemple, <<A>>).
  4. Dans la vue Propriétés, cliquez sur l'onglet Général ; cliquez ensuite sur le bouton "Parcourir", à droite de la zone Icône, naviguez jusqu'à l'emplacement où vous avez stocké le fichier yellowA.gif et sélectionnez-le.
  5. Dans la vue Propriétés, cliquez sur l'onglet Général ; cliquez ensuite sur le bouton "Parcourir", à droite de la zone Forme, naviguez jusqu'à l'emplacement où vous avez stocké le fichier greenA.gif et sélectionnez-le.
  6. Cliquez sur Fichier > Sauvegarder.
  7. Dans la vue Explorateur de projets, sous Profils, faites un clic droit sur My profile et sélectionnez Générer un modèle d'outil de profil.
    Remarque : Si le modèle d'outil a été généré, vous devez le mettre à jour après avoir ajouté les images au profil. Cependant, dans la fenêtre de comparaison-fusion visuelle, vous pouvez choisir de remplacer les personnalisations que vous avez effectuées dans le modèle d'outil de profil.
  8. Pour ajouter une image personnalisée à l'onglet Property d'un stéréotype, faites en sorte qu'elle soit disponible dans le package du projet de plug-in d'outil de profil. Avant de personnaliser l'onglet Property, importez le fichier orangeA.gif dans le répertoire des icônes du projet.
  9. Dans la vue Explorateur de projets, ouvrez le modèle d'outil My Profile et développez les éléments suivants : package <<Properties>> Properties et onglets <<PropertyTabs>> Property.
  10. Sélectionnez l'onglet Property de l'élément auquel vous souhaitez ajouter une icône personnalisée : <<PropertyTab>> <A> Actor.
  11. Dans la vue Propriétés, sélectionnez l'onglet PropertyTab.
  12. Pour la valeur de la propriété image, spécifiez l'emplacement de l'icône personnalisée : icons/orangeA.gif.
  13. Si vous voulez mettre en retrait l'onglet Property, vous pouvez spécifier True pour la propriété indented. La figure suivante montre les propriétés résultantes pour <<PropertyTab>><A> Actor.Fenêtre Propriétés de <<PropertyTab>><A> Actor.
  14. Cliquez sur Fichier > Sauvegarder.
  15. Dans la vue Explorateur de projets, faites un clic droit sur le modèle d'outil (ToolingModel) et sélectionnez Générer l'outil.

A présent, si vous déployez le plug-in d'outil de profil et que vous créez un nouveau modèle basé sur ce profil, les images personnalisées seront visibles dans l'éditeur de diagramme, la vue Explorateur de projets, la palette, la vue Structure et la vue Propriétés, comme dans l'illustration suivante : Images personnalisées visibles dans l'éditeur de diagramme ainsi que dans les vues Explorateur de projets, Palette, Structure et Propriétés.