Definición del aspecto de los nodos

El componente Diagram genera instancias de la clase Node para representar los elementos del origen de datos. IBM® ILOG® Dojo Diagrammer proporciona un mecanismo de diseño incorporado que permite personalizar la representación gráfica de los nodos.

Definición de la plantilla de nodos

Para definir la plantilla de nodos:
  • Utilice la propiedad nodeTemplate del objeto Diagram.
    Esta propiedad define el contenido interno y el aspecto del nodo. El valor es una serie JSON o un objeto que describe el nodo como una jerarquía de formas GFX. El formato es el mismo que el formato de serialización GFX. Una forma GFX se compone de un objeto con una propiedad shape que describe la forma real, por ejemplo, un rectángulo, y propiedades opcionales como fill, stroke, transform y font. Un grupo GFX se describe mediante un objeto con una propiedad children que contiene una matriz de formas hijo.
    Por ejemplo, la plantilla siguiente define el contenido de un nodo como una matriz que contiene una forma de rectángulo básica:
    [{
          shape: {
             x: 0,
             y: 0,
             width: 110,
             height: 80,
             type: 'rect'
          },
          fill: '#ff',
          stroke: {
             'width': 2
          }
    }]
    En la nodeTemplate de un Diagram, puede definir enlaces para establecer la propiedad de una forma GFX en el valor de un atributo del objeto correspondiente del almacén de datos o en una propiedad de una instancia de Node. Por ejemplo:
    [
       {
          shape: {
             x: 0,
             y: 0,
             width: 150,
             height: 40,
             type: 'rect'
          },
          fill: '#d0d0d0',
          stroke: {
             'width': 2
          }
       }, {
          shape: {
             text: '{{data.Name}}',
             x: '10',
             y: '20',
             type: 'text'
          },
          fill: '{{textColor}}'
       }
    ]
    En este ejemplo, se añade una segunda forma de texto. El enlace {{data.Name}} especifica que el texto de la forma es el valor del atributo Name del objeto almacén de datos que representa el nodo. Además, el valor de la propiedad fill de la forma de texto está vinculado con la propiedad textColor de la instancia de Node.
    En algunos casos, el valor del atributo del almacén de datos se transforma. Puede utilizar filtros con funciones predefinidas o personalizadas para transformar el valor inicial del enlace en otro valor. Por ejemplo, en la plantilla siguiente, la propiedad data.Name se transforma en una serie de caracteres en minúsculas:
    [...]
          shape: {
             text: '{{data.Name | lowercase}}',
             x: '10',
             y: '20',
             type: 'text'
          }
    La plantilla de nodos puede contener cualquier número de formas GFX con cualquier número de enlaces. La plantilla también puede contener grupos GFX anidados.
    Para obtener más información acerca de las funciones avanzadas de enlace, consulte Utilización de plantillas y enlaces .

Definición varias plantillas de nodos

Cuando el diagrama contiene distintos tipos de nodos, es conveniente definir varias plantillas de nodos para representar los nodos de un modo diferente.
Para definir varias plantillas de nodos:
  • Utilice la propiedad nodeTemplateFunction del widget Diagram.
    Por ejemplo, la siguiente función de plantilla de nodos devuelve distintas plantillas en función de la propiedad de tipo del elemento de datos:
    <script type="text/javascript">
             function getNodeTemplate(item, store, diagram) {
                switch (store.getValue(item, "type")) {
                   case "startEvent":
                      return startEventTemplate;
                   case "endEvent":
                      return endEventTemplate;
                   case "task":
                      return taskTemplate;
                }
             }
            </script>
    
            <div id="diagram" dojoType='ibm_ilog.diagram.widget.Diagram' nodeTemplateFunction="getNodeTemplate" ...>
            </div>
    En este ejemplo, las variables startEventTemplate, taskTemplate y endEventTemplate contienen plantillas diferentes.

Definición del estilo del nodo

Para definir el estilo del nodo:
  • Utilice la propiedad nodeStyle proporcionada por el componente Diagram. Esta propiedad se define como un diccionario de pares propiedad-valor que establecen las propiedades globales que hay que aplicar a los nodos.
    Por ejemplo, el siguiente objeto estilo de nodo especifica las propiedades borderColor y textColor de los nodos que se muestran en el componente Diagram:
    diagram.attr('nodeStyle',{ 
           borderColor:'red', 
           textColor:'blue'
       });
    Si la plantilla de nodos define enlaces en las propiedades borderColor y textColor de un nodo, la plantilla aplicará automáticamente las propiedades definidas en el estilo del nodo.
    Esto es válido para todas las propiedades del nodo, si existe un método de establecimiento para la propiedad y si su nombre sigue los convenios de denominación de Java. Por ejemplo, para una propiedad denominada a_property, debe existir un método de establecimiento setAProperty.
    En la tabla siguiente se enumeran sólo las principales propiedades de aspecto de un Node que se puede definir con la propiedad nodeStyle:
    Propiedad Tipo Descripción
    label string
    Establece la etiqueta del nodo. La plantilla predeterminada muestra la etiqueta del nodo con una forma de texto alineada en el centro del nodo.
    backgroundColor string o dojo.Color
    Color del fondo del nodo. La plantilla predeterminada vincula esta propiedad con la propiedad de relleno de la forma base del nodo.
    selectedBackgroundColor string o dojo.Color
    Color del fondo del nodo cuando se selecciona el nodo. La plantilla predeterminada vincula esta propiedad con la propiedad de relleno de la forma base del nodo.
    borderColor string o dojo.Color
    Color del borde del nodo. La plantilla predeterminada vincula esta propiedad en el color del trazo de la forma base del nodo.
    textColor string o dojo.Color
    Color del texto del nodo. La plantilla predeterminada vincula esta propiedad con el color de relleno de la forma de texto del nodo.
    selectedTextColor string o dojo.Color
    Color del texto del nodo cuando se selecciona el texto. La plantilla predeterminada vincula esta propiedad con el color de relleno de la forma de texto del nodo.

Definición de nodos personalizados mediante programación

Para definir nodos personalizados:
  • Establezca los atributos onNodeCreated o createNodeFunction del widget Diagram, si los mecanismos descritos en este tema no son suficientes para personalizar los nodos.
    El atributo onNodeCreated se llama cada vez que se crea un nodo. Permite personalizar el nodo según sea necesario. La función debe ser conforme con el prototipo siguiente:
    function nodeCreated(node, diagram){
        // summary: Called after a Node is created by the Diagram widget
        // node: ibm_ilog.diagram.Node: The newly created Node.
        // diagram: ibm_ilog.diagram.widget.Diagram: The Diagram widget
    };
    El atributo createNodeFunction permite cambiar el modo en que se crea un nodo. Se llama para crear cada nodo y debe ser conforme con el prototipo siguiente:
    function createNode(item, template, onGraph, diagram){
        // summary: Creates a Node for a given data store item.
        // item: The item contained in the nodesStore.
        // template: The suggested node template.
        // onGraph: The parent Graph in which the node must be created.
        // diagram: ibm_ilog.diagram.widget.Diagram: The Diagram widget.
        ...
        return node; // ibm_ilog.diagram.Node
    };
    La plantilla propuesta es la plantilla especificada por los atributos nodeTemplate o nodeTemplateFunction. El atributo createNodeFunction puede utilizar una plantilla diferente.
    Para crear el nodo personalizado, el atributo createNodeFunction debe llamar a la función createTemplatedShape del widget Diagram.
    En el ejemplo siguiente se crea una instancia de la clase MyNode, que debe ser una subclase de ibm_ilog.diagram.Node:
    function createNode(item, template, onGraph, diagram){
        return diagram.createTemplatedShape(MyNode, template, onGraph, diagram.nodeStyle, diagram.nodesStore, item);
    };