Définition de l'emplacement d'un noeud et d'autres propriétés graphiques

L'emplacement d'un noeud est généralement déterminé par les informations d'un élément de magasin de données. Le positionnement est effectué implicitement à l'aide d'un agencement prédéfini avec l'utilisation d'une liaison de données dans un modèle, ou plus directement dans JavaScript, lorsque le noeud est créé. Si les positions x et y sont extraites directement d'un élément de magasin de données, utilisez les propriétés xBinding et yBinding pour spécifier les attributs de magasin de données qui définissent les positions x et y lorsque le noeud ou le sous-graphe est créé. Dans des magasins de données modifiables, ces informations sont également utilisées pour conserver les valeurs lorsque celles-ci sont modifiées.
<div id="diagram" dojoType='ibm_ilog.diagram.widget.Diagram' xBinding="xpos" yBinding="ypos"  ...>
</div>

Définition de l'emplacement d'un noeud

Pour spécifier une position au centre d'un noeud :
  • Utilisez l'attribut centerOnLocation.
    Dans des situations plus complexes, une fonction unique peut être définie pour les valeurs de lecture et d'écriture.
    <script type="text/javascript">
    var persistX = function(nodesStore, item, value){
      var retVal;
      if (value) {
        retVal = nodesStore.setValue(item, "xpos", value);
      }
      else {
        retVal = nodesStore.getValue(item, "xpos");
      }
      return retVal;
    };
    </script>
    <div id="diagram" dojoType='ibm_ilog.diagram.widget.Diagram' xBinding="persistX" ...>
    </div>

Définition des propriétés graphiques de noeuds et de liens

Pour définir des propriétés graphiques générales de noeuds et de liens :
  • Utilisez nodesGraphBinding ou linksGraphBinding pour spécifier un attribut de magasin de données que vous pouvez utiliser pour conserver une liste de propriétés graphiques.
    <div id="diagram" dojoType='ibm_ilog.diagram.widget.Diagram' nodeGraphBinding="gfxNodeData" nodesGraphProperties="backgroundColor,textColor"  ...>
    </div>
    Une fonction unique peut être définie pour une propriété graphique de lecture et d'écriture.
    <script type="text/javascript">
    var persistNodeProps = function(nodesStore, item, value){
      var retVal;
      if (value) {
         var jvalue = dojo.toJson(value);
         retVal = nodesStore.setValue(item, "gfxNodeData", jvalue);
      }
      else {
          var retValj = nodesStore.getValue(item, "gfxNodeData");
          retVal = dojo.fromJson(retValj);
      }
      return retVal;
    };
    </script>
    <div id="diagram" dojoType='ibm_ilog.diagram.widget.Diagram' nodesGraphBinding="persistNodeProps" nodesGraphProperties="bounds,backgroundColor,textColor" ...>
    </div>
    La valeur transmise à la fonction peut être un objet JavaScript complexe, comme l'objet suivant :
    {
      "backgroundColor": "#FFFFFF",
      "textColor": "#000000",
      "bounds": {"x": "320", "y": "140", "width": "120", "height": "80"}
    }