Definición del aspecto de los enlaces

El componente Diagram genera instancias de la clase Link para representar las relaciones entre elementos. IBM® ILOG® Dojo Diagrammer proporciona un mecanismo de diseño incorporado que permite personalizar la representación gráfica de los enlaces.

Definición de la plantilla de enlaces

Para definir la plantilla de enlaces:
  • Utilice la propiedad linkTemplate. El valor es una serie JSON o un objeto que describe el nodo como una jerarquía de formas GFX. Sigue las mismas reglas que la propiedad nodeTemplate. Para obtener más información, consulte Definición del aspecto de los nodos .
    Un diagram.Link se compone de tres subcomponentes dojox.gfx.Shape:
    • vía de acceso principal (obligatorio)
    • flecha de inicio (opcional)
    • flecha final (opcional)
    La plantilla de enlaces debe atenerse a esta estructura. Cada forma de la plantilla de enlaces debe incluir un identificador específico con una propiedad dojoAttachPoint que especifica a qué corresponde cada forma de subcomponente. Dependiendo del subcomponente, la propiedad dojoAttachPoint debe ser una de las especificaciones de subcomponente siguientes: _path, _startArrow o _endArrow.
El ejemplo siguiente es una versión simplificada de la plantilla de enlaces predeterminada (se han eliminado algunos enlaces para simplificar):
[{
      dojoAttachPoint: '_path',
      shape: {
         type: 'polyline',
         points: [{
            x: 0,
            y: 0
         }, {
            x: 100,
            y: 100
         }]
      },
      stroke: {
         width: 2
      }
   }
   ,
   {
      dojoAttachPoint: '_endArrow',
      shape: {
         type: 'polyline',
         points: [{
            x: -8,
            y: 4
         }, {
            x: 0,
            y: 0
         }, {
            x: -8,
            y: -4
         }]
      },
      fill: '#00'
   }
]
En el código siguiente se define un enlace con un círculo como la flecha de inicio, una polilínea como la vía de enlace y una flecha final:
var linkTemplate = "[{
      dojoAttachPoint: '_path',
      shape: {
         type: 'polyline',
         points: [{
            x: 0,
            y: 0
         }, {
            x: 100,
            y: 100
         }]
      },
      stroke: {
         width: 2
      }
   }
   ,
   {
      dojoAttachPoint: '_startArrow',
      shape: {
         type: 'circle',
         r: 4
      },
      fill: 'white',
      stroke: 'black'
   }
   ,
   {
      dojoAttachPoint: '_endArrow',
      shape: {
         type: 'polyline',
         points: [{
            x: -8,
            y: 4
         }, {
            x: 0,
            y: 0
         }, {
            x: -8,
            y: -4
         }, {
            x: -8,
            y: 4
         }]
      },
      fill: 'black'
   }
]";

Definición del estilo de enlace

Para personalizar el estilo de enlace:
  • Utilice la propiedad linkStyle. El valor es un objeto JavaScript normal que contiene definiciones de las propiedades del enlace correspondiente que se quieren definir. Esto es válido para todas las propiedades del enlace, si existe un método de establecimiento para la propiedad y si su nombre siga los convenios de denominación de Java (para una propiedad denominada a_property, debe existir un método de establecimiento setAProperty).
    La clase Link define las propiedades siguientes que se pueden utilizar para cambiar el aspecto del enlace con la propiedad linkStyle:
    Propiedad Tipo Descripción
    strokeColor string o dojo.Color
    Establece el color del trazo del enlace.
    strokeWidth int
    Establece el ancho del trazo del enlace.
    selectedStrokeColor string o dojo.Color
    Establece el color del trazo del enlace cuando se selecciona.
    selectedStrokeWidth int
    Establece el ancho del trazo del enlace cuando se selecciona.
    startArrowVisible boolean
    Establece si la flecha de inicio es visible.
    startArrowFill dojox.gfx.fill
    Establece el relleno de la flecha de inicio.
    startArrowStroke dojox.gfx.stroke
    Establece el trazo de la flecha de inicio.
    endArrowVisible boolean
    Establece si la flecha final es visible.
    endArrowFill dojox.gfx.fill
    Establece el relleno de la flecha final.
    endArrowStroke dojox.gfx.stroke
    Establece el trazo de la flecha final.
    Por ejemplo, el código siguiente establece el ancho del trazo del enlace en 4:
    <div id="canvas" dojoType='ibm_ilog.diagram.widget.Diagram' style="width:900px;height:700px" movableNode="true"
              linkStyle="{strokeWidth:4}">
       </div>

Definición de enlaces personalizados mediante programación

Para definir enlaces personalizados:
  • Establezca los atributos onLinkCreated o createLinkFunction del widget Diagram, si los mecanismos descritos en este tema no son suficientes para personalizar los enlaces.
    El atributo onLinkCreated se llama cada vez que se crea un enlace. Permite personalizar el enlace según sea necesario. La función debe ser conforme con el prototipo siguiente:
    function linkCreated(link, start, end, diagram){
        // summary: Called after a Node is created by the Diagram widget
        // link: ibm_ilog.diagram.Link: The newly created Link.
        // start: ibm_ilog.diagram.Node: The start node of the link.
        // end: ibm_ilog.diagram.Node: The end node of the link.
        // diagram: ibm_ilog.diagram.widget.Diagram: The Diagram widget
    };
    El atributo createLinkFunction permite cambiar el modo en que se crea un enlace. Se llama para crear cada enlace y debe ser conforme con el prototipo siguiente:
    function createLink(item, start, end, template, onGraph, diagram){
        // summary: Creates a Link for a given data store item.
        // item: The item contained in the linksStore, or null if the link is not created from a linksStore item.
        // start: ibm_ilog.diagram.Node: The start node of the link.
        // end: ibm_ilog.diagram.Node: The end node of the link.
        // 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 link; // ibm_ilog.diagram.Link
    };
    La plantilla propuesta es la plantilla especificada por los atributos linkTemplate o linkTemplateFunction. El atributo createLinkFunction puede utilizar una plantilla diferente. Para crear el enlace personalizado, el atributo createLinkFunction debe llamar a la función createTemplatedShape del widget Diagram.
    En el ejemplo siguiente se crea una instancia de la clase MyLink, que debe ser una subclase de ibm_ilog.diagram.Link:
    function createLink(item, start, end, template, onGraph, diagram){
        return diagram.createTemplatedShape(MyLink, template, onGraph, diagram.linkStyle, diagram.linksStore, item);
    };
    Si el atributo createLinkFunction no conecta el enlace con los nodos inicial y final (llamando a link.setStartPort/setEndPort), el widget Diagram lo hace automáticamente después de llamar al atributo createLinkFunction. Sin embargo, el atributo createLinkFunction puede conectar el enlace, por ejemplo, para personalizar los puntos de conexión o para utilizar puertos personalizados. En este caso, el widget no sustituye los puertos establecidos por la función.