Para definir un enlace en una plantilla, encierre el
nombre de la propiedad de origen del enlace entre llaves dobles {{
}}. Enciérrelo a su vez entre comillas para los valores de tipo serie
de caracteres de la propiedad de destino del enlace.
Por ejemplo, para enlazar la propiedad
text
de la forma de texto con
la propiedad label
del nodo:shape:{type:'text', text:'{{label}}' }
Para enlazar una propiedad de origen con un tipo de
datos numérico que desea expresar como un valor numérico para la
propiedad de destino, debe aplicar el parámetro de plantilla como la
propiedad de un objeto JavaScript. Consulte
Definición de parámetros como propiedades de objetos JavaScript .
Origen de un enlace
El origen de un enlace puede ser:
- Una propiedad del objeto de destino que sigue a los convenios de denominación de las propiedades de Java: para una propiedad 'foo' debe existir un método getFoo().A esta propiedad se la denomina propiedad enlazable.
- Una propiedad pública del objeto de destino.
- Un método del objeto de destino. Por ejemplo, text:'node {{getId}}'.
- Un atributo de un elemento del almacén de datos. Consulte la sección Enlace a elementos del almacén de datos .
El motor de enlaces admite las propiedades encadenadas
en la forma
a.b.c.
, donde a, b
y c corresponden a uno de los orígenes permitidos de un enlace. Por
ejemplo, la propiedad siguiente muestra el ancho de los límites del
nodo: text:'{{getBounds.width}}'
Enlace a elementos del almacén de datos
Si utiliza el widget Diagram y se conectarse con un
almacén de datos para llenar un gráfico, puede definir enlaces a
propiedades de los elementos del almacén de datos mediante la
propiedad
data
del nodo. Esta
propiedad define el contexto de datos asociado con un nodo que se ha
creado a partir de un elemento del almacén de datos. Cuando se
utiliza la propiedad data
en
un enlace, es un acceso directo a la API del almacén de datos
subyacente y permite hacer referencia directa a los atributos del
elemento de datos. Por ejemplo, un almacén de datos de una biblioteca puede
llenarse con los elementos siguientes:
{ author: ..., title: ..., ISBN:... }
La plantilla siguiente muestra el título y el autor en
dos formas de texto:
ibm_ilog.diagram.declareTemplate("[ { shape: { type:'text', text:'{{data.title}}' } }, { shape: { type:'text', text:'{{data.author}}' } } ]");
Además de a los atributos del elemento de datos, un
enlace del almacén de datos también puede hacer referencia a los
métodos de
dojo.data.api. Los
métodos admitidos son:
- getIdentity
- getLabel
- getAttributes
Por ejemplo, puede cambiar la plantilla para mostrar la
identidad del elemento de datos en lugar de su título:
ibm_ilog.diagram.declareTemplate("[ { shape: { type:'text', text:'{{data.getIdentity}}' } }, { shape: { type:'text', text:'{{data.author}}' } } ]");
Dado que el motor de enlaces se basa en DTL (Django
Template Language), puede utilizar todas las características
avanzadas que admite la implementación de Dojo de DTL. Por ejemplo,
la plantilla siguiente utiliza DTL para un script de bucle. Recorre
una propiedad definida por el usuario
members (definida como
una matriz) para crear una forma de texto para cada elemento de la
matriz. Debido al diseño
StackLayout, las formas
se disponen automáticamente en una pila vertical.
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 %} ] } ] }");
Definición de parámetros como propiedades de objetos JavaScript
En los ejemplos del apartado anterior, todos los
parámetros de enlace se expresan como series de caracteres. La
sintaxis utilizada para definir el enlace,
{{ ... }}
, no es compatible
con JavaScript y, por lo tanto, puede impedir que la plantilla se
escriba como un objeto JavaScript normal. Esto no es un problema cuando la expresión de enlace
está entrecomillada, es decir, cuando la variable que recibe el
enlace espera una serie, por ejemplo,
text: '{{label}}'
. Se
convierte en un problema grave si se desea que un parámetro enlazado
no sea una serie, por ejemplo,
x: {{elemWidth}} + 10
. En
este caso, normalmente queremos pasar el parámetro
elemWidth
al objeto de destino
como un tipo de datos numérico. Aunque sea posible expresar todos los
parámetros de plantilla como series, puede convertir la escritura de
plantillas complejas en algo farragoso (por ejemplo, plantillas con
series de varias líneas). Esta técnica también es propensa a errores,
ya que un error de sintaxis en la plantilla puede ser difícil de
detectar. Para evitar estos problemas, exprese los parámetros de
plantilla como objetos JavaScript y utilice la función global
$bind() del motor de
plantillas para definir los enlaces que no pueden encerrarse entre
comillas. Por ejemplo, si las propiedades
abscissa
y
ordinate
se definen en el
objeto al que se aplica la plantilla y estas propiedades devuelven un
número que desea utilizar para colocar la forma en el gráfico, la
declaración de la plantilla podría ser como la del ejemplo siguiente:var t = ibm_ilog.diagram.declareTemplate({ shape:{ type:'rect', x: $bind("{{abscissa}}"), y: $bind("{{ordinate}}") } }); var node = graph.createNode(t);
Utilización de la función declareTemplate
Todas las plantillas se pueden declarar utilizando la
función
ibm_ilog.diagram.declareTemplate().
Esta función opcional procesa la plantilla de modo que estará lista
para que la use el motor de plantillas cuando se aplique a una forma.
Si no declara la plantilla mediante la función
declareTemplate(), el
motor de plantillas tendrá que procesarla cada vez que se aplique.
Puede afectar al rendimiento de forma significativa si el gráfico
contiene muchos nodos. Aunque esta función puede usarse para todas
las plantillas, debe utilizarse especialmente para las plantillas que
definen enlaces.
Cuando una plantilla se ha declarado mediante esta función, no debe
modificarse.