JavaScript source and layer files

É possível usar o código do Dojo Diagrammer em um arquivo HTML carregando os arquivos de origem individuais Javascript dos módulos ibm_ilog.diagram eibm_ilog.graphlayout usando chamadas dojo.require (ou chamadas AMD require) ou usando arquivos de camadas. Layer files are similar to Dojo builds, and contain a compressed subset of Dojo Diagrammer features.

Using the Dojo Diagrammer JavaScript source files

Use as chamadas dojo.require para carregar os arquivos de origem individuais do Javascript durante o desenvolvimento dos seus aplicativos da Web do Dojo Diagrammer. Depurar os aplicativos é mais fácil quando se usa os arquivos de origem individuais do que usando os arquivos de camada compactados do Dojo. Contudo, eles podem fazer com que seus aplicativos sejam carregados mais vagarosamente.
Nota
Esta seção mostra o uso da API dojo.require, mas o Dojo Diagrammer também suporta a sintaxe do carregador AMD. Consulte Suporte para Carregador Asynchronous Module Definition (AMD) para obter explicações sobre como usar o carregador AMD.
O exemplo a seguir mostra o esqueleto de um aplicativo que cria um widget Diagrama usando os arquivos de origem do Javascript:
<html>
   <head>
      <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> 
      <title>Dojo Diagrammer Test Page - Skeleton</title>

      <script type="text/javascript">
      var dojoConfig = {
          modulePaths: {
          'ibm_ilog.diagram': '../ibm_ilog/diagram',
          'ibm_ilog.graphlayout': '../ibm_ilog/graphlayout'
          },
        parseOnLoad: true,
          useGfxLayout: true
        };
      </script>

      <script type="text/javascript" src="../../dojo/dojo.js"> </script>

      <script type="text/javascript">
         dojo.require("ibm_ilog.diagram.widget.Diagram");
      </script>
  
      <style type="text/css">
         @import "../../dojo/resources/dojo.css";
         @import "../../dijit/themes/tundra/tundra.css";	
      </style>
    </head>
    <body class='tundra'>
         <h1>Dojo Diagrammer - Skeleton Application</h1>
         <div id="diagram" dojoType="ibm_ilog.diagram.widget.Diagram"/>
     </body>
</html>
Por exemplo, a distribuição do Dojo é incluída no diretório anterior dois níveis acima (../..) do diretório do aplicativo. A propriedade modulePaths dos objetos dojoConfig aponta para o local dos módulos ibm_ilog.diagram e ibm_ilog.graphlayout relativos ao local do aplicativo. Configurar a propriedade modulePaths é opcional nesse exemplo porque esses módulos são localizados no diretório-pai do diretório dojo que é o local padrão em que o Dojo procura por módulos.

Usando os arquivos de camadas do Dojo Diagrammer

Nas versões de produção dos seus aplicativos da Web do Dojo Diagrammer, é possível usar os arquivos de camadas em vez dos arquivos de origem. Os arquivos de camadas contêm subconjuntos agrupados de recursos do Dojo Diagrammer para carregamento mais rápido. Elas fornecem o equivalente de construções Dojo para o código do Dojo Diagrammer.
O exemplo Dojo seguir mostra o esqueleto de um aplicativo que carrega arquivos de camada do Dojo Diagrammer em vez de arquivos de origem:
<html>
   <head>
      <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> 
      <title>Dojo Diagrammer Test Page - Skeleton</title>

      <script type="text/javascript">
      var dojoConfig = {
          modulePaths: {
          'ibm_ilog.diagram': '../ibm_ilog/diagram',
          'ibm_ilog.graphlayout': '../ibm_ilog/graphlayout'
          },
        parseOnLoad: true,
          useGfxLayout: true
        };
      </script>

      <script type="text/javascript" src="../../dojo/dojo.js"> </script>

      <script type="text/javascript">
      dojo.require("ibm_ilog.diagram.ibm_diagram_base");
      dojo.require("ibm_ilog.diagram.widget.Diagram");
      </script>      
      <style type="text/css">
         @import "../../dojo/resources/dojo.css";
         @import "../../dijit/themes/tundra/tundra.css";	
      </style>
    </head>
    <body class='tundra'>
         <h1>Dojo Diagrammer - Skeleton Application (Layers)</h1>
         <div id="diagram" dojoType="ibm_ilog.diagram.widget.Diagram"/>
     </body>
</html>
Neste exemplo, o arquivo da camada ibm_ilog.graphlayout_base.js é carregado pelo uso de uma chamada dojo.require adicional.
A tabela a seguir lista os arquivos de camada disponíveis com o Dojo Diagrammer:
Camada Nome do arquivo Descrição Dependência de outras camadas
ibm_diagram_base ibm_ilog/diagram/ibm_diagram_base.js (ibm_diagram_base .js.uncompressed.js também está disponível) Contém o código de diagrama base, exceto para recursos de edição (as classes ibm_diagram.editor não estão incluídas) Nenhuma
ibm_diagram_base_mobile ibm_ilog/diagram/ibm_diagram_base_mobile.js Contém o código de diagrama base, exceto para recursos de edição (as classes ibm_diagram.editor não estão incluídas) para uso em plataformas remotas Nenhuma
ibm_diagram_editing ibm_ilog/diagram/ ibm_diagram_editing.js (ibm_diagram_editing.js.uncompressed.js também está disponível) Recursos de edição de diagrama ibm_diagram_base
ibm_graphlayout_base ibm_ilog/graphlayout/ibm_graphlayout_base.js O código base de layout de gráfico (incluindo layout aleatório, diverso, recursivo e de grade) ibm_diagram_base
ibm_graphlayout_base_mobile ibm_ilog/graphlayout/ibm_graphlayout_base_mobile.js O código base de layout de gráfico (incluindo layout diverso, recursivo e de grade) ibm_diagram_base
ibm_graphlayout_basiclinkstyle ibm_ilog/graphlayout/ibm_graphlayout_basiclinkstyle.js Contém a funcionalidade BasicLinkStyleLayout ibm_diagram_base, ibm_graphlayout_base
ibm_graphlayout_random ibm_ilog/graphlayout/ibm_graphlayout_random.js Contém a funcionalidade RandomLayout ibm_diagram_base, ibm_graphlayout_basiclinkstyle, ibm_graphlayout_base
ibm_graphlayout_tree ibm_ilog/graphlayout/ibm_graphlayout_tree.js Contém a funcionalidade TreeLayout ibm_diagram_base, ibm_graphlayout_base
ibm_graphlayout_hierarchical ibm_ilog/graphlayout/ibm_graphlayout_hierarchical.js Contém a funcionalidade HierarchicalLayout ibm_diagram_base, ibm_graphlayout_base
ibm_graphlayout_link ibm_ilog/graphlayout/ibm_graphlayout_link.js Contém a funcionalidade LinkLayout ibm_diagram_base, ibm_graphlayout_base
ibm_graphlayout_forcedirected ibm_ilog/graphlayout/ibm_graphlayout_forcedirected.js Contém a funcionalidade ForceDirectedLayout ibm_diagram_base, ibm_graphlayout_basiclinkstyle, ibm_graphlayout_base, ibm_graphlayout_tree, and ibm_graphlayout_hierarchical
ibm_graphlayout_circular ibm_ilog/graphlayout/ibm_graphlayout_circular.js Contém a funcionalidade CircularLayout ibm_diagram_base, ibm_graphlayout_basiclinkstyle, ibm_graphlayout_base, and ibm_graphlayout_tree
As camadas _mobile foram especificamente projetadas para dispositivos remotos. Alguns recursos foram removidos para otimizar o tamanho do download nesses dispositivos. Observe que camadas não remotas podem ser usadas em dispositivos remotos.