Utilisation des widgets Dijit dans des noeuds et des liens

Vous pouvez utiliser des widgets Dijit à l'intérieur des noeuds et des liens d'un diagramme. Par exemple, un noeud peut contenir un widget de bouton (Button) sur lequel lequel l'utilisateur clique pour exécuter une fonction associée au noeud. Cette fonction est disponible dans Dojo Diagrammer par le biais de la forme GfxWidget.

Forme GfxWidget

L'objet GfxWidget est une forme GFX spéciale de la bibliothèque Dojo Diagrammer qui contrôle la création et le positionnement d'un widget Dijit en haut d'un noeud ou d'un lien dans un diagramme. Cet objet fait apparaître le widget comme s'il était contenu dans le noeud ou le lien. Comme il s'agit d'une forme GFX, celle-ci peut être utilisée comme toutes les autres formes (rectangle, texte, etc.) dans tout modèle de noeud ou de lien.
La forme GfxWidget est instanciée par la classe ibm_ilog.diagram.gfxwidget.GfxWidget.

Utilisation d'une forme GfxWidget dans un modèle de noeud

L'exemple suivant définit un modèle de noeud qui contient le widget Button :
nodeTemplate = "[{"+
"    dojoAttachPoint: 'baseShape',"+
"    shape: {"+
"        x: 0,"+
"        y: 0,"+
"        width: 90,"+
"        height: 40,"+
"        r: 5,"+
"        type: 'rect'"+
"    },"+
"    fill: '{{backgroundColor}}',"+
"    stroke: {"+
"        'color': '{{borderColor}}',"+
"        'width': 2"+
"    },"+
"    selectedStyle: {"+
"        fill: '{{selectedBackgroundColor}}'"+
"    }"+
"}, {"+*
*"    dojoAttachPoint: 'button',"+*
*"    shape: {"+*
*"        type: 'widget',"+*
*"        x: 8,"+*
*"        y: 5,"+*
*"        dojoType: 'dijit.form.Button',"+*
*"        onClick: hello,"+*
*"        label: 'Click me'"+*
*"    }"+*
*"} ]";
La forme GfxWidget est identifiée dans le modèle par la propriété type: 'widget'. Le type du widget est défini par la propriété dojoType de l'objet shape. Les propriétés x et y spécifient la position du widget dans le noeud. Toutes les autres propriétés définies dans l'objet shape (forme) sont transmises via un appel attr(). Cet exemple définit l'attribut label du bouton et le rappel onClick.
Au lieu de spécifier le type de widget à l'aide de la propriété dojoType, vous pouvez indiquer la propriété createFunction comme dans l'exemple suivant :
"{"+
"    dojoAttachPoint: 'button',"+
"    shape: {"+
"        type: 'widget',"+
"        x: 8,"+
"        y: 8,"+
"        createWidget: createCombo"+
"    }"+
"}"
...
   createCombo = function(shape){
          var colors = {
                label: 'name',
                items: [ { name: 'red' }, { name: 'green' }, { name: 'blue' } ]
              };
     var store = new dojo.data.ItemFileReadStore({data: colors});
     var combo = new dijit.form.ComboBox({store: store});
     return combo;
   };
La fonction extrait un paramètre unique qui est la forme GFX. Vous pouvez également créer des widgets complexes et initialiser leurs magasins de données.

Utilisation d'une forme GfxWidget dans un modèle de lien

Vous pouvez utiliser une forme GfxWidget dans un modèle de lien, comme dans l'exemple suivant où celle-ci fournit une décoration sur le chemin du lien :
linkTemplate = "[{"+
"    dojoAttachPoint: '_path',"+
"    shape: {"+
"        type: 'polyline',"+
"        points: [{"+
"            x: 0,"+
"            y: 0"+
"        }, {"+
"            x: 100,"+
"            y: 0"+
"        }]"+
"    },"+
"    stroke: {"+
"       width: {{strokeWidth}}," +
"        color: '{{strokeColor}}'" +
"    },"+
"    selectedStyle: {"+
"        stroke: {"+
"          width: {{selectedStrokeWidth}},"+
"            color: '{{selectedStrokeColor}}'"+
"        }"+
"    }"+
"}, {"+
"    isDecoration: true,"+
"    shape: {"+
"        type: 'widget',"+
"        dojoType: 'dijit.form.Button',"+
"        label: 'X',"+
"        onClick: linkClicked"+
"    }"+
"}, {"+
"    dojoAttachPoint: '_endArrow',"+
"    shape: {"+
"        type: 'polyline',"+
"        points: [{"+
"            x: -8,"+
"            y: 4"+
"        }, {"+
"            x: 0,"+
"            y: 0"+
"        }, {"+
"            x: -8,"+
"            y: -4"+
"        }]"+
"    },"+
"    fill: '{{strokeColor}}',"+
"    selectedStyle: {"+
"        fill: '{{selectedStrokeColor}}'"+
"    }"+
"}]";
La propriété isDecoration du widget de forme fait que le widget est placé automatiquement sur le chemin du lien. Pour plus d'informations, voir la description de l'objet Link.

Limitations

Les widgets créés et gérés par les formes GfxWidget ne sont pas contenus dans la surface GFX utilisée pour restituer le diagramme. Ils sont superposés sur la surface. Ils sont déplacés automatiquement pour s'adapter à la position du noeud ou à la forme du lien.
Les limitations suivantes sont implicites :
  • L'ordre-Z risque ne peut pas être complètement respecté. Par exemple, si le noeud A est au-dessus du noeud B, un widget contenu dans B n'est pas masqué par le noeud A.
  • Les zooms effectués sur les widgets ne se font pas selon le niveau de zoom du graphe. Les widgets sont uniquement déplacés vers de nouvelles positions de visibilité en fonction du niveau de zoom.
  • Si la forme est utilisée en dehors d'un widget de diagramme, l'élément HTML qui contient la surface GFX doit avoir son style position défini sur absolute.
    Actuellement, les formes GfxWidget ne fonctionnent pas correctement lorsqu'un agencement GFX est utilisé dans un modèle de noeud. De ce fait, les widgets doivent être placés explicitement à des positions x et y absolues du noeud.