Archivos fuente de JavaScript y archivos de capas

Puede utilizar el código de Dojo Diagrammer en un archivo HTML cargando los archivos de origen de JavaScript individuales de los módulosibm_ilog.diagram y ibm_ilog.graphlayout utilizando llamadasdojo.require (o llamadas AMD require), o mediante los archivos de capas. Los archivos de capas son parecidos a compilaciones de Dojo y contienen un subconjunto comprimido de las características de Dojo Diagrammer.

Utilización de los archivos fuente de JavaScript de Dojo Diagrammer

Utilice las llamadas a dojo.require para cargar archivos fuente de JavaScript individuales durante el desarrollo de las aplicaciones web de Dojo Diagrammer. Las aplicaciones se pueden depurar más fácilmente si se utilizan archivos fuente individuales que si se utilizan archivos de capas comprimidos de Dojo. Sin embargo, pueden hacer que las aplicaciones se carguen más lentamente.
Nota
En esta sección se muestra el uso de la API dojo.require, pero Dojo Diagrammer también da soporte a la sintaxis del cargador de AMD. Consulte Soporte para el cargador AMD (Asynchronous Module Definition) para obtener explicaciones sobre cómo utilizar la API del cargador de AMD.
En el ejemplo siguiente se muestra el esqueleto de una aplicación que crea un widget Diagram utilizando archivos fuente de 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>
Para este ejemplo, la distribución de Dojo se incluye en el directorio antecesor dos niveles por encima (../..) del directorio de la aplicación. La propiedad modulePaths del objeto dojoConfig apunta a la ubicación de los módulos ibm_ilog.diagram ibm_ilog.graphlayout relativa a la ubicación de la aplicación. En este ejemplo, establecer la propiedad modulePaths es opcional, porque estos módulos se encuentran en el directorio padre del directorio dojo, que es la ubicación predeterminada en que Dojo busca los módulos.

Utilización de los archivos de capas de Dojo Diagrammer

En las versiones de producción de las aplicaciones web de Dojo Diagrammer, puede utilizar archivos de capas en lugar de archivos fuente. Los archivos de capas contienen subconjuntos agrupados de características de Dojo Diagrammer para acelerar la carga. Proporcionan el equivalente de compilaciones de Dojo para el código de Dojo Diagrammer.
En el ejemplo siguiente se muestra el esqueleto de una aplicación que carga archivos de capas de Dojo Diagrammer en lugar de archivos fuente:
<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>
En este ejemplo, el archivo se carga el archivo de capas ibm_ilog.graphlayout_base.js utilizando una llamada dojo.require adicional.
En la tabla siguiente se enumeran los archivos de capas disponibles con Dojo Diagrammer:
Capa Nombre de archivo Descripción Dependencia de otras capas
ibm_diagram_base ibm_ilog/diagram/ibm_diagram_base.js (ibm_diagram_base .js.uncompressed.js también está disponible) Contiene el código de base del diagrama, excepto para las funciones de edición (las clases ibm_diagram.editor no se incluyen) Ninguna
ibm_diagram_base_mobile ibm_ilog/diagram/ibm_diagram_base_mobile.js Contiene el código de base del diagrama, excepto para las funciones de edición (las clases ibm_diagram.editor no se incluyen) para su uso en plataformas móviles Ninguna
ibm_diagram_editing ibm_ilog/diagram/ ibm_diagram_editing.js (ibm_diagram_editing.js.uncompressed.js también está disponible) Funciones de edición de diagramas ibm_diagram_base
ibm_graphlayout_base ibm_ilog/graphlayout/ibm_graphlayout_base.js Código de base del diseño de gráficos (incluyendo los diseños de cuadrícula, recursivo, múltiple y aleatorio) ibm_diagram_base
ibm_graphlayout_base_mobile ibm_ilog/graphlayout/ibm_graphlayout_base_mobile.js Código de base del diseño de gráficos (incluyendo los diseños de cuadrícula, recursivo y múltiple) para su uso en plataformas móviles ibm_diagram_base
ibm_graphlayout_basiclinkstyle ibm_ilog/graphlayout/ibm_graphlayout_basiclinkstyle.js Contiene la funcionalidad BasicLinkStyleLayout ibm_diagram_base, ibm_graphlayout_base
ibm_graphlayout_random ibm_ilog/graphlayout/ibm_graphlayout_random.js Contiene la funcionalidad RandomLayout ibm_diagram_base, ibm_graphlayout_basiclinkstyle, ibm_graphlayout_base
ibm_graphlayout_tree ibm_ilog/graphlayout/ibm_graphlayout_tree.js Contiene la funcionalidad TreeLayout ibm_diagram_base, ibm_graphlayout_base
ibm_graphlayout_hierarchical ibm_ilog/graphlayout/ibm_graphlayout_hierarchical.js Contiene la funcionalidad HierarchicalLayout ibm_diagram_base, ibm_graphlayout_base
ibm_graphlayout_link ibm_ilog/graphlayout/ibm_graphlayout_link.js Contiene la funcionalidad LinkLayout ibm_diagram_base, ibm_graphlayout_base
ibm_graphlayout_forcedirected ibm_ilog/graphlayout/ibm_graphlayout_forcedirected.js Contiene la funcionalidad ForceDirectedLayout ibm_diagram_base, ibm_graphlayout_basiclinkstyle, ibm_graphlayout_base, ibm_graphlayout_tree e ibm_graphlayout_hierarchical
ibm_graphlayout_circular ibm_ilog/graphlayout/ibm_graphlayout_circular.js Contiene la funcionalidad CircularLayout ibm_diagram_base, ibm_graphlayout_basiclinkstyle, ibm_graphlayout_base e ibm_graphlayout_tree
Las capas _mobile se han diseñado específicamente para dispositivos móviles. Algunas características se han eliminado para optimizar el tamaño de descarga en dichos dispositivos. Tenga en cuenta que las capas que no son _mobile también se puede utilizar en dispositivos móviles.