Usando Widgets Dijit em Nós e Links

É possível usar widgets Dijit nos nós e links de um diagrama. Por exemplo, um nó pode conter um widget Botão no qual o usuário clica para executar uma função associada ao nó. Este recurso está disponível no Dojo Diagrammer por meio da forma GfxWidget.

A Forma GfxWidget

O objeto GfxWidget é uma forma GFX especial na biblioteca do Dojo Diagrammer que controla a criação e o posicionamento de um widget Dijit na parte superior de um nó ou um link em um diagrama. Este objeto faz o widget parecer como se estivesse contido no nó ou link. Como é uma forma GFX, ele pode ser usado como outras formas (retângulo, texto, etc.) em qualquer modelo de nó ou link.
O formato GfxWidget é instanciado pela classe ibm_ilog.diagram.gfxwidget.GfxWidget.

Usando um GfxWidget em um Modelo de Nó

O exemplo a seguir define um modelo de nó que contém um widget Botão:
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'"+*
*"    }"+*
*"} ]";
A forma GfxWidget é identificada no modelo pela propriedade type: 'widget'. O tipo do widget é definido pela propriedade dojoType do objeto shape. As propriedades x e y especificam a posição do widget no nó. As demais propriedades definidas no objeto de forma são transmitidas para o widget por meio de uma chamada attr(). Este exemplo define o atributo label do botão e o retorno de chamada onClick.
Em vez de especificar o tipo de widget usando a propriedade dojoType, é possível especificar uma propriedade createFunction como no seguinte exemplo:
"{"+
"    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;
   };
A função usa um único parâmetro que é a forma GFX. Esta alternativa permite criar widgets complexos e inicializar seu armazenamento de dados.

Usando um GfxWidget em um Modelo de Link

É possível usar uma forma GfxWidget em um modelo de link, como no exemplo a seguir, em que é fornecida uma decoração no caminho do link:
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}}'"+
"    }"+
"}]";
A propriedade isDecoration na forma do widget faz o widget ser posicionado automaticamente no caminho do link. Consulte a descrição do objeto Link para obter detalhes adicionais.

Limitações

Os widgets criados e gerenciados pelos formatos GfxWidget estão contidos na superfície do GFX que é usado para renderizar o diagrama. Eles estão superpostos na superfície. Eles são movidos automaticamente para ajustar a posição do nó ou a forma do link.
As seguintes limitações estão implícitas:
  • A ordenação Z nem sempre pode ser totalmente observada. Por exemplo, se o nó A estiver na parte superior do nó B, um widget que está contido no B não é ocultado pelo nó A.
  • Os widgets não recebem zoom de acordo com o nível de zoom do gráfico. Eles são movidos apenas para novas posições de visibilidade com base no nível de zoom.
  • Se a forma for usada fora de um widget Diagrama, o elemento HTML que contém a superfície GFX deverá ter seu estilo position configurado como absolute.
    No momento, as formas GfxWidget não funcionam corretamente quando um layout GFX é usado no modelo de nó. Por isso, os widgets devem ser posicionados explicitamente nas posições x e y absolutas no nó.