Définition de l'apparence des liens

Le composant Diagram génère des instances de la classe Link pour représenter les relations entre des éléments. IBM® ILOG® Dojo Diagrammer fournit un mécanisme de définition de style intégré qui permet de personnaliser la représentation graphique des liens.

Définition du modèle de lien

Pour définir le modèle de lien :
  • Utilisez la propriété linkTemplate. La valeur est une chaîne JSON ou un objet qui décrit le noeud en tant que hiérarchie de formes GFX. Elle suit les mêmes règles que la propriété nodeTemplate. Pour plus d'informations, voir Définition de l'apparence des noeuds.
    Un diagram.Link est composé de trois sous-composants dojox.gfx.Shape :
    • chemin principal (obligatoire)
    • flèche de début (facultatif)
    • flèche de fin (facultatif)
    Le modèle de lien doit être conforme à cette structure. Chaque forme du modèle de lien doit inclure un identificateur spécifique par le biais d'une propriété dojoAttachPoint qui spécifie le sous-composant auquel chaque forme correspond. En fonction du sous-composant, la propriété dojoAttachPoint doit être l'une des spécifications de sous-composant suivantes : _path, _startArrow ou _endArrow.
L'exemple suivant est une version simplifiée du modèle de lien par défaut (sans les liaisons pour simplifier) :
[{
      dojoAttachPoint: '_path',
      shape: {
         type: 'polyline',
         points: [{
            x: 0,
            y: 0
         }, {
            x: 100,
            y: 100
         }]
      },
      stroke: {
         width: 2
      }
   }
   ,
   {
      dojoAttachPoint: '_endArrow',
      shape: {
         type: 'polyline',
         points: [{
            x: -8,
            y: 4
         }, {
            x: 0,
            y: 0
         }, {
            x: -8,
            y: -4
         }]
      },
      fill: '#00'
   }
]
Le code suivant définit un lien avec un cercle comme flèche de début, et une ligne polygonale comme chemin de lien et flèche de fin :
var linkTemplate = "[{
      dojoAttachPoint: '_path',
      shape: {
         type: 'polyline',
         points: [{
            x: 0,
            y: 0
         }, {
            x: 100,
            y: 100
         }]
      },
      stroke: {
         width: 2
      }
   }
   ,
   {
      dojoAttachPoint: '_startArrow',
      shape: {
         type: 'circle',
         r: 4
      },
      fill: 'white',
      stroke: 'black'
   }
   ,
   {
      dojoAttachPoint: '_endArrow',
      shape: {
         type: 'polyline',
         points: [{
            x: -8,
            y: 4
         }, {
            x: 0,
            y: 0
         }, {
            x: -8,
            y: -4
         }, {
            x: -8,
            y: 4
         }]
      },
      fill: 'black'
   }
]";

Définition du style de lien

Pour personnaliser le style de lien :
  • Utilisez la propriété linkStyle. La valeur est un objet JavaScript simple qui contient des définitions pour les propriétés de lien correspondantes que vous souhaitez définir. Ceci est valide pour chaque propriété de lien s'il existe une méthode d'accès set pour la propriété et si son nom respecte la convention de dénomination Java (pour une propriété nommée a_property, une méthode d'accès set setAProperty doit exister).
    La classe de lien définit les propriétés suivantes qui peuvent être utilisées pour modifier l'apparence du lien avec la propriété linkStyle :
    Propriété Type Description
    strokeColor string ou dojo.Color
    Définit la couleur de trait du lien.
    strokeWidth Entier
    Définit la largeur de trait du lien.
    selectedStrokeColor string ou dojo.Color
    Définit la couleur de trait du lien lorsque ce dernier est sélectionné.
    selectedStrokeWidth Entier
    Définit la largeur de trait du lien lorsque ce dernier est sélectionné.
    startArrowVisible Booléen
    Définit si la flèche de début est visible.
    startArrowFill dojox.gfx.fill
    Définit le remplissage de la flèche de début.
    startArrowStroke dojox.gfx.stroke
    Définit le trait de la flèche de début.
    endArrowVisible Booléen
    Définit si la flèche de fin est visible.
    endArrowFill dojox.gfx.fill
    Définit le remplissage de la flèche de fin.
    endArrowStroke dojox.gfx.stroke
    Définit le trait de la flèche de fin.
    Par exemple, le code suivant définit la largeur de trait du lien sur 4 :
    <div id="canvas" dojoType='ibm_ilog.diagram.widget.Diagram' style="width:900px;height:700px" movableNode="true"
              linkStyle="{strokeWidth:4}">
       </div>

Définition de liens personnalisés à l'aide d'un programme

Pour définir des liens personnalisés :
  • Définissez les attributs onLinkCreated ou createLinkFunction du widget Diagram, si les mécanismes décrits dans cette rubrique ne sont pas suffisants pour personnaliser les liens.
    L'attribut onLinkCreated est appelé chaque fois qu'un lien a été créé. Il vous permet de personnaliser le lien en fonction de vos besoins. La fonction doit être conforme au prototype suivant :
    function linkCreated(link, start, end, diagram){
        // summary: Called after a Node is created by the Diagram widget
        // link: ibm_ilog.diagram.Link: The newly created Link.
        // start: ibm_ilog.diagram.Node: The start node of the link.
        // end: ibm_ilog.diagram.Node: The end node of the link.
        // diagram: ibm_ilog.diagram.widget.Diagram: The Diagram widget
    };
    L'attribut createLinkFunction vous permet de modifier le mode de création d'un lien. Il est appelé pour créer chaque lien et doit être conforme au prototype suivant :
    function createLink(item, start, end, template, onGraph, diagram){
        // summary: Creates a Link for a given data store item.
        // item: The item contained in the linksStore, or null if the link is not created from a linksStore item.
        // start: ibm_ilog.diagram.Node: The start node of the link.
        // end: ibm_ilog.diagram.Node: The end node of the link.
        // template: The suggested node template.
        // onGraph: The parent Graph in which the node must be created.
        // diagram: ibm_ilog.diagram.widget.Diagram: The Diagram widget.
        ...
        return link; // ibm_ilog.diagram.Link
    };
    Le modèle suggéré est celui qui est spécifié par les attributs linkTemplate ou linkTemplateFunction. L'attribut createLinkFunction peut utiliser un modèle différent. Pour créer le lien personnalisé, l'attribut createLinkFunction doit appeler la fonction createTemplatedShape du widget Diagram.
    L'exemple suivant crée une instance de la classe MyLink, laquelle doit être une sous-classe de ibm_ilog.diagram.Link :
    function createLink(item, start, end, template, onGraph, diagram){
        return diagram.createTemplatedShape(MyLink, template, onGraph, diagram.linkStyle, diagram.linksStore, item);
    };
    Si l'attribut createLinkFunction ne connecte pas le lien aux noeuds de début et de fin (en appelant link.setStartPort/setEndPort), cette connexion est effectuée automatiquement par le widget Diagram après que l'attribut createLinkFunction est appelé. Cependant, l'attribut createLinkFunction peut connecter le lien, par exemple, pour personnaliser les points de connexion ou pour utiliser les ports personnalisés. Dans ce cas, le widget ne remplace pas les ports définis par la fonction.