La API de diseño GFX de Dojo Diagrammer amplía la API
dojox.gfx. Proporciona la clase GFX Group (y, por consiguiente, la
clase Node) que tiene la capacidad de ordenar automáticamente los
hijos según las restricciones de ubicación y de tamaño.
Con esta API ampliada, no hace falta definir
directamente en el código la posición y tamaño de los subcomponentes
del nodo. El nodo adapta automáticamente su tamaño al contenido tan
pronto como se produce un cambio que afecte al tamaño. Por ejemplo,
si la etiqueta del nodo aumenta de longitud, el tamaño del nodo se
ajusta dinámicamente al nuevo tamaño de la etiqueta.
De forma predeterminada, la API
gfxlayout no está
habilitada, aunque se utiliza en la mayoría de los ejemplos. Para
habilitarla, establezca la propiedad
useGfxLayout de
djConfig en
true
tal como se muestra en el
código siguiente: <script type="text/javascript"> var djConfig = { parseOnLoad:true, useGfxLayout:true } </scrip>
Disposición de los hijos de un nodo
Cuando se disponen los hijos de una instancia de nodo,
el hijo directo del nodo normalmente es una instancia de grupo que
actúa como el panel superior de las formas hijo. Este panel maneja el
tamaño y la posición de los objetos hijo junto con el algoritmo de
diseño de su elección.
En el ejemplo siguiente se muestra cómo escribir una
plantilla para crear un nodo básico compuesto de una forma en segundo
plano y una etiqueta de texto. Esta plantilla es una versión
simplificada de la plantilla de nodos predeterminada. Sus
restricciones de diseño se establecen de forma que el tamaño del nodo
siempre se ajuste al tamaño de la etiqueta:
{ layout: { type:'ibm_ilog.diagram.gfxlayout.GridLayout' }, children: [ { dojoAttachPoint: 'baseShape', minimumSize:{width:80, height:40}, shape: { width:1, height:1, r: 5, type:'rect'}, fill: '{{backgroundColor}}', stroke: {'color': '{{borderColor}}', 'width': 2 } }, { dojoAttachPoint: 'textShape', margins:[5,5,5,-2], shape: {type:'text', text:'{{label}}', align:'middle'}, fill:'{{textColor}}', font:{type:'font', size:'10pt', family:'sans-serif'} } ] }
En primer lugar, la plantilla define un grupo como el
hijo directo exclusivo. Para este grupo se establece una instancia de
la clase GridLayout. El
grupo se compone de dos hijos:
- Una forma de rectángulo cuyos parámetros de tamaño están establecidos en 1 para ajustarse al tamaño de la etiqueta. Sin embargo, también se especifica un tamaño mínimo de forma que, si el tamaño de la etiqueta es más pequeño, el nodo mantendrá su tamaño predeterminado. El motor de diseño utiliza la propiedad
minimumSize
para controlar el tamaño de una forma. - Una forma de texto vinculada a la propiedad de la etiqueta del nodo. La propiedad
margins
se establece en el texto para definir el espacio entre la etiqueta y el borde del panel.
En la siguiente figura se puede ver el resultado y se
muestra cómo se ha ajustado el tamaño de un nodo para adecuarse a la
longitud de la etiqueta:

El ejemplo especifica dos propiedades que añaden algunas
restricciones al diseño:
minimumSize
y
margins
. Estas son parte de un
conjunto de propiedades que se pueden definir en cualquier forma y
que admiten todos los algoritmos de diseño: halign
yvalign
: la alineación horizontal y vertical.Estas propiedades se utilizan para calcular las posiciones horizontal y vertical de la forma dentro de la ranura del panel.Los valores dehalign
son: left (izquierda), center (centro), right (derecha) y stretch (extender).Los valores devalign
son: top (superior), center (centro), bottom (inferior) y stretch (extender).Si el valor es ‘stretch’, la forma llena toda la ranura.margins
: los márgenes de la forma dentro de la ranura.Es el espacio entre los límites de la ranura y la forma en sí. El valor puede ser un número para establecer los márgenes izquierdo, superior, derecho e inferior en el mismo valor, o una matriz de cuatro números correspondientes a los márgenes izquierdo, superior, derecho e inferior.minimumSize
: el tamaño mínimo de la forma.maximumSize
: el tamaño máximo de la forma.
StackLayout
La clase
ibm_ilog.diagram.gfxlayout.StackLayout ordena los hijos de un contenedor en una pila
horizontal o vertical. La orientación se determina en el momento de
la construcción mediante la propiedad
horizontal
. En la figura siguiente se muestran dos instancias de
grupo con un StackLayout cuya propiedad
horizontal
se establece en
false
en la primera instancia
y en true
en la segunda
instancia: 

La clase
StackLayout define las
propiedades
paddingLeft
,
paddingRight
,
paddingTop
y
paddingBottom
para especificar
los márgenes internos del panel relativos a las posiciones de los
hijos. La propiedad global
padding
define el mismo
relleno en todas las direcciones. El espacio entre los hijos se puede
ajustar utilizando la propiedad
gap
.
En la figura siguiente se ilustran estas propiedades: 
Un diseño de pila horizontal alinea los objetos hijo
verticalmente en la ranura de diseño calculada según el valor de sus
propiedades
valign
y
margins
. Un diseño de pila
vertical alinea los objetos hijo horizontalmente en la ranura de
diseño calculada según el valor de sus propiedades
halign
y
margins
. En la imagen siguiente se muestra cómo el diseño utiliza
los valores de alineación horizontal y vertical para situar las
formas en el contenedor:

El código de plantilla siguiente crea la pila horizontal
que se muestra en la figura:
{ layout:{ horizontal:true, gap:10, padding:[5,5,5,5]}, children:[ { valign:'center', shape:{x:0, y:0, width:60, height:40, r:5, type:'rect'}, fill: '{{backgroundColor}}', stroke: {'color': '{{borderColor}}', 'width': 2 }}, { valign:'stretch', shape:{x:0, y:0, width:110, height:65, r:5, type:'rect'}, fill: '{{backgroundColor}}', stroke: {'color': '{{borderColor}}', 'width': 2 }}, { valign:'bottom', shape:{x:0, y:0, width:40, height:40, r:5, type:'rect'}, fill: '{{backgroundColor}}', stroke: {'color': '{{borderColor}}', 'width': 2 }}, { valign:'top', shape:{x:0, y:0, width:80, height:20, r:5, type:'rect'}, fill: '{{backgroundColor}}', stroke: {'color': '{{borderColor}}', 'width': 2 }}, ]}
GridLayout
La clase
ibm_ilog.diagram.gfxlayout.GridLayout ordena los hijos de un contenedor como elementos de
una cuadrícula.
La estructura del diseño de cuadrícula se define por una
colección de objetos descriptor de columna y fila que especifican
cómo se calcula la métrica de cada fila o columna. Estos objetos
descriptor admiten las propiedades siguientes:
width
yheight
: si la anchura o la altura del contenedor no son valores fijos, el ancho de la columna o el alto de la fila dependen del valor de esta propiedad. El valor -1 ajusta las dimensiones a las dimensiones máximas del hijo.weight
: si la anchura o la altura del contenedor es fija, esta propiedad define la forma en que se distribuye entre las columnas o filas el espacio que queda después de haber restado todas las anchuras o alturas fijas de la anchura o altura del contenedor. Por ejemplo, una columna con un peso de 2 tiene el doble de espacio que una columna con un peso de 1 y la misma anchura fija. Una fila con un peso de 2 tiene el doble de espacio que una fila con un peso de 1 y la misma altura fija.
Supongamos la siguiente estructura de cuadrícula:
cols:[{ width:250}, {weight:2}, {weight:1}, {weight:2} ], rows:[{ height:90}, {height:-1}]
Todo el panel tiene una anchura fija de 600. El ancho de
la primera columna se establece en 250 píxeles y el resto de columnas
comparten el espacio restante con la siguiente restricción: el ancho
de la segunda y la cuarta columnas se ha establecido como el doble
del ancho de la tercera columna.
Si la altura del panel es establece en -1, el panel se
adapta al tamaño de sus hijos. En este ejemplo, la primera fila tiene
una altura fija de 90 y la segunda fila se ajusta a la altura máxima
de la forma de esta fila. En la figura siguiente se muestra la
estructura de esta cuadrícula:

La clase
GridLayout define las
propiedades
paddingLeft
,
paddingRight
,
paddingTop
y
paddingBottom
para especificar
los márgenes internos del panel relativos a las posiciones de los
hijos. La propiedad global
padding
define el mismo
relleno en todas las direcciones. Este relleno se añade a los
márgenes definidos para cada forma. En la figura siguiente se
muestran las relaciones entre estas propiedades: 
Los hijos de la cuadrícula se colocan en las celdas de
la cuadrícula según las propiedades
column
y
row
de los hijos. Si no se
especifican estas propiedades para una forma, ésta se coloca
automáticamente en la cuadrícula de acuerdo con su orden en la lista
de hijos del contenedor. La dirección de la ubicación se define
mediante la propiedad
horizontalFlow
que es true de
forma predeterminada. Si la propiedad
horizontalFlow
es true y los
hijos no definen ningún índice de fila o de columna, el primer hijo
se coloca en la celda (0,0), el segundo en la celda (1,0), etc. Un hijo puede abarcar varias filas o columnas en función
de las propiedades
colspan
o
rowspan
.
Estas propiedades indican el número de columnas o filas que el hijo
debe solapar. Un valor de -1 para las propiedades
colspan
o
rowspan
significa que el hijo
debe abarcar todas las columnas o filas restantes. En la figura
siguiente, se ha configurado una forma de la celda (0,0) para que
abarque dos columnas (su propiedad
colspan
se establece en 2).
Otra forma de la celda (2,0) se ha configurado para que abarque
verticalmente todas las filas restantes (su propiedad
rowspan
se establece en -1). 