Diseño GFX

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:
Figura
que muestra dos nodos rectangulares, uno en la parte superior
izquierda de la figura y el otro en la parte inferior derecha. Ambos
nodos tienen un fondo azul. El nodo de la parte superior izquierda
tiene la etiqueta Nodo 1 y el nodo de la parte inferior derecha tiene
la etiqueta Al nodo nuevo se le suma 1. El tamaño de cada forma se
ajusta a la longitud de su 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 y valign: 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 de halign son: left (izquierda), center (centro), right (derecha) y stretch (extender).
    Los valores de valign 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:
Figura
que muestra un grupo de cuatro formas rectangulares de la misma
longitud pero de alturas diferentes. Las formas están alineadas
verticalmente con un espacio entre cada una. (La propiedad horizontal
del diseño de pila se ha establecido en false).
Figura
que muestra un grupo de cuatro formas rectangulares de la misma altura
pero de longitudes diferentes. Las formas están alineadas
horizontalmente con un espacio entre cada una. (La propiedad
horizontal del diseño de pila se ha establecido en
true).
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:
Figura
que muestra tres formas rectangulares apiladas verticalmente. En la
figura se ilustra el espacio entre las formas así como el relleno de
la parte izquierda, derecha, superior e inferior relativo al panel
que contiene este grupo de formas.
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:
Figura
que muestra un diseño de pila vertical y un diseño de pila
horizontal. El diseño de pila vertical tiene apiladas cuatro formas
rectangulares de distintos tamaños. Cada forma tiene una etiqueta:
center (la forma se centra horizontalmente en el panel del
contenedor), stretch (la forma se alinea horizontalmente respecto a
los márgenes derecho e izquierdo del panel contenedor), left (la
forma se alinea horizontalmente a la izquierda del panel del
contenedor), center (la forma se centra horizontalmente en el panel
del contenedor). En la parte superior de este diseño de pila
vertical, se muestra el título ‘propiedad halign’. El diseño de pila
horizontal muestra cuatro formas rectangulares de distintos tamaños
juntas. Cada forma tiene una etiqueta: center (la forma se centra
verticalmente en el panel del contenedor), stretch (la forma se
alinea verticalmente respecto a los márgenes superior e inferior del
panel contenedor), bottom (la forma se alinea verticalmente respecto
a la parte inferior del panel del contenedor), top (la forma se
alinea verticalmente respecto a la parte superior de la forma del
contenedor). En la parte superior de este diseño de pila horizontal,
se muestra el título ‘propiedad valign’.
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 y height: 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:
Ilustración
de la estructura de cuadrícula descrita
anteriormente.
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:
Ilustración
del relleno de un diseño de cuadrícula que contiene cuatro formas
cuadradas de distintos tamaños. Hay algún relleno en la parte
superior, en la parte inferior, a la izquierda y a la derecha del
contenedor de la cuadrícula. Hay márgenes entre las formas del
contenedor de la cuadrícula.
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).
Ilustración
de la extensión de la cuadrícula descrita
anteriormente.