Définition d'une liaison

Pour définir une liaison dans un modèle, placez le nom de la propriété source de la liaison entre deux accolades {{ }}. Utilisez des apostrophes pour les valeurs de chaîne de la propriété de destination de la liaison.
Par exemple, pour relier la propriété text de la forme de texte à la propriété label du noeud :
shape:{type:'text', text:'{{label}}' }
Pour relier une propriété source avec un type de données numérique que vous souhaitez exprimer comme valeur numérique pour la propriété de destination, vous devez appliquer le paramètre de modèle en tant que propriété d'objet JavaScript. Voir Définition de paramètres en tant que propriétés d'objet JavaScript.

Source d'une liaison

La source d'une liaison peut être :
  • Une propriété de l'objet cible qui suit les conventions dénomination des propriétés Java : pour une propriété 'foo', il doit s'agir d'une méthode getFoo().
    Cette propriété est appelée propriété liable.
  • Propriété publique de l'objet cible.
  • Méthode de l'objet cible. Par exemple, text:'node {{getId}}'.
  • Attribut d'un élément de magasin de données. Voir la section Liaison avec des éléments de magasin de données.
Le moteur de liaison prend en charge des propriétés chaînées au format a.b.c., où la chaîne a.b.c correspond à l'une des sources de liaison prises en charge. Par exemple, la propriété suivante affiche la largeur des limites du noeud :
text:'{{getBounds.width}}'

Liaison avec des éléments de magasin de données

Si vous utilisez le widget Diagram et que vous vous connectez à un magasin de données pour remplir un graphe, vous pouvez définir des liaisons vers des propriétés du magasin de données à l'aide de la propriété data du noeud. Cette propriété définit le contexte de données associé au noeud créé à partir de l'élément de magasin de données. Lorsque vous utilisez la propriété data dans une liaison, elle constitue un raccourci vers l'API de magasin de données sous-jacente et permet d'effectuer des références directes vers des attributs d'élément de données.
Par exemple, un magasin de données de bibliothèque peut être alimenté avec les éléments suivants :
{ 
  author: ..., 
  title: ...,
  ISBN:...
}
Le modèle suivant affiche le titre et l'auteur dans deux formes de texte :
ibm_ilog.diagram.declareTemplate("[
{
  shape: { type:'text',
 text:'{{data.title}}' }
}, {
  shape: { type:'text', text:'{{data.author}}' }
}

]");
Outre les attributs d'élément de données, une liaison de magasin de données peut également faire référence aux méthodes dojo.data.api. Les méthodes prises en charge sont les suivantes :
  • getIdentity
  • getLabel
  • getAttributes
Par exemple, vous pouvez modifier le modèle pour afficher l'identité de l'élément de données au lieu de son titre :
ibm_ilog.diagram.declareTemplate("[
{
  shape: { type:'text',
 text:'{{data.getIdentity}}' }
}, {
  shape: { type:'text', text:'{{data.author}}' }
}

]");
Comme le moteur de liaison est basé sur le langage DTL (Django Template Language), vous pouvez utiliser toutes les fonctionnalités avancées prises en charge par l'implémentation Dojo de DTL. Par exemple, le modèle suivant utilise DTL pour un script de boucle. Il effectue une itération sur une propriété members définie par l'utilisateur (en tant que tableau) pour créer une forme de texte pour élément du tableau. Les formes sont disposées automatiquement en empilement vertical par l'agencement StackLayout.
ibm_ilog.diagram.declareTemplate("{
    layout:{type:'ibm_ilog.diagram.gfxlayout.GridLayout'},
    children:[{
            shape:{ 
                type:'rect', 
                width:1, 
                height:1
            }, 
            fill: '{{backgroundColor}}', 
            stroke: {'color': 'black', 'width': 2 }
        },
        {
            layout:{
                type:'ibm_ilog.diagram.gfxlayout.StackLayout',
                horizontal:false,
                gap:3,
                padding:[5,5,5,5]},
                children:[
                    {% for m in members %}

                        {
                            shape:{
                                type:'text', 
                                text:'{{m}}', 
                                align:'middle'
                            }, 
                            fill:'{{textColor}}', 
                            font:{type:'font', size:'10pt', family:'sans-serif'}
                        }

                    {% if not forloop.last %},{% endif %}

                    {% endfor %}
                ]
        }
    ]
}");

Définition de paramètres en tant que propriétés d'objet JavaScript

Dans les exemples fournis dans la section précédente, tous les paramètres de liaison sont exprimés en tant que chaînes. La syntaxe utilisée pour définir la liaison, {{ ... }}, n'est pas compatible avec JavaScript, ce qui peut donc empêcher l'écriture du modèle en tant qu'objet JavaScript simple.
Cela ne constitue pas un problème lorsque l'expression de liaison est placée entre apostrophes (la variable qui reçoit la liaison attend une chaîne), par exemple, text: '{{label}}'. Cela peut entraîner un blocage lorsque vous voulez qu'un paramètre lié soit autre chose qu'une chaîne, par exemple, x: {{elemWidth}} + 10. Dans ce cas, vous souhaitez généralement transmettre le paramètre elemWidth comme type de données numérique à l'objet cible. Même lorsque vous pouvez exprimer tous les paramètres du modèle en tant que chaînes, cela peut rendre fastidieuse l'écriture des modèles (par exemple, des modèles avec des chaînes sur plusieurs lignes). Cela peut aussi provoquer des erreurs car il peut s'avérer difficile de détecter une erreur de syntaxe dans le modèle proprement dit.
Pour éviter ces problèmes, exprimez les paramètres de modèle sous la forme d'objets JavaScript et utilisez la fonction globale$bind() du moteur de modélisation pour définir les liaisons qui ne peuvent pas être placées entre apostrophes. Par exemple, si les propriétés abscissa et ordinate sont définies sur l'objet auquel le modèle est appliqué et que ces propriétés renvoient un nombre que vous souhaitez utiliser pour placer la forme dans le graphe, la déclaration du modèle peut ressembler à ce qui suit :
var t = ibm_ilog.diagram.declareTemplate({ 
        shape:{
                type:'rect', 
                x: $bind("{{abscissa}}"),
                y: $bind("{{ordinate}}")
        }
});
var node = graph.createNode(t);

Utilisation de la fonction declareTemplate

Tous les modèles peuvent être déclarés à l'aide de la fonction ibm_ilog.diagram.declareTemplate(). Cette fonction facultative traite le modèle pour qu'il soit prêt à être utilisé par le moteur de modélisation lorsque ce modèle est appliqué sur une forme.
Si vous ne déclarez pas le modèle par le biais de la fonction declareTemplate(), il est traité par le moteur de modélisation chaque fois qu'il est appliqué. Cela peut avoir un impact significatif sur les performances lorsque le graphe contient de nombreux noeuds. Cette fonction est applicable à tous les modèles, mais elle doit être utilisée pour les modèles qui définissent des liaisons. Lorsqu'un modèle a été déclaré à l'aide de cette fonction, il ne doit pas être modifié.