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 enabsolute
.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.