Un article de azerr    Pas de commentaires

A l’étape du billet précédant [step13] nous avons mis en place le layout automatique. Dans ce billet nous allons améliorer l’aspect visuel des figures draw2d des states et des actions :

• les states seront représentés par l’icône gear.gif .
• les actions seront représentées par un rectangle de couleur jaune pâle (couleur personnalisée) avec une bordure noire.

Vous pouvez télécharger le projet org.example.workflow_step14.zip présenté dans ce billet.

SWT Color#dispose() / Font#dispose()

A ce stade nous n’avons pas encore utilisé d’images ni personnalisé de couleurs (nous utilisons les couleurs systèmes provenant de la constante GEF org.eclipse.draw2d.ColorConstants). Draw2d utilise les classes ressources SWT org.eclipse.swt.graphics.Image et org.eclipse.swt.graphics.Color pour personnaliser les figures drawd2. Ces 2 ressources SWT possédent une méthode dispose() qui doit être apppelée lorsque la ressource n’est plus utilisée par le programme. En effet SWT sollicite le système d’exploitation lorsqu’il créé une ressource SWT Color ou Image. Une fois que la ressource SWT n’est plus utilisée, l’appel de la méthode dispose() permet d’avertir le système d’exploitation que la ressource n’est plus utilisée (pour qu’il puisse libérer sa mémoire).

Une ressource SWT Color, Image est associée à une Thread SWT org.eclipse.swt.widgets.Display qui gère la connection entre SWT et le système d’exploitation.

StateTypeFigure

Dans cette section nous allons représenter un state par l’icône gear.gif :

Copiez l’image gear.gif dans le répertoire icons/graphical du projet org.example.workflow.editor :

e

Il est important d’avoir à l’esprit que qand une Image est créée, elle doit être libérée lorsque qu’elle n’est plus utilisée, ce qui signifie la méthode Image#dispose() doit être appelée :

• à la fermeture de l’editeur de workflow.
• OU à la fermeture de l’IDE Eclipse (lorsque le Display SWT se libère).

Personnellement je préfère la deuxième solution car ceci permet de faire partager la même image pour tous les editeur de workflow ouverts. De plus la création de l’image s’effectuera qu’une seule fois et pas à chaque ouverture
d’un éditeur de workflow.

Notre projet contient un wizard de création d’un fichier workflow.xml. Ce wizard utilise l’image icons/full/wizban/NewWorkflow.gif :

Il est générée par EMF. Voici le code de l’initialisation du wizard qui indique l’image à utiliser :

Le code qui nous intérèsse est :

setDefaultPageImageDescriptor(ExtendedImageRegistry.INSTANCE.getImageDescriptor(WorkflowEditorPlugin.INSTANCE.getImage("full/wizban/NewWorkflow")));

La classe EMF générique org.eclipse.emf.edit.ui.provider.ExtendedImageRegistry permet de gérer un repository d’images :

• qui évite de créer la même image plusieurs fois
• qui libère l’image lorsque le Display SWT associé à l’image est libéré :
  protected void handleDisplayDispose()  
  {
    for (Image image : table.values())
    {
      image.dispose();
    }
    table = null;
  }
   
  protected void hookDisplayDispose(Display display)  
  {
    display.disposeExec
      (new Runnable()  
       {
         public void run()  
         {
           handleDisplayDispose();
         }        
       });
  }

Nous allons utiliser cette classe pour récupérer l’image icons/graphical/gear.gif. Modifiez la classe StateTypeFigure comme suit :

Nous n’avons plus besoin de la méthode StateTypeFigure#paintFigure(Graphics graphics) qui s’occupait de dessiner une ellipse. Relancez le plugin et vous pourrez voir les states représentés par l’icône gear.gif :

Le libélle des state est un peu trop près de l’icône gear. Il est possible de décaler ce libéllé vers la droite à l’aide du code suivant :

super.setIconTextGap(5);

Voici le code en entier de StateTypeFigure :

ActionTypeFigure

Nous souhaions représenter nos actions par des rectangles jaunes pâles avec une bordure noire.

Figure#setOpaque

Actuellement voici le code de ActionTypeFigure :

Ici nous avons re-défini la méthode paintFigure(Graphics graphics) pour dessiner un rectangle avec un fond orange. Mais nous pouvons avoir le même code sans être obligé de redefinir cette méthode comme ceci :

La couleur de fond est mise dans le constructuer avec

super.setBackgroundColor(ColorConstants.orange);

mais pour que cette couleur soit pris en compte, il faut ajouter le code

super.setOpaque(true);

sinon la figure action apparaît blanche.

WorkflowColorConstants

Jusqu’a maintenant nous avons utilisé des couleurs systèmes provenant de l’interface GEF org.eclipse.draw2d.ColorConstants. Ici nous souhaitons représenter les actions avec une couleur de fond jaune pâle, couleur que nous allons créer. Une couleur utilisé dans draw2d est représentée par une instance Color SWT. Pour créer cette couleur nous allons créer une interface WorkflowColorConstants avec nos couleurs personnalisées comme ceci :

C’est d’ailleurs ce que fait le projet d’exemple GEF org.eclipse.gef.examples.logic en définissant l’interface org.eclipse.gef.examples.logicdesigner.figures.LogicColorConstants :

Ceci marche bien, mais comme nous avons vu, une instance Color SWT doit être libérée (méthode Color#dispose())
quand elle n’est plus utilisée. Il n’y aurra certes pas beaucoup d’instance Color qui ne seront pas libérés, mais étant pointilleux, cette solution ne me satisfait pas totalement.

ColorRegistry

Pour régler ce problème nous allons créer un registry de Color SWT, qui libèrera les Color SWT lorsque le Display SWT se libèrera.
Créez la classe org.example.workflow.presentation.graphical.color.ColorRegistry comme suit :

WorkflowColorConstants

Modifiez la classe WorkflowColorConstants pour utiliser notre ColorRegisrty comme suit :

ActionTypeFigure

Nous pouvons maintanenat utiliser notre couleur jaune pâle. Modifiez la classe ActionTypeFigure comme suit :

Relancez le plugin et vous pourrez constater que les actions sont représentées par des rectangles jaunes pâles avec une bordure noire :

Conclusion

La représentation graphique de notre workflow est maintenant terminée. Dans les prochains billets nous allons mettre en place la Palette d’outils GEF qui permettra à partir d’outil de la palette, d’ajouter des figures states, actions et connections dans la page Graphics GEF.