Utilización de widgets Dijit en nodos y enlaces

Puede utilizar los widgets Dijit dentro de los nodos y los enlaces de un diagrama. Por ejemplo, un nodo puede contener un widget Button que el usuario puede pulsar para ejecutar una función asociada con el nodo. Esta característica está disponible en Dojo Diagrammer a través de la forma GfxWidget.

Forma GfxWidget

El objeto GfxWidget es una forma de GFX especial de la biblioteca Dojo Diagrammer que controla la creación y la colocación de un widget Dijit encima de un nodo o un enlace en un diagrama. Este objeto hace que el widget aparezca como si lo contuviera el nodo o el enlace. Puesto que es una forma GFX, puede utilizarse como otras formas (rectángulo, texto, etcétera) en cualquier plantilla de nodos o de enlaces.
La clase ibm_ilog.diagram.gfxwidget.GfxWidget crea la instancia de la forma GfxWidget.

Utilización de un objeto GfxWidget en una plantilla de nodos

En el ejemplo siguiente se define una plantilla de nodos que contiene un 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 forma GfxWidget se identifica en la plantilla gracias a la propiedad type: 'widget'. El tipo del widget se define mediante la propiedad dojoType del objeto shape. Las propiedades x y y especifican la posición del widget en el nodo. Las demás propiedades definidas en el objeto de forma se le pasan al widget mediante una llamada a attr(). En este ejemplo se define el atributo label del botón y la respuesta onClick.
En lugar de especificar el tipo de widget utilizando la propiedad dojoType, puede especificar una propiedad createFunction, como en el ejemplo siguiente:
"{"+
"    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 función tiene un único parámetro que es la forma GFX. Esta alternativa le permite crear widgets complejos e inicializar su almacén de datos.

Utilización de un objeto GfxWidget en una plantilla de enlaces

Puede utilizar una forma GfxWidget en una plantilla de enlaces, como en el ejemplo siguiente, donde se proporciona una decoración en la vía de enlace:
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 propiedad isDecoration en la forma del widget hace que el widget se ponga automáticamente en la vía de enlace. Consulte la descripción del objeto Link para obtener más detalles.

Limitaciones

Los widgets creados y gestionados por las formas GfxWidget no figuran en la superficie GFX que se utiliza para representar el diagrama. Se superponen en la superficie. Se mueven automáticamente para ajustarse a la posición del nodo o la forma del enlace.
Las limitaciones siguientes están implícitas:
  • No siempre puede seguirse el orden Z. Por ejemplo, si el nodo A está encima del nodo B, a widget que contenga el nodo B no quedará oculto por el nodo A.
  • El tamaño de los widgets no se muestran con arreglo al nivel de zoom del gráfico. Sólo se moverán a posiciones nuevas de visibilidad en función del nivel de zoom.
  • Si la forma se utiliza fuera de un widget Diagram, el elemento HTML que contiene la superficie GFX debe tener su estilo position establecido en absolute.
    Actualmente, las formas GfxWidget no funcionan correctamente si se utiliza un diseño GFX en la plantilla de nodos. Por ello, los widgets deben incluir explícitamente posiciones x e y absolutas en el nodo.