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.