Definición de un enlace

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.