É 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 comoabsolute
.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ó.