Définition de l'apparence des noeuds

Le composant Diagram génère des instances de la classe Node pour représenter les éléments dans la source de données. IBM® ILOG® Dojo Diagrammer fournit un mécanisme de définition de style intégré qui permet de personnaliser la représentation graphique des noeuds.

Définition du modèle de noeud

Pour définir le modèle de noeud :
  • Utilisez la propriété nodeTemplate de l'objet Diagram.
    Cette propriété définit le contenu interne et l'apparence du noeud. La valeur est une chaîne JSON, ou un objet qui décrit le noeud en tant que hiérarchie de formes GFX. Le format est le même que le format de sérialisation GFX. Une forme GFX est composée d'un objet avec une propriété shape qui décrit la forme réelle, telle qu'un rectangle, et des propriétés facultatives telles que fill, stroke, transform et font. Un groupe GFX est décrit par un objet avec une propriété children qui contient un tableau de formes enfants.
    Par exemple, le modèle suivant définit le contenu d'un noeud en tant que tableau contenant une forme de rectangle de base :
    [{
          shape: {
             x: 0,
             y: 0,
             width: 110,
             height: 80,
             type: 'rect'
          },
          fill: '#ff',
          stroke: {
             'width': 2
          }
    }]
    Dans la propriété nodeTemplate d'un objet Diagram, vous pouvez spécifier des liaisons afin de définir une propriété d'une forme GFX sur la valeur d'un attribut de l'objet correspondant dans le magasin de données ou sur une propriété d'une instance Node. Par exemple :
    [
       {
          shape: {
             x: 0,
             y: 0,
             width: 150,
             height: 40,
             type: 'rect'
          },
          fill: '#d0d0d0',
          stroke: {
             'width': 2
          }
       }, {
          shape: {
             text: '{{data.Name}}',
             x: '10',
             y: '20',
             type: 'text'
          },
          fill: '{{textColor}}'
       }
    ]
    Dans cet exemple, une deuxième forme de texte est ajoutée. La liaison {{data.Name}} spécifique que le texte de la forme est la valeur de l'attribut Name de l'objet de magasin de données représenté par le noeud. En outre, la valeur de la propriété de forme de texte fill est liées à la propriété textColor de l'instance Node.
    Dans certains cas, la valeur de l'attribut de magasin de données est transformée. Vous pouvez utiliser des filtres avec des fonctions prédéfinies ou personnalisées pour transformer la valeur de liaison initiale en une autre valeur. Par exemple, dans le modèle suivant, la propriété data.Name est transformée en une chaîne de caractères minuscules :
    [...]
          shape: {
             text: '{{data.Name | lowercase}}',
             x: '10',
             y: '20',
             type: 'text'
          }
    Le modèle de noeud peut contenir un nombre quelconque de formes GFX avec un nombre quelconque de liaisons. Il peut également contenir des groupes GFX imbriqués.
    Pour plus d'informations sur les fonctions de liaison avancées, voir Utilisation des modèles et des liaisons.

Définition de plusieurs modèles de noeud

Lorsque le diagramme contient différents types de noeuds, il est utile de définir plusieurs modèles de noeud pour représenter différemment les noeuds.
Pour définir plusieurs modèles de noeud :
  • Utilisez la propriété nodeTemplateFunction du widget Diagram.
    Par exemple, le modèle de noeud suivant renvoie différents modèles en fonction de la propriété de type de l'élément de données :
    <script type="text/javascript">
             function getNodeTemplate(item, store, diagram) {
                switch (store.getValue(item, "type")) {
                   case "startEvent":
                      return startEventTemplate;
                   case "endEvent":
                      return endEventTemplate;
                   case "task":
                      return taskTemplate;
                }
             }
            </script>
    
            <div id="diagram" dojoType='ibm_ilog.diagram.widget.Diagram' nodeTemplateFunction="getNodeTemplate" ...>
            </div>
    Dans cet exemple, les variables startEventTemplate, taskTemplate et endEventTemplate contiennent des modèles différents.

Définition du style de noeud

Pour définir le style de noeud :
  • Utilisez la propriété nodeStyle fournie par le composant Diagram. Cette propriété est définie en tant que dictionnaire de paires propriété-valeur qui définissent les propriétés globales appliquées aux noeuds.
    Par exemple, l'objet de style de noeud suivant spécifie les propriétés borderColor et textColor des noeuds affichés dans le composant Diagram :
    diagram.attr('nodeStyle',{ 
           borderColor:'red', 
           textColor:'blue'
       });
    Si le modèle de noeud définit des liaisons sur les propriétés borderColor et textColor d'un noeud, les propriétés définies dans le style de noeud sont automatiquement appliquées par le modèle.
    Ceci est valide pour chaque propriété du noeud dans la mesure où il existe une méthode d'accès set pour la propriété et où son nom respecte les conventions de dénomination Java. Par exemple, pour une propriété nommée a_property, une méthode d'accès set setAProperty doit exister.
    Le tableau suivant répertorie uniquement les principales propriétés d'apparence Node pouvant être définies avec la propriété nodeStyle :
    Propriété Type Description
    label chaîne
    Définit le libellé du noeud. Le modèle par défaut affiche le libellé du noeud avec une forme de texte alignée dans le centre du noeud.
    backgroundColor string ou dojo.Color
    Couleur d'arrière-plan du noeud. Le modèle par défaut relie cette propriété à la propriété de remplissage de la forme de base du noeud.
    selectedBackgroundColor string ou dojo.Color
    Couleur d'arrière-plan du noeud lorsque le noeud est sélectionné. Le modèle par défaut relie cette propriété à la propriété de remplissage de la forme de base du noeud.
    borderColor string ou dojo.Color
    Couleur du bord du noeud. Le modèle par défaut relie cette propriété à la couleur du trait de la forme de base du noeud.
    textColor string ou dojo.Color
    Couleur du texte du noeud. Le modèle par défaut relie cette propriété à la couleur de remplissage de la forme de texte du noeud.
    selectedTextColor string ou dojo.Color
    Couleur du texte du noeud lorsque le texte est sélectionné. Le modèle par défaut relie cette propriété à la couleur de remplissage de la forme de texte du noeud.

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

Pour définir des noeuds personnalisés
  • Définissez les attributs onNodeCreated ou createNodeFunction du widget Diagram, si les mécanismes décrits dans cette rubrique ne sont pas suffisants pour personnaliser les noeuds.
    L'attribut onNodeCreated est appelé chaque fois qu'un noeud a été créé. Il vous permet de personnaliser le noeud en fonction de vos besoins. La fonction doit être conforme au prototype suivant :
    function nodeCreated(node, diagram){
        // summary: Called after a Node is created by the Diagram widget
        // node: ibm_ilog.diagram.Node: The newly created Node.
        // diagram: ibm_ilog.diagram.widget.Diagram: The Diagram widget
    };
    L'attribut createNodeFunction vous permet de modifier le mode de création d'un noeud. Il est appelé pour créer chaque noeud et doit être conforme au prototype suivant :
    function createNode(item, template, onGraph, diagram){
        // summary: Creates a Node for a given data store item.
        // item: The item contained in the nodesStore.
        // 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 node; // ibm_ilog.diagram.Node
    };
    Le modèle suggéré est celui qui est spécifié par les attributs nodeTemplate ou nodeTemplateFunction. La fonction createNodeFunction peut utiliser un modèle différent.
    Pour créer le noeud personnalisé, la fonction createNodeFunction doit appeler la fonction createTemplatedShape du widget Diagram.
    L'exemple suivant crée une instance de la classe MyNode, laquelle doit être une sous-classe de ibm_ilog.diagram.Node :
    function createNode(item, template, onGraph, diagram){
        return diagram.createTemplatedShape(MyNode, template, onGraph, diagram.nodeStyle, diagram.nodesStore, item);
    };