| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| <html> |
| <head> |
| <meta name="author" content="troy.giunipero@sun.com"> |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| <meta name="description" content="A tutorial demonstrating how to connect a |
| Dojo Tree widget to an ArrayList using JSON"> |
| |
| <meta name="keywords" content="NetBeans, IDE, integrated development environment, |
| JavaScript, JavaScript Toolkit, Dojo, JavaScript Editor, web 2.0, Ajax, open |
| source, web technology"> |
| |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> |
| <link rel="stylesheet" type="text/css" href="../../../lytebox.css" media="screen"> |
| <script type="text/javascript" src="../../../images_www/js/lytebox-compressed.js"></script> |
| |
| <title>Conectando uma Árvore do Dojo a uma ArrayList utilizando JSON - Tutorial NetBeans</title> |
| </head> |
| |
| <body> |
| |
| <!-- |
| Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved. |
| --> |
| |
| <h1>Conectando uma Árvore do Dojo a uma ArrayList utilizando o formato JSON</h1> |
| |
| <p>As funcionalidade da Web 2.0 vêm se tornando cada vez mais predominantes nas aplicações. Muitas aplicações Web agora usam kits de ferramentas JavaScript, como o <a href="http://www.dojotoolkit.org/">Dojo</a>, que permite que páginas Web tenham um comportamento mais parecido com os de interfaces de desktop superando incompatibilidades de browsers e utilizando um código de fácil manutenção, acessível e compatível com os padrões.</p> |
| |
| <p>Este tutorial é uma adaptação do <a href="http://developers.sun.com/learning/javaoneonline/j1lab.jsp?lab=LAB-5573&yr=2009&track=1">Java One Hands-On Lab: Leveraging JavaScript Toolkits for End-to-End Connectivity in Web Applications</a> e demonstra como adicionar e configurar um <a href="http://dojocampus.org/explorer/#Dijit_Tree_Basic">widget Árvore do Dojo</a> em uma página Web e ativar o lado do servidor para responder às solicitações da Árvore no formato JSON. Ao fazer isso, você utilizará um conjunto de classes Java gratuitas disponíveis em <a href="http://json.org">http://json.org</a> para processar dados de uma ArrayList no formato JSON.</p> |
| |
| <img alt="O conteúdo desta página se aplica ao NetBeans IDE 7.2, 7.3, 7.4 e 8.0" class="stamp" src="../../../images_www/articles/73/netbeans-stamp-80-74-73.png" title="O conteúdo desta página se aplica ao NetBeans IDE 7.2, 7.3, 7.4 e 8.0"> |
| |
| <p><strong>Conteúdo</strong></p> |
| |
| <ul class="toc"> |
| <li><a href="#addLib">Abrindo o Projeto de Amostra</a></li> |
| <li><a href="#linkFromFile">Vinculando os Recursos do Kit de ferramentas de um Arquivo do Projeto</a></li> |
| <li><a href="#addWidget">Adicionando e Configurando o Widget Árvore do Dojo</a></li> |
| <li><a href="#addJSON">Adicionando Códigos-Fonte de Conversão JSON de Terceiros como um Arquivo JAR ao Projeto</a></li> |
| <li><a href="#prepareServlet">Preparando um Servlet para Iniciar uma Resposta JSON</a></li> |
| <li><a href="#seeAlso">Consulte Também</a></li> |
| </ul> |
| |
| <a name="requiredSoftware"></a> |
| <p><strong>Para concluir este documento, você precisa dos recursos e softwares a seguir:</strong></p> |
| |
| <table> |
| <tbody> |
| <tr> |
| <th class="tblheader" scope="col">Software ou Recurso</th> |
| <th class="tblheader" scope="col">Versão Necessária</th> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDE</a></td> |
| <td class="tbltd1">Java EE 7.2, 7.3, 7.4, 8.0 </td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">JDK (Java Development Kit)</a></td> |
| <td class="tbltd1">7 ou 8</td> |
| </tr> |
| <tr> |
| <td class="tbltd1">GlassFish Server <br><em class="indent margin-around">ou</em> <br>Contêiner do servlet Tomcat</td> |
| <td class="tbltd1">Open Source Edition 3.1.x ou 4.x <br><em class="margin-around indent"> </em> <br> 7.x ou 8.x</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://www.dojotoolkit.org/download">Kit de ferramentas do Dojo</a></td> |
| <td class="tbltd1">versão 1.8.x ou posterior</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="https://netbeans.org/projects/samples/downloads/download/Samples/Java%20Web/DojoTreeSample.zip">Exemplo de projeto do Dojo</a></td> |
| <td class="tbltd1">n/d</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <br> |
| <p><strong class="notes">Observações:</strong></p> |
| |
| <ul> |
| <li>É necessária uma conexão à Internet para concluir várias etapas incluídas neste tutorial.</li> |
| |
| <li>O pacote para download Java EE do NetBeans IDE permite uma instalação e registro opcional do GlassFish Server Open Source Edition com o IDE. É necessário um servidor para simular a comunicação cliente-servidor neste tutorial.</li> |
| |
| <li><a name="final"></a>O projeto concluído tem a seguinte aparência: <br> <img alt="Exercício concluído exibido no browser" class="b-all margin-around" src="../../../images_www/articles/73/web/js-toolkits-dojo/dojo-tree-complete.png" title="Exercício concluído exibido em um browser"> |
| </li> |
| </ul> |
| |
| <br><a name="addLib"></a> |
| <h2>Abrindo o Projeto de Amostra</h2> |
| |
| <p>Inicie abrindo a amostra do projeto no IDE. Quando o projeto estiver aberto, expanda o nó do projeto na janela Projetos e examine os recursos e as bibliotecas do Dojo que são usados no projeto.</p> |
| |
| <ol> |
| <li>Faça o download da <a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252FDojoTreeSample.zip">Amostra do projeto do Dojo</a> em algum local no seu computador.</li> |
| |
| <li>Clique no botão Abrir Projeto ( <img alt="Botão Abrir Projeto" src="../../../images_www/articles/73/web/js-toolkits-dojo/open-project-btn.png"> ) na barra de ferramentas do IDE para abrir a caixa de diálogo Abrir Projeto.</li> |
| |
| <li>Na caixa de diálogo Abrir Projeto, localize o projeto Dojo de amostra no seu computador e clique em Abrir Projeto. |
| |
| <p>Quando você abrir o projeto <code>DojoTreeSample</code> no IDE, verá que projeto está identificado com um crachá de erro para indicar que existe um problema de referência.</p> |
| |
| <img alt="A janela Projetos exibindo o projeto DojoTreeSample em texto vermelho e com um badge de erro" class="b-all margin-around" src="../../../images_www/articles/80/web/js-toolkits-dojo/proj-win-ref-problems.png" title="Os problemas de referência do projeto Project são indicados por um texto vermelho e um badge de erro"> |
| |
| <p> |
| O problema de referência existe porque as classes Java usadas no projeto (<code>Tribe</code> e <code>TribeDataManager</code>) referenciam classes encontradas no arquivo JSON JAR, que você adicionará mais tarde na seção <a href="#addJSON">Adicionando Arquivos JSON JAR ao Projeto</a>.</p> |
| |
| <p class="notes"><strong>Observação: </strong>A janela Projetos (Ctrl-1; ⌘-1 no Mac) oferece uma <em>view lógica</em> dos conteúdos importantes do projeto e é o ponto de entrada principal para os códigos-fonte do projeto. A janela Arquivos (Ctrl-2; ⌘-2 no Mac) mostra uma <em>view com base no diretório</em> dos projetos e inclui os arquivos e as pastas que não são exibidos na Janela de Projetos. </p> |
| </li> |
| |
| <li>Expanda o nó <code>Páginas Web</code> na janela Projetos. |
| <p>Você pode ver que uma pasta <tt>recursos</tt> é listada sob o nó <code>Páginas Web</code> na janela Projetos. A pasta <tt>recursos</tt> contém o núcleo e as bibliotecas do Dojo do <a href="http://www.dojotoolkit.org/download">kit de ferramentas do Dojo</a>. Para implementar o widget Árvore do Dojo, são necessários basicamente 2 componentes: o módulo <code>ItemFileReadStore</code> da biblioteca core e o próprio widget <code>Árvore</code>, contido na biblioteca Dijit.</p> |
| <ul> |
| <li><code><a href="http://docs.dojocampus.org/dojo/data/ItemFileReadStore">dojo.data.ItemFileReadStore</a></code>: lê os conteúdos estruturados JSON de um ponto final HTTP (neste tutorial, um servlet) e armazena todos os itens residentes em memória para um acesso rápido e simples.</li> |
| |
| <li><code><a href="http://docs.dojocampus.org/dijit/Tree">dijit.Tree</a></code>: o widget Árvore que fornece uma view dos dados JSON recuperados do <code>ItemFileReadStore</code>.</li> |
| </ul> |
| <p class="notes"><strong>Observação.</strong> A biblioteca <code>DojoX</code> não é necessária nesse projeto.</p> |
| </li> |
| <li>Expanda o nó <code>Bibliotecas</code> na janela Projetos e confirme se todas as bibliotecas obrigatórias estão no classpath. |
| <p class="notes"><strong>Observação.</strong> Dependendo da sua configuração, pode ser necessário resolver um problema de servidor ausente. Se você vir um nó <tt><Servidor Java EE Ausente></tt> sob o nó <code>Bibliotecas</code>, clique com o botão direito do mouse no nó do projeto e escolha Resolver Problema de Servidor Ausente no menu pop-up.</p> |
| <div class="indent"> |
| <img alt="Janela Projetos exibindo as recursos do Dojo" class="b-all margin-around" src="../../../images_www/articles/80/web/js-toolkits-dojo/proj-win-dojo-resources.png" title="As bibliotecas Dojo e Dijit são adicionadas à pasta 'recursos' do Projeto"> |
| <p>Selecione o GlassFish Server na caixa de diálogo Resolver Referências. Clique em OK.</p> |
| <img alt="Janela Projetos exibindo as recursos do Dojo" class="b-all margin-around" src="../../../images_www/articles/80/web/js-toolkits-dojo/dojo-add-server.png" title="As bibliotecas Dojo e Dijit são adicionadas à pasta 'recursos' do Projeto"> |
| </div> |
| </li> |
| </ol> |
| |
| <p>Nesse estágio, você abriu com sucesso o projeto <code>DojoTreeSample</code> no IDE e confirmou que as bibliotecas do Dojo foram incluídas na aplicação. Na próxima etapa, você começará a trabalhar no arquivo HTML que será exibido no widget Árvore para o usuário final.</p> |
| |
| <a name="linkFromFile"></a> |
| <h2>Vinculando aos Recursos do Kit de Ferramentas de um Arquivo do Projeto</h2> |
| |
| <p>Para usar os recursos de um kit de ferramentas, é necessário vinculá-los ao arquivo <code>dojo.js</code>, encontrado na biblioteca core. O arquivo <code>dojo.js</code> é o <em>carregador de código-fonte</em> do Dojo e determina o ambiente correto de hospedagem a ser usado. Enquanto isso é feito, você também pode configurar o <code>djConfig</code> adicionando o parâmetro <code>parseOnLoad</code>.</p> |
| |
| <ol> |
| <li>Na janela Projetos, clique duas vezes no arquivo <code>dojoDemo.html</code> para abri-lo no editor.</li> |
| |
| <li>No arquivo <code>dojoDemo.html</code>, adicione as seguintes tags <code><script></code> (em negrito) entre as tags <code><head></code>. |
| |
| <pre class="examplecode"><!-- TODO: link to Dojo resources here --> |
| |
| <strong><script type="text/javascript"> |
| var djConfig = {parseOnLoad: true, |
| isDebug: true}; |
| </script> |
| <script |
| type="text/javascript" |
| src="resources/dojo/dojo.js"> |
| </script></strong> |
| |
| </head></pre> |
| <ul> |
| <li>O <code><a href="http://dojotoolkit.org/reference-guide/1.6/djConfig.html">djConfig</a></code> permite substituir as definições globais que controlam como o Dojo opera (por exemplo, usando a propriedade <code>parseOnLoad</code>).</li> |
| |
| <li>A propriedade <code>parseOnLoad</code> definida como <code>true</code> garante que o parse das marcações de página e dos widgets seja feito durante o carregamento da página.</li> |
| </ul></li> |
| |
| <li><a name="themes"></a>Adicione um link ao tema de exemplo<code>nihilo</code> <a href="http://docs.dojocampus.org/dijit/themes"></a> contido no kit de ferramentas, adicionando a instrução <code>@import</code> (em negrito) a seguir entre as tags <code><head></code> e sob as tags <code><script></code> adicionadas. |
| |
| <pre class="examplecode"><script type="text/javascript"> |
| var djConfig = {parseOnLoad: true, |
| isDebug: true}; |
| </script> |
| <script |
| type="text/javascript" |
| src="resources/dojo/dojo.js"> |
| </script> |
| |
| <strong><style type="text/css"> |
| @import "resources/dijit/themes/nihilo/nihilo.css"; |
| </style></strong></pre> |
| |
| <p>O tema <code>nihilo</code> é incluído no kit de ferramenta por default. Você pode expandir a pasta <code>dijit/themes</code> na janela Projetos para ver outros temas de exemplo fornecidos por default.</p> |
| </li> |
| |
| <li>Adicione o seguinte seletor de classe à tag <code><body></code> da página para especificar o nome do tema que você está usando. Quando você faz isso, qualquer widget do Dojo que tenha sido carregado na página será renderizado usando os estilos associados ao tema. |
| |
| <pre class="examplecode"><body <strong>class="nihilo"</strong>></pre> |
| </li> |
| </ol> |
| |
| <p>Nesse estágio, o arquivo <code>dojoDemo.html</code> estará pronto para aceitar qualquer código que faça referência às bibliotecas core do Dojo e Dijit, e renderizará os widgets usando o tema <code>nihilo</code> do Dojo.</p> |
| |
| <a name="addWidget"></a> |
| <h2>Adicionando e configurando o Widget Árvore do Dojo</h2> |
| |
| <p>Depois do vínculo ao <code>dojo.js</code>, você pode começar a adicionar códigos para utilizar módulos e widgtes do Dojo. Adicione primeiro o código para carregar o widget <code>dijit.Tree</code> e o <code>dojo.data.ItemFileReadStore</code> usando instruções <code><a href="http://docs.dojocampus.org/dojo/require">dojo.require</a></code>. Em seguida, adicione os próprios widget e módulo à página.</p> |
| |
| <ol> |
| <li>Adicione as instruções <code>dojo.require</code> (em negrito) a seguir ao arquivo entre as tags <tt><body<</tt>. |
| |
| <pre class="examplecode"><script type="text/javascript"> |
| |
| // TODO: add dojo.require statements here |
| <strong>dojo.require("dojo.data.ItemFileReadStore"); |
| dojo.require("dijit.Tree");</strong> |
| |
| </script></pre> |
| |
| <ul> |
| <li><code><a href="http://docs.dojocampus.org/dojo/data/ItemFileReadStore">dojo.data.ItemFileReadStore</a></code>: lê o conteúdo com estrutura JSON de um ponto final HTTP (em <a href="#prepareServlet">Preparando um Servlet para Iniciar uma Resposta JSON</a>, você implementará um servlet com essa finalidade) e armazena todos os itens residentes na memória para um acesso rápido e simples.</li> |
| |
| <li><code><a href="http://docs.dojocampus.org/dijit/Tree">dijit.Tree</a></code>: o widget Árvore que fornece uma view dos dados JSON recuperados do <code>ItemFileReadStore</code>.</li> |
| </ul></li> |
| |
| <li><a name="TribeServlet"></a>Adicione o código (em negrito) a seguir para adicionar um widget <code>ItemFileReadStore</code> e <code>Árvore</code>. |
| |
| <pre class="examplecode"> |
| <!-- TODO: specify AJAX retrieval --> |
| |
| <!-- TODO: add Tree widget and configure attributes --> |
| <strong><div dojoType="dojo.data.ItemFileReadStore" |
| url="TribeServlet" |
| jsId="indianStore"> |
| </div> |
| |
| <div dojoType="dijit.Tree" |
| store="indianStore" |
| query="{type:'region'}" |
| label="North American Indians"> |
| </div></strong></pre> |
| |
| <ul> |
| <li>O <code>ItemFileReadStore</code> requer que você especifique a propriedade <code>url</code> indicando o recurso no servidor que retorna os dados JSON. Conforme será demonstrado posteriormente, esse é o <code>TribeServlet</code>. É possível usar essa a propriedade <code>jsId</code> para atribuir aos dados recuperados do JSON um ID que os widgets podem utilizar para consultar o armazenamento de dados.</li> |
| |
| <li>A <code>Árvore</code> usa a propriedade <code>store</code> para indicar o <code>ItemFileReadStore</code> que fornece os dados JSON. A propriedade <code>query</code> permite que a organização da view dos dados, com base em uma palavra-chave usada no arquivo JSON.</li> |
| </ul> |
| <p class="notes"><strong>Observação.</strong> Você pode ignorar as advertências que são exibidas no editor após adicionar este código.</p> |
| </li> |
| </ol> |
| |
| <p>Neste estágio, o arquivo <code>dojoDemo.html</code> estará concluído e todas as modificações do <em>cliente</em> no projeto já estarão em vigor. Nas duas etapas a seguir, você fará alterações que afetarão o comportamento <em>por parte do servidor</em> do projeto quando forem feitas solicitações da Árvore.</p> |
| |
| <br><a name="addJSON"></a> |
| <h2>Adicionando Códigos-Fonte de Conversão JSON de Terceiros como um Arquivo JAR ao Projeto</h2> |
| |
| <p>Neste tutorial, a lógica que extrai os dados de amostra da ArrayList foi preparada para você nas classes <code>Tribe</code> e <code>TribeDataManager</code>. Essencialmente, é necessário somente incluir classes Java de terceiros que manipulem a conversão JSON para o projeto e, em seguida, adicionar as instruções <code>import</code> para essas classes nas classes <code>Tribe</code> e <code>TribeDataManager</code>. Para isso, entretanto, é necessário primeiro compilar as classes Java de terceiros e criar um Arquivo Compactado JAR ( Arquivo Compactado Java). O IDE pode ajudá-lo na execução dessa ação usando o assistente de Biblioteca de Classe Java.</p> |
| |
| <ol> |
| <li>Visite <a href="http://json.org/java">http://json.org/java</a> e observe que as classes Java para a conversão JSON estão disponíveis gratuitamente. Clique no link “Free source code is avaiable” para fazer download do arquivo <code>JSON-java-master.zip</code> que contém os códigos-fontes.</li> |
| |
| <li>Descompacte o arquivo <code>JSON-java-master.zip</code> e observe que a pasta extraída contém os códigos-fontes listados em <a href="http://json.org/java">http://json.org/java</a>. |
| |
| <p>Neste momento, compile esses códigos-fontes e crie um arquivo compactado JAR (arquivo Java) que possa ser adicionado ao projeto <code>DojoTreeSample</code>.</p></li> |
| |
| <li>Clique no botão Novo Projeto (<img alt="Botão Novo Projeto" src="../../../images_www/articles/73/web/js-toolkits-dojo/new-project-btn.png">) na barra de ferramentas para abrir o assistente do Novo Projeto.</li> |
| |
| <li>No assistente do Novo Projeto, selecione o tipo de projeto de Bibliotecas de Classes Java na categoria Java. Clique em Próximo.</li> |
| |
| <li>No painel Nome e Local do assistente da Biblioteca de Classes Java, digite <strong><code>json</code></strong> como Nome do Projeto. Clique em Finalizar. |
| <p>Quando você clicar em Finalizar, o novo projeto será criado e aberto na janela Projetos.</p> |
| |
| <p>Agora, você precisa copiar os códigos-fontes JSON que obteve por download para o projeto <tt>json</tt> da mesma forma que copiou os recursos do kit de ferramentas Dojo no projeto <tt>DojoTreeSample</tt>.</p> |
| </li> |
| |
| <li>Extraia o archive <code>JSON-java-master.zip</code> e copie (Ctrl-C; ⌘-C no Mac) os arquivos de código-fonte Java que estão na pasta-raiz. |
| <p class="notes"><strong>Observação.</strong> Não é necessário copiar a pasta <code>zip</code> e seu conteúdo que também se encontra na pasta-raiz do archive extraído.</p></li> |
| |
| <li>Na janela Projetos do IDE, clique com o botão direito do mouse no nó Pacotes de Código-fonte e selecione Novo > Pacote Java no menu pop-up.</li> |
| <li>Digite <strong>json</strong> como Nome do Pacote. Clique em Finalizar.</li> |
| <li>Clique com o botão direito do mouse no pacote de código-fonte <code>json</code> e escolha Colar no menu pop-up. |
| |
| <p>Ao expandir o pacote, você verá os códigos-fonte <tt>json</tt>.</p> |
| |
| <img alt="Janela Projetos - os códigos-fonte contidos no projeto 'json'" class="b-all margin-around" src="../../../images_www/articles/73/web/js-toolkits-dojo/proj-win-json-sources.png" title="Agora, os códigos-fonte estão contidos no novo projeto 'json'"></li> |
| |
| <li>Clique com o botão direito do mouse no nó do projeto <code>json</code> na janela Projetos e escolha Limpar e Compilar para compilar o projeto. |
| |
| <p>Quando você cria o projeto, todas as classes Java são criadas nos arquivos <code>.class</code>. O IDE cria uma pasta <code>build</code> que contém as classes criadas, bem como a pasta <code>dist</code> que contém um arquivo JAR para o projeto. Essas pastas podem ser exibidas na janela Arquivos do IDE.</p> |
| |
| <p>Após compilar o projeto <code>json</code>, abra a janela Arquivos (Ctrl-2; ⌘-2 no Mac) e expanda a pasta <code>json</code>. A pasta <code>build</code> contém os códigos-fontes criados do arquivo <code>JSON-java-master.zip</code>, e a pasta <code>dist</code> contém o arquivo JAR que o projeto <code>DojoTreeSample</code> precisa como referência.</p> |
| |
| <img alt="Janela Arquivos - códigos-fonte criados mostrados na pasta 'build'" class="b-all margin-around" src="../../../images_www/articles/73/web/js-toolkits-dojo/files-win-compiled-classes.png" title="Os códigos-fonte criados podem ser exibidos em uma pasta 'build' do projeto"> |
| |
| <p>Agora que o arquivo <code>json.jar</code> existe, é possível solucionar os problemas de referência que o projeto <code>DojoTreeSample</code> vem exibindo desde que foi aberto.</p></li> |
| |
| <li>Na janela Projetos, clique com o botão direito no nó das Bibliotecas do <code>DojoTreeSample</code> e selecione Adicionar JAR/Pasta. Em seguida, na caixa de diálogo, vá até o local da pasta <code>dist</code> do projeto <code>json</code> e selecione o arquivo <code>json.jar</code>. |
| <p>Se preferir, clique com o botão direito do mouse no nó Bibliotecas e escolha Adicionar Projeto no menu pop-up e localize o projeto <code>json</code> na caixa de diálogo Adicionar Projeto.</p> |
| <p>Quando você sai da caixa de diálogo, o arquivo <code>json.jar</code> é listado no nó <code>Libraries</code> do projeto.</p> |
| |
| <img alt="Janela Projetos - o arquivo JAR adicionado ao nó Libraries" class="b-all margin-around" src="../../../images_www/articles/73/web/js-toolkits-dojo/libraries-json-jar.png" title="O arquivo jar é referenciado pelo Projeto"> |
| |
| <p><strong class="notes">Observação: </strong>Mesmo que o arquivo <code>json.jar</code> esteja listado no nó <code>Libraries</code> do projeto, ele será referenciado na sua localização original, não sendo copiado e adicionado ao projeto (por exemplo, não será possível localizá-lo no projeto <code>DojoTreeSample</code> da janela Arquivos). Por isso, se você alterar o local do arquivo JAR, a referência será interrompida.</p></li> |
| |
| <li>Expanda o pacote <code>Source Packages</code> > <code>dojo.indians</code> e clique duas vezes nas classes <code>Tribe</code> e <code>TribeDataManager</code> para abri-las no editor.</li> |
| |
| <li>Adicione as instruções de importação necessárias para ambas as classes. Em cada classe, clique com o botão direito do mouse no editor e selecione Corrigir Importações. <br><br> A classe <code>Tribe</code> exige as seguintes importações: |
| |
| <pre class="examplecode">import dojo.org.json.JSONException; |
| import dojo.org.json.JSONObject;</pre> |
| |
| A classe <code>TribeDataManager</code> requer as seguintes importações: |
| |
| <pre class="examplecode">import dojo.org.json.JSONArray; |
| import dojo.org.json.JSONException; |
| import dojo.org.json.JSONObject;</pre> |
| |
| <p class="tips">Observe que as APIs para as classes JSON também são fornecidas em <a href="http://json.org/java">http://json.org/java</a> - você pode manter esta página aberta ao examinar posteriormente o código em <code>Tribe</code> e <code>TribeDataManager</code>.</p></li> |
| |
| <li>Examine a ArrayList em <code>TribeDataManager</code>. A ArrayList é uma coleção de objetos da <code>Tribe</code>. Observando o primeiro elemento da ArrayList, é possível ver um novo objeto criado da <code>Tribe</code> e adicionado à lista: |
| |
| <pre class="examplecode">indians.add(new Tribe("Eskimo-Aleut", "Arctic", "Alaska Natives"));</pre> |
| |
| Cada objeto da <code>Tribe</code> captura três pontos de informação: <em>tribo</em>, <em>categoria</em> e <em>região</em>. Os dados para este exercício foram retirados da entrada da Wikipédia em <a href="http://en.wikipedia.org/wiki/Native_Americans_in_the_United_States#Ethno-linguistic_classification">Native Americans in the United States</a>. Como você pode determinar, várias <em>tribos</em> são classificadas em uma <em>categoria</em> e diversas categorias podem estar contidas em uma grande <em>região</em>.</li> |
| |
| <li>Abra a classe <code>Tribe</code> no editor e observe que ela é basicamente um <a href="http://java.sun.com/docs/books/tutorial/javabeans/index.html">JavaBean</a>, com exceção do método <code>toJSONObject()</code>: |
| |
| <pre class="examplecode">public JSONObject toJSONObject() throws JSONException { |
| JSONObject jo = new JSONObject(); |
| jo.put("name", this.name); |
| jo.put("type", "tribe"); |
| |
| return jo; |
| }</pre></li> |
| |
| <li>Retorne ao <code>TribeDataManager</code> (Ctrl-Tab) e examine os métodos incluídos na classe. Abra o Navegador (Ctrl-7; ⌘-7 no Mac) para exibir uma lista de campos e propriedades contidos na classe. <br> <img alt="A classe TribeDataManager exibida no Navigator" class="margin-around" src="../../../images_www/articles/73/web/js-toolkits-dojo/dojo-navigator.png" title="Utilizar o Navigator para exibir os campos e propriedades da classe"> <br> O método mais significativo contido é <code>getIndiansAsJSONObject()</code>. Esse método analisa a ArrayList, processa os dados e os retorna no formato de um <code>JSONObject</code>. O formato de <code>String</code> do JSONObject é o exigido pelo <code>ItemFileReadStore</code> do Dojo. |
| |
| <pre class="examplecode">public static JSONObject getIndiansAsJSONObject() throws JSONException { |
| |
| JSONObject jo = new JSONObject(); |
| JSONArray itemsArray = new JSONArray(); |
| |
| jo.put("identifier", "name"); |
| jo.put("label", "name"); |
| |
| // add regions |
| addRegionsToJSONArray(itemsArray); |
| |
| // add categories |
| addCategoriesToJSONArray(itemsArray); |
| |
| // add tribes |
| addTribesToJSONArray(itemsArray); |
| |
| jo.put("items", itemsArray); |
| return jo; |
| }</pre></li> |
| |
| <li>Abra o Javadoc no método <code>getIndiansAsJSONObject()</code>. É possível fazer isso retornando ao Navegador (Ctrl-7; ⌘-7 no Mac) e colocando o ponteiro sobre o método. Ou então, selecione Janela > Outro > Javadoc no menu principal e, em seguida, clique na assinatura do método no editor. <br><a name="javadoc"></a> <img alt="Janela Javadoc aberta para a classe TribeDataManager" class="margin-around" src="../../../images_www/articles/73/web/js-toolkits-dojo/javadoc-window.png" title="O Javadoc para TribeDataManager fornece um exemplo de dados JSON"></li> |
| |
| <li>Examine o exemplo de dados JSON fornecidos no Javadoc. Observe que o formato dos dados está de acordo com os exemplos fornecidos na <a href="http://o.dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/what-dojo-data/available-stores/dojo-data-item">documentação do Dojo</a>.</li> |
| </ol> |
| |
| <div class="indent"> |
| <div class="feedback-box float-left" style="width:700px"> |
| <h3>Depurador Java do NetBeans IDE</h3> |
| |
| <p>Na próxima etapa, você implementará um servlet que chama o método <code>getIndiansAsJSONObject()</code>. Depois que você fizer isso, poderá executar as etapas a seguir para usar o depurador de Java do IDE e percorrer o método para examinar como o <code>JSONObject</code> é formado.</p> |
| |
| <ol> |
| <li>Defina um ponto de interrupção no método (clique no número da linha, por exemplo, linha 99, na margem esquerda do editor). <br> <img alt="Ponto de interrupção do método definido no editor" class="margin-around b-all" src="../../../images_www/articles/73/web/js-toolkits-dojo/debugger-breakpoint.png" title="Usar o Depurador Java para a etapa por meio de código"></li> |
| |
| <li>Selecione o projeto <tt>DojoTreeSample</tt> na janela Projetos.</li> |
| <li>Execute o depurador (clique no botão Depurar Projeto (<img alt="Botão Depurar Projeto" src="../../../images_www/articles/73/web/js-toolkits-dojo/debug-btn.png"> ) da barra de ferramentas).</li> |
| |
| <li>Use os botões Fazer Step Into (<img alt="Botão Fazer Step Into" src="../../../images_www/articles/73/web/js-toolkits-dojo/step-into-btn.png">) e Fazer Step Over (<img alt="Botão Fazer Step Over" src="../../../images_www/articles/73/web/js-toolkits-dojo/step-over-btn.png">) da barra de ferramentas.</li> |
| |
| <li>Examine os valores da variável e da expressão na janela Variáveis Locais (Janela > Depuração > Variáveis).</li> |
| </ol> |
| |
| <p>Para obter mais informações sobre o Depurador Java, consulte os seguintes screencasts:</p> |
| |
| <ul> |
| <li><a href="../java/debug-stepinto-screencast.html">Ação Visual Step Into no Depurador do NetBeans</a></li> |
| <li><a href="../java/debug-deadlock-screencast.html">Detecção de Bloqueio Usando o Depurador do NetBeans</a></li> |
| <li><a href="../java/debug-evaluator-screencast.html">Usando o Avaliador do Snippet do Código no Depurador do NetBeans</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| <br style="clear:both;"> |
| |
| <p>Nesta etapa, os códigos-fonte de terceiros foram compilados em <a href="http://json.org">http://json.org</a> e adicionados como um arquivo JAR ao projeto <code>DojoTreeSample</code>. As instruções de importação foram adicionadas às classes do arquivo JAR nas classes <code>Tribe</code> e <code>TribeDataManager</code>. Finalmente, alguns dos métodos contidos na <code>TribeDataManager</code>, que são usados para converter os dados da ArrayList em uma sequência JSON, foram examinados.</p> |
| |
| <p>Na etapa seguinte, você criará um servlet que manipula solicitações de entrada ao chamar o método <code>getIndiansAsJSONObject()</code> da <code>TribeDataManager</code> e enviará a sequência de caracteres JSON resultante como resposta ao cliente.</p> |
| |
| <br><a name="prepareServlet"></a> |
| <h2>Preparando um Servlet para Iniciar uma Resposta JSON</h2> |
| |
| <p><a href="#TribeServlet">Lembre-se de que você especificou '<code>TribeServlet</code>' como o valor para a propriedade</a> <code>url</code> ao adicionar o <code>ItemFileReadStore</code> à página Web. Esse é o destino no servidor que é encarregado da preparação e retorno dos dados JSON ao cliente. Agora, vamos criar esse servlet.</p> |
| |
| <ol> |
| <li>Na janela Projetos, clique com o botão direito do mouse no pacote de código-fonte <code>dojo.indians</code> e selecione Novo > Servlet.</li> |
| |
| <li>Na caixa de diálogo Novo Servlet, digite <strong><code>TribeServlet</code></strong> como o nome da classe. Confirme se <code>dojo.indians</code> foi especificado como o pacote. Clique em Próximo. <br> <img alt="Assistente de Novo servlet" class="margin-around b-all" src="../../../images_www/articles/73/web/js-toolkits-dojo/new-servlet-wizard.png" title="Utilizar o assistente de Novo Servlet para criar servlets"> |
| </li> |
| |
| <li>Confirme se os valores padrão de Nome do Servlet e Padrões de URL estão corretos. Clique em Finalizar para gerar a classe skeleton do servlet. |
| <p>A função do servlet é chamar o método <code>getIndiansAsJSONObject()</code> e usar os dados desse método para responder à solicitação do cliente. Para preparar uma resposta no formato JSON, temos que, primeiro, definir o tipo de mime da resposta para o formato JSON.</p> |
| |
| <p class="notes"><strong>Observação.</strong> O assistente adicionará automaticamente o nome do servlet e o padrão de URL ao arquivo <code>web.xml</code>. Consequentemente, as solicitações ao domínio host (<code>http://localhost:8080/DojoTreeSample/</code>) pelo <code>TribeServlet</code> serão manipuladas pela classe <code>dojo.indians.TribeServlet</code>. Se você abrir <code>web.xml</code> no editor, verá que o arquivo agora contém os elementos <code><servlet></code> e <code><servlet-mapping></code>.</p></li> |
| |
| <li><a name="contentType"></a>Modifique o método <code>processRequest()</code> fazendo as seguintes alterações (em negrito): |
| |
| <pre class="examplecode">response.setContentType("<strong>application/json</strong>");</pre> |
| |
| <p>Isso altera o cabeçalho <code>Content-Type</code> da Resposta HTTP para indicar que qualquer conteúdo retornado está em um formato JSON.</p></li> |
| |
| <li>Substitua o código comentado no bloco <code>try</code> do método <code>processRequest()</code> pelo seguinte (alterações em <strong>negrito</strong>): |
| |
| <pre class="examplecode">try { |
| |
| <strong>JSONObject jo = null; |
| try { |
| jo = TribeDataManager.getIndiansAsJSONObject(); |
| } catch (JSONException ex) { |
| System.out.println("Unable to get JSONObject: " + ex.getMessage()); |
| } |
| |
| out.println(jo);</strong> |
| |
| } finally { |
| out.close(); |
| }</pre> |
| |
| <p class="tips">Para reformatar o código, clique com o botão direito do mouse no editor e selecione Formatar.</p></li> |
| |
| <li>Utilize as dicas do IDE para adicionar as instruções de importação a seguir. |
| |
| <pre class="examplecode">import dojo.org.json.JSONException; |
| import dojo.org.json.JSONObject;</pre></li> |
| |
| <li>Para executar o projeto, selecione o nó do projeto <code>DojoTreeSample</code> na janela Projetos e, em seguida, clique no botão Executar Projeto (<img alt="Botão Executar o Projeto Principal" src="../../../images_www/articles/73/web/js-toolkits-dojo/run-project-btn.png">) na barra de ferramentas do IDE. <br><br> O browser será aberto e exibirá uma página de boas-vindas (<code>dojoDemo.html</code>), e você poderá ver que o widget Árvore do Dojo exibirá dados da ArrayList corretamente, como na <a href="#final">captura de tela acima</a>.</li> |
| </ol> |
| |
| <div class="feedback-box"> |
| <a href="/about/contact_form.html?to=3&subject=Feedback:%20Connecting%20a%20Dojo%20Tree%20to%20an%20ArrayList">Envie-nos Seu Feedback</a></div> |
| |
| <br style="clear:both;"> |
| |
| <a name="seeAlso"></a> |
| <h2>Consulte Também</h2> |
| |
| <p>Para obter mais informações sobre o Dojo, consulte a documentação oficial:</p> |
| |
| <ul> |
| <li>Guia de Referência do Kit de Ferramentas do Dojo: <a href="http://dojotoolkit.org/reference-guide/">Guia de referência</a></li> |
| <li>Referência On-line da API: <a href="http://api.dojotoolkit.org/">http://api.dojotoolkit.org/</a></li> |
| <li>Demonstração do Dojo: <a href="http://demos.dojotoolkit.org/demos/">http://demos.dojotoolkit.org/demos/</a></li> |
| </ul> |
| |
| <p>Para obter mais informações sobre o JavaScript e as funcionalidades do kit de ferramentas do JavaScript em <a href="https://netbeans.org/">netbeans.org</a>, consulte os seguintes recursos:</p> |
| |
| <ul> |
| <li><a href="js-toolkits-jquery.html">Usando jQuery para Melhorar a Aparência e o Uso de uma Página Web</a>. São fornecidas uma introdução ao jQuery e as etapas, mostrando como aplicar o widget accordion do jQuery a uma marcação HTML de uma página Web.</li> |
| |
| <li><a href="ajax-quickstart.html">Introdução ao Ajax (Java)</a>. Descreve como construir uma aplicação simples usando a tecnologia de servlet, ao mesmo tempo em que ensina o fluxo de processo subjacente de uma solicitação do Ajax.</li> |
| |
| <li><a href="http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG2272">Criando Arquivos JavaScript</a> em <i>Desenvolvendo Aplicações com o NetBeans IDE</i></li> |
| |
| </ul> |
| |
| </body> |
| </html> |
