A API do layout GFX do Dojo Diagrammer estende a API dojox.gfx. Ela fornece a classe Grupo GFX (e, portanto, a classe Nó)
com a capacidade de organizar automaticamente seus filhos de acordo
com restrições de local e tamanho.
Com esta API estendida, a posição e tamanho dos subcomponentes
Nó não precisam ser codificados permanentemente. O nó adapta automaticamente
seu tamanho ao conteúdo assim que ocorre uma mudança que afeta
o tamanho. Por exemplo, se o rótulo Nó ficar maior, o tamanho do nó
se ajustará ao novo tamanho do rótulo dinamicamente.
Por padrão, a API gfxlayout
não é ativada, embora ela seja usada na maioria das amostras. Para ativá-la,
configure a propriedade useGfxLayout
de djConfig como
true
,
conforme mostrado no código a seguir:<script type="text/javascript"> var djConfig = { parseOnLoad:true, useGfxLayout:true } </scrip>
Organizando os Filhos de um Nó
Quando os filhos de uma instância de Nó são organizados, o filho direto do Nó é normalmente uma instância de Grupo que age como o painel superior para as formas de filhos. Este painel manipula o tamanho e posição dos objetos-filhos
juntamente com o algoritmo de layout de sua opção.
O exemplo a seguir mostra como gravar um modelo para
construir um Nó básico composto de uma forma de plano de fundo e de um rótulo de texto.
Esse modelo é a versão simplificada do modelo de nó padrão.
Suas restrições de layout são configuradas de forma o tamanho do nó sempre se ajuste ao tamanho do rótulo:
{ 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'} } ] }
O modelo primeiro define um Grupo como o filho direto exclusivo. Uma instância da classe GridLayout
é configurada para este grupo. O grupo é composto de dois filhos:
- Uma forma de retângulo que possui seus parâmetros de tamanho configurados como 1 para ajustar-se ao tamanho do rótulo. Contudo, um tamanho mínimo é especificado também, assim, se o tamanho do rótulo for menor, o Nó mantém seu tamanho padrão. O mecanismo de layout usa a propriedade
minimumSize
para controlar o tamanho de uma forma. - Uma forma de texto que está limitada à propriedade do rótulo do nó. A propriedade
margins
é configurada no texto para definir o espaço entre o rótulo e a borda do painel.
A figura a seguir ilustra o resultado e mostra
um tamanho de nó ajustado para o comprimento do rótulo:

O exemplo especifica duas propriedades que incluem algumas restrições
no layout:
minimumSize
e margins
.
Estas são partes de um conjunto de propriedades que podem ser definidas em qualquer forma
e são suportadas por todos os algoritmos de layout:halign
evalign
: os alinhamentos horizontais e verticais.Estas propriedades são usadas para calcular as posições horizontal e vertical da forma no slot do painel.Os valores dehalign
são: esquerda, centro, direita, expansão.Os valores devalign
são: parte superior, centro, parte inferior, expansãoSe o valor for ‘expansão’, a forma preencherá o slot inteiro.margins
: as margens da forma no slot.É o espaço entre os limites do slot e a própria forma. O valor é um número para configurar as margens esquerda, superior, direita e inferior como o mesmo valor, ou uma matriz de quatro números organizados em ordem pelas margens esquerda, superior, direita e inferior.minimumSize
: o tamanho mínimo da forma.maximumSize
: o tamanho máximo da forma.
StackLayout
A classe ibm_ilog.diagram.gfxlayout.StackLayout organiza os filhos de um contêiner em uma pilha
horizontal ou vertical. A orientação é fornecida no tempo de construção
por meio da propriedade
horizontal
. A figura a seguir mostra duas instâncias Grupo com um
StackLayout cuja propriedade
horizontal
está
configurada como false
na primeira instância
e como true
na segunda instância:

A classe StackLayout
define as propriedades
paddingLeft
, paddingRight
, paddingTop
e paddingBottom
para especificar
as margens internas do painel em relação a quais filhos serão posicionados. Uma propriedade global padding
define
o mesmo preenchimento em todas as direções. O espaço entre os filhos
pode ser ajustado usando a propriedade gap
.
A figura a seguir ilustra estas propriedades:
Um layout de pilha horizontal alinha os objetos-filhos verticalmente
no slot de layout calculado de acordo com o valor de suas propriedades
valign
e margins
. Um layout de pilha vertical alinha os objetos-filhos horizontalmente
no slot de layout calculado de acordo com o valor de suas propriedades halign
e margins
. A imagem a seguir mostra como os valores de alinhamento horizontal e vertical
são usados pelo layout para posicionar as formas no contêiner:

O código de modelo a seguir cria a pilha horizontal
ilustrada na 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
A classe ibm_ilog.diagram.gfxlayout.GridLayout organiza os filhos de um contêiner como elementos
da grade.
A estrutura de layout da grade é definida por uma coleção
de objetos do descritor de colunas e de linhas que especificam como a métrica
de cada linha ou coluna é calculada. Estes objetos do descritor suportam
as seguintes propriedades:
width
eheight
: se a largura ou altura do contêiner não for fixa, a largura da coluna ou a altura da linha dependerá do valor desta propriedade. Um valor de -1 ajusta as dimensões ao máximo de dimensões-filhas.weight
: se a largura ou altura do contêiner for fixa, esta propriedade definirá como será distribuído entre as colunas ou linhas o espaço que permanece após todas as larguras ou alturas fixas terem sido subtraídas da largura ou altura do contêiner. Por exemplo, uma coluna com um peso de 2 tem o dobro do espaço de uma coluna com um peso de 1 e a mesma largura fixa. Uma linha com um peso de 2 tem o dobro do espaço de uma linha com um peso de 1 e a mesma altura fixa.
Considere a seguinte estrutura de grade:
cols:[{ width:250}, {weight:2}, {weight:1}, {weight:2} ], rows:[{ height:90}, {height:-1}]
O painel inteiro tem uma largura fixa de 600. A primeira coluna
é configurada como 250 pixels e as outras colunas compartilham o espaço restante
com a seguinte restrição: a largura da segunda e quarta colunas
é configurada para ser o dobro da largura da terceira coluna.
Se o painel de altura for configurado como -1, o painel será adaptado
ao tamanho de seus filhos. Neste exemplo, a primeira linha possui uma altura
fixa de 90 e a segunda linha ajusta a altura máxima da forma
nesta linha. A figura a seguir ilustra esta estrutura de grade:

A classe GridLayout
define as propriedades
paddingLeft
, paddingRight
, paddingTop
e paddingBottom
para especificar
as margens internas do painel em relação a quais filhos serão posicionados. Uma propriedade global padding
define
o mesmo preenchimento em todas as direções. Este preenchimento é incluído nas margens específicas
que estão definidas para cada forma. A figura a seguir mostra
os relacionamentos entre estas propriedades:
Os filhos na grade são posicionados nas células da grade
de acordo com as propriedades
column
e row
dos filhos. Quando estas propriedades não forem especificadas para uma forma,
a forma será automaticamente posicionada na grade de acordo com sua ordem
na lista de filhos do contêiner. A direção do posicionamento
é definida por meio da propriedade horizontalFlow
que
é true por padrão. Se a propriedade
horizontalFlow
for
true e os filhos não definirem nenhum índice de linha ou coluna
específico, o primeiro filho será posicionado na célula (0,0), o segundo
na célula (1,0) e assim por diante.Um filho pode se estender por várias linhas ou colunas, dependendo
de suas propriedades
colspan
ou rowspan
.
Estas propriedades indicam o número de colunas ou linhas que o filho deve sobrepor. Um valor de -1 para as propriedades
colspan
ou rowspan
significa que o filho deve se estender por todas as colunas ou linhas remanescentes.
Na figura a seguir, uma forma na célula (0,0) é configurada para se estender em duas colunas (sua propriedade colspan
está configurada como 2). Outra forma na célula (2,0) está configurada para se estender verticalmente por todas as linhas remanescentes (sua propriedade rowspan
está configurada como -1).