Para definir uma ligação em um modelo, coloque o nome da propriedade de origem de ligação
entre chaves duplas {{ }}. Set it in quotation
marks for string values of the binding destination property.
Por exemplo, para ligar a propriedade
text
da forma de texto à propriedade label
do nó:shape:{type:'text', text:'{{label}}' }
Para ligar uma propriedade de origem a um tipo de dado numérico que você deseja
expressar como um valor numérico para a propriedade de destino,
você deve aplicar o parâmetro de modelo como uma propriedade de objeto JavaScript.
Consulte o Definindo Parâmetros como Propriedades de Objetos JavaScript.
Origem de Ligação
A origem de uma ligação pode ser:
- Uma propriedade do objeto de destino que segue as convenções de nomenclatura da propriedade Java: para uma propriedade 'foo', deve haver um método getFoo().This property is called a bindable property.
- Uma propriedade pública do objeto de destino.
- Um método do objeto de destino. Por exemplo, text:'node {{getId}}'.
- Um atributo de um item de armazenamento de dados. Consulte a seção Ligação com Itens de Armazenamento de Dados.
The binding engine supports chained properties in the
form
a.b.c.
where a, b, and c corresponds
to one of the supported binding sources. Por exemplo, a seguinte propriedade
exibe a largura dos limites do nó:text:'{{getBounds.width}}'
Ligação com Itens de Armazenamento de Dados
Se você usar o widget Diagrama e conectar-se a um armazenamento de dados
para preencher um gráfico, será possível definir ligações com propriedades
de itens de armazenamento de dados por meio da propriedade
data
do nó. Esta propriedade define o contexto de dados associado a um nó
que foi criado a partir de um item de armazenamento de dados. Ao usar a propriedade data
em uma ligação, é um atalho para a API de armazenamento de dados subjacente e permite
referências diretas a atributos do item de dados. Por exemplo, um armazenamento de dados de biblioteca pode ser
preenchido com os seguintes itens:
{ author: ..., title: ..., ISBN:... }
O modelo a seguir exibe o título e autor
em duas formas de texto:
ibm_ilog.diagram.declareTemplate("[ { shape: { type:'text', text:'{{data.title}}' } }, { shape: { type:'text', text:'{{data.author}}' } } ]");
Além dos atributos do item de dados, uma ligação de armazenamento de dados
também pode fazer referência a métodos do dojo.data.api.
Os métodos suportados são:
- getIdentity
- getLabel
- getAttributes
Por exemplo, é possível alterar o modelo para exibir
a identidade do item de dados em vez de seu título:
ibm_ilog.diagram.declareTemplate("[ { shape: { type:'text', text:'{{data.getIdentity}}' } }, { shape: { type:'text', text:'{{data.author}}' } } ]");
Como o mecanismo de ligação é baseado no Django Template
Language (DTL), é possível usar todos os recursos avançados suportados pela implementação
de DTL do Dojo. Por exemplo, o modelo a seguir
usa DTL para um script de loop. Ele itera sobre uma propriedade members
definida pelo usuário (definida como uma matriz) para criar uma forma de Texto para cada item
na matriz. As formas são organizadas automaticamente em uma pilha vertical pelo
layout StackLayout.
ibm_ilog.diagram.declareTemplate("{ layout:{type:'ibm_ilog.diagram.gfxlayout.GridLayout'}, children:[{ shape:{ type:'rect', width:1, height:1 }, fill: '{{backgroundColor}}', stroke: {'color': 'black', 'width': 2 } }, { layout:{ type:'ibm_ilog.diagram.gfxlayout.StackLayout', horizontal:false, gap:3, padding:[5,5,5,5]}, children:[ {% for m in members %} { shape:{ type:'text', text:'{{m}}', align:'middle' }, fill:'{{textColor}}', font:{type:'font', size:'10pt', family:'sans-serif'} } {% if not forloop.last %},{% endif %} {% endfor %} ] } ] }");
Definindo Parâmetros como Propriedades de Objetos JavaScript
Nos exemplos especificados na seção anterior, todos os parâmetros
de ligação são expressos como sequências. The syntax used to define
the binding,
{{ ... }}
, is not compliant
with JavaScript, and therefore can prevent the template from being
written as a plain JavaScript object. It is not an issue when the binding expression is quoted,
that is, when the variable that receives the binding expects a string,
for example,
text: '{{label}}'
. Isto se torna um problema de bloqueio quando você deseja que um parâmetro ligado seja
algo diferente de uma sequência, por exemplo, x: {{elemWidth}} + 10
.
Aqui, geralmente você deseja transmitir o parâmetro elemWidth
como um tipo de dado numérico para o objeto de destino. Even when you can express
all the template parameters as strings, it can make writing complex
templates cumbersome (for example, templates with multiline strings).
Isto também está sujeito a erros, porque um erro de sintaxe no próprio modelo
pode ser difícil de ser detectado. Para evitar estes problemas, expresse os parâmetros de modelo
como objetos JavaScript e use a função global $bind()
do mecanismo de modelagem para definir as ligações que não podem ser colocadas entre aspas. For example, if
abscissa
and ordinate
properties
are defined on the object to which the template is applied and these
properties return a number that you want to use to place the shape
in the graph, the template declaration might look like the following
example:var t = ibm_ilog.diagram.declareTemplate({ shape:{ type:'rect', x: $bind("{{abscissa}}"), y: $bind("{{ordinate}}") } }); var node = graph.createNode(t);
Usando a Função declareTemplate
Todos os modelos podem ser declarados usando a função ibm_ilog.diagram.declareTemplate().
This optional function processes the template so that it is ready
to be used by the templating engine when it is applied on a shape.
If you do not declare your template through the declareTemplate() function,
the template is processed by the templating engine each time it is
applied. It can have a significant performance cost when your graph
contains many nodes. While this function can be used for every template,
it must be used particularly for templates that define bindings.
Quando um modelo tiver sido declarado por meio desta função,
ele não deverá ser modificado.