É 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.