Definindo a aparências dos nós

O componente Diagram gera instâncias da classe Node para representar os itens na origem de dados. IBM® ILOG® O Dojo Diagrammer fornece um mecanismo de estilo integrado que permite customizar a representação gráfica dos nós.

Definindo o Modelo do Nó

Para definir o modelo do nó:
  • Use a propriedade nodeTemplate do objeto Diagram.
    Esta propriedade define o conteúdo interno e a aparência do nó. O valor é uma sequência JSON ou um objeto que descreve o nó como uma hierarquia de formas GFX. O formato é igual ao formato de serialização GFX. Um formato GFX é composto de um objeto com a propriedade shape que descreve o formato real, por exemplo, um retângulo, e as propriedades opcionais, como fill, stroke, transform e font. Um grupo GFX é descrito por um objeto com uma propriedade children que contém uma matriz de formas-filhas.
    Por exemplo, o modelo a seguir define o conteúdo de um nó como uma matriz contendo uma forma de retângulo básica:
    [{
          shape: {
             x: 0,
             y: 0,
             width: 110,
             height: 80,
             type: 'rect'
          },
          fill: '#ff',
          stroke: {
             'width': 2
          }
    }]
    No nodeTemplate de um Diagram, é possível definir ligações para configurar uma propriedade de uma forma GFX como o valor de um atributo do objeto correspondente no armazenamento de dados ou como uma propriedade de uma instância Node. Por exemplo:
    [
       {
          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}}'
       }
    ]
    Nesse exemplo, um segundo formato de texto é incluído. A ligação {{data.Name}} especifica que o texto do formato é o valor do atributo Name do objeto do armazenamento de dados que o nó representa. Além disso, o valor da propriedade fill da forma de texto está ligado à propriedade textColor da instância Node.
    Em alguns casos, o valor do atributo de armazenamento de dados é transformado. É possível usar filtros com funções predefinidas ou customizadas para transformar o valor de ligação inicial em outro valor. Por exemplo, no modelo a seguir, a propriedade data.Name é transformada em uma sequência de letras minúsculas:
    [...]
          shape: {
             text: '{{data.Name | lowercase}}',
             x: '10',
             y: '20',
             type: 'text'
          }
    O modelo de nó pode conter qualquer quantidade de formas GFX com qualquer quantidade de ligações. O modelo também pode conter grupos GFX aninhados.
    Para obter informações adicionais sobre recursos de ligação avançados, consulte Usando Modelos e Ligações.

Definindo Vários Modelos de Nós

Quando o diagrama contiver diferentes tipos de nós, será útil definir vários modelos de nós para representar os nós de forma diferente.
Para definir vários modelos de nós:
  • Use a propriedade nodeTemplateFunction do widget Diagram.
    Por exemplo, a seguinte função de modelo do nó retorna diferentes modelos, de acordo com a propriedade de tipo do item de dados:
    <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>
    Nesse exemplo, as variáveis startEventTemplate, taskTemplate e endEventTemplate contêm diferentes modelos.

Definindo o Estilo do Nó

Para definir o estilo do nó:
  • Use a propriedade nodeStyle fornecida pelo componente Diagram. Esta propriedade é definida como um dicionário de pares de propriedade-valor que configuram as propriedades globais a serem aplicadas aos nós.
    Por exemplo, o objeto de estilo do nó a seguir especifica as propriedades borderColor e textColor dos nós exibidos no componente Diagram:
    diagram.attr('nodeStyle',{ 
           borderColor:'red', 
           textColor:'blue'
       });
    Se o modelo de nó definir ligações nas propriedades borderColor e textColor de um nó, as propriedades definidas no estilo do nó serão automaticamente aplicadas pelo modelo.
    Isso é válido para todas as propriedades do nó se um configurador existir para a propriedade e seu nome seguir as convenções de nomenclatura Java. Por exemplo, para uma propriedade nomeada a_property, deve existir um configurador setAProperty.
    A tabela a seguir lista apenas as propriedades principais da aparência de Node que podem ser definidas com a propriedade nodeStyle:
    Property Type Descrição
    label Sequência
    Configura o rótulo do nó. O modelo padrão exibe o rótulo do nó com uma forma de texto alinhada no centro do nó.
    backgroundColor string ou dojo.Color
    A cor do plano de fundo do nó. O modelo padrão liga esta propriedade à propriedade de preenchimento da forma base do nó.
    selectedBackgroundColor string ou dojo.Color
    A cor do plano de fundo do nó quando o nó é selecionado. O modelo padrão liga esta propriedade à propriedade de preenchimento da forma base do nó.
    borderColor string ou dojo.Color
    A cor da borda do nó. O modelo padrão liga esta propriedade à cor do traço da forma base do nó.
    textColor string ou dojo.Color
    A cor do texto do nó. O modelo padrão liga esta propriedade à cor de preenchimento da forma de texto do nó.
    selectedTextColor string ou dojo.Color
    A cor do texto do nó quando o texto é selecionado. O modelo padrão liga esta propriedade à cor de preenchimento da forma de texto do nó.

Definindo nós customizados programaticamente

Para definir nós customizados
  • Configure atributos onNodeCreated ou createNodeFunction do widget Diagrama se os mecanismos descritos neste tópico não forem o suficiente para customizar os nós.
    O atributo onNodeCreated é chamado todas as vezes que um nó é criado. Permite customizar o nó, conforme o necessário. A função deve estar de acordo com o seguinte protótipo:
    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
    };
    O atributo createNodeFunction permite alterar a maneira em que o nó é criado. Ele é chamado para criar cada um dos nós e deve estar de acordo com o seguinte protótipo:
    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
    };
    O modo sugerido é o modelo especificado pelos atributos nodeTemplate ou nodeTemplateFunction. O createNodeFunction pode usar um modelo diferente.
    Para criar o nó customizado, o createNodeFunction deve chamar a função createTemplatedShape do widget Diagrama.
    O exemplo a seguir criar uma instância da classe MyNode que deve ser uma subclasse do ibm_ilog.diagram.Node:
    function createNode(item, template, onGraph, diagram){
        return diagram.createTemplatedShape(MyNode, template, onGraph, diagram.nodeStyle, diagram.nodesStore, item);
    };