| <!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 de hoje em dia. Uma das funcionalidades em ascensão é o uso de 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> |
| |
| <p><img alt="O conteúdo desta página se aplica ao NetBeans IDE 6.7 a 7.1" class="stamp" height="114" src="../../../images_www/articles/69/netbeans-stamp-69-70-71.png" title="O conteúdo desta página se aplica ao NetBeans IDE 6.7 a 7.1" width="114"></p> |
| |
| <p><strong>Conteúdo</strong></p> |
| |
| <ul class="toc"> |
| <li><a href="#addLib">Adicionando um Kit de ferramentas do Dojo em um Projeto NetBeans</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, pacote Java EE</a></td> |
| <td class="tbltd1">6.7 ou superior</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Java Development Kit (JDK)</a></td> |
| <td class="tbltd1">6 ou 7</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 <br><em class="margin-around indent"> </em> <br>6.x ou 7.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.2.x ou mais recente</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252FDojoTreeSample.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 do 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>É possível usar uma versão anterior do IDE para este tutorial. Na versão 6.5, diversos kits de ferramenta foram fornecidos com o IDE; a biblioteca principal do Dojo, versão 1.1.0, foi incluída no NetBeans 6.5. Este tutorial requer componentes da biblioteca <a href="http://dojotoolkit.org/projects/core">Core do Dojo</a> e <a href="http://dojotoolkit.org/projects/dijit">Dijit</a>. Será necessário efetuar o download de uma versão atualizada do kit de ferramentas (1.2.x ou mais recente) que contenha as bibliotecas Core e Dijit e registrá-lo usando o Gerenciador de Bibliotecas JavaScript do IDE. |
| </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/71/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>Adicionando um Kit de Ferramentas do Dojo em um Projeto NetBeans</h2> |
| |
| <p>Inicie abrindo a amostra do projeto no IDE. Depois que o projeto for aberto, copie os recursos do Dojo diretamente no projeto na janela Projetos do IDE:</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>Inicie o NetBeans e clique no botão Abrir Projeto ( <img alt="Botão Abrir Projeto" src="../../../images_www/articles/71/web/js-toolkits-dojo/open-project-btn.png"> ) na barra de ferramentas do IDE.</li> |
| |
| <li>Na caixa de diálogo Abrir Projeto exibida, vá até o local da amostra do projeto do Dojo no computador e clique em Abrir Projeto. <br><br> Quando você abre o projeto <code>DojoTreeSample</code> no IDE, ele é exibido inicialmente em um texto vermelho com um badge de erro, indicando que um problema de referência existe: <br> <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/71/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"> <br> O problema de referência existe porque as classes Java usadas no projeto (<code>Tribe</code> e <code>TribeDataManager</code>) fazem referência às classes encontradas no arquivo JAR JSON, que você adicionará posteriormente na seção <a href="#addJSON">Adicionando os Arquivos JAR JSON ao Projeto</a>.</li> |
| |
| <li>Crie uma pasta no projeto para armazenar os recursos do Dojo que serão adicionados. Para fazer isso, clique com o botão direito do mouse no nó <code>Páginas Web</code> na janela Projetos e selecione Nova > Pasta. Na caixa de diálogo Nova Pasta, digite “<code>recursos</code>” no campo Nome da Pasta. Observe que a palavra “<code>web</code>” é inserida por default no campo Pasta Pai. Clique em Finalizar para criar a nova pasta e veja se agora ela está listada no nó <code>Páginas Web</code> na janela Projetos. <br><br> <strong class="notes">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. Na caixa de diálogo Nova Pasta desta etapa, a palavra “<code>web</code>” é inserida por default no campo Pasta Pai ao criar um novo item a partir do nó <code>Páginas Web</code>. Se você abrir a janela Arquivos, nesse momento, você verá a nova pasta <code>recursos</code> listada no diretório <code>Web</code>.</li> |
| |
| <li>Obtenha uma cópia do <a href="http://www.dojotoolkit.org/downloads">Kit de ferramentas do Dojo</a> (versão 1.2.x ou mais recente). É possível fazer download do kit de ferramentas do Dojo em <a href="http://www.dojotoolkit.org/downloads">http://www.dojotoolkit.org/downloads</a>. <br><br> Observe que a versão atual do kit de ferramentas do Dojo inclui as bibliotecas <a href="http://www.dojotoolkit.org/projects/core">Core do Dojo</a>, <a href="http://www.dojotoolkit.org/projects/dijit">Dijit</a> e <a href="http://www.dojotoolkit.org/projects/dojox">DojoX</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. |
| |
| <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></li> |
| |
| <li>Para adicionar recursos do Dojo ao projeto, simplesmente os copie (Ctrl-C; ⌘-C no Mac) de seus locais no computador e, em seguida, no IDE, clique duas vezes no novo nó de <code>recursos</code> e selecione Colar (ou simplesmente selecione o nó <code>recursos</code> e pressione (Ctrl-V; ⌘-V no Mac). <br><br> Lembre-se de que somente as bibliotecas <code>Core do Dojo</code> e <code>Dijit</code> são necessárias, então, caso você tenha feito o download de uma cópia recente do kit de ferramentas, observe que <em>não</em> será necessário adicionar a biblioteca <code>DojoX</code> ao projeto. <br><br> Após ter adicionado as bibliotecas <code>Core do Dojo</code> e <code>Dijit</code>, a janela Projetos deverá ter a seguinte aparência: <br> <img alt="Janela Projetos exibindo as recursos do Dojo" class="b-all margin-around" src="../../../images_www/articles/71/web/js-toolkits-dojo/proj-win-dojo-resources.png" title="As bibliotecas Dojo e Dijit são adicionadas à pasta 'recursos' do Projeto"> |
| </li> |
| </ol> |
| |
| <p>Neste estágio, o projeto <code>DojoTreeSample</code> foi aberto com êxito no IDE e os recursos necessários do Dojo foram adicionados ao projeto. Na próxima etapa, você começará a trabalhar no arquivo HTML que será exibido no widget Árvore para o usuário final.</p> |
| |
| <br><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>, substitua o |
| |
| <pre class="examplecode"><!-- TODO: link to Dojo resources here --></pre> |
| |
| comentário pelas seguintes tags <code><script></code>: |
| |
| <pre class="examplecode"><script type="text/javascript" |
| src="resources/dojo/dojo.js" |
| djConfig="parseOnLoad: true"> |
| </script></pre> |
| |
| <ul> |
| <li>O <code><a href="http://docs.dojocampus.org/djConfig">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>Link para um <a href="http://docs.dojocampus.org/dijit/themes">exemplo de tema</a> contido no kit de ferramentas. A Dijit oferece três exemplos de tema: <code>tundra</code>, <code>soria</code> e <code>nihilo</code>. Esses temas estão contidos na pasta <code>dijit/themes</code>, que você pode verificar na janela Projetos: <br> <img alt="As pastas de tema Dijit exibidas na janela Projetos" class="b-all margin-around" src="../../../images_www/articles/71/web/js-toolkits-dojo/dijit-themes.png" title="Os temas de exemplo da Dijit estão contidos na pasta 'dijit/themes'"> <br> Para vincular ao tema <code>nihilo</code>, adicione a seguinte instrução <code>@import</code> à página. Você pode adicioná-la entre as tags <code><head></code> da página, por exemplo, logo abaixo das tags <code><script></code> que foram adicionadas (alterações em <strong>negrito</strong>): |
| |
| <pre class="examplecode"><script type="text/javascript" |
| src="resources/dojo/dojo.js" |
| djConfig="parseOnLoad: true"> |
| </script> |
| |
| <strong><style type="text/css"> |
| @import "resources/dijit/themes/nihilo/nihilo.css"; |
| </style></strong></pre></li> |
| |
| <li>Adicione uma classe à tag <code><body></code> da página especificando o nome do tema utilizado. 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> |
| |
| <br><a name="addWidget"></a> |
| <h2>Adicionando e configurando o Widget Árvore do Dojo</h2> |
| |
| <p>Uma vez vinculado 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>Substitua o |
| |
| <pre class="examplecode">// TODO: add dojo.require statements here</pre> |
| |
| comentário (linha 8) pelas seguintes instruções <code>dojo.require</code>: |
| |
| <pre class="examplecode">dojo.require("dojo.data.ItemFileReadStore"); |
| dojo.require("dijit.Tree");</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">digit.Tree</a></code>: o widget Árvore que fornece uma view de dados JSON recuperados do <code>ItemFileReadStore</code>.</li> |
| </ul></li> |
| |
| <li><a name="TribeServlet"></a>Adicione um <code>ItemFileReadStore</code> e um widget <code>Árvore</code> à página. Substitua o |
| |
| <pre class="examplecode"><!-- TODO: specify AJAX retrieval --> |
| |
| <!-- TODO: add Tree widget and configure attributes --></pre> |
| |
| comentários pelo seguinte: |
| |
| <pre class="examplecode"><div dojoType="dojo.data.ItemFileReadStore" |
| url="TribeServlet" |
| jsId="indianStore"> |
| </div> |
| |
| <div dojoType="dijit.Tree" |
| store="indianStore" |
| query="{type:'region'}" |
| label="North American Indians"> |
| </div></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> |
| </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.zip</code> que contém os códigos-fonte.</li> |
| |
| <li>Descompacte o arquivo <code>json.zip</code> e observe que a pasta extraída contém os códigos-fonte listados em <a href="http://json.org/java">http://json.org/java</a>. <br><br> Neste momento, é necessário compilar esses códigos-fonte e criar um arquivo compactado JAR (arquivo Java) que possa ser adicionado ao projeto <code>DojoTreeSample</code>.</li> |
| |
| <li>Na barra de ferramentas principal do IDE, clique no botão Novo Projeto ( <img alt="Botão Novo Projeto" src="../../../images_www/articles/71/web/js-toolkits-dojo/new-project-btn.png"> ).</li> |
| |
| <li>No assistente exibido, selecione Java em Categorias e selecione Biblioteca de Classe Java em Projetos e, em seguida, clique em Próximo.</li> |
| |
| <li>No painel Nome e Localização do assistente de biblioteca de Classe Java, nomeie o novo projeto como “<code>json</code>” e, em seguida, clique em Finalizar. O novo projeto será criado e aberto na janela Projetos. <br><br> Da mesma forma que os recursos do kit de ferramentas do Dojo foram copiadas e coladas na pasta <code>recursos</code> na janela Projetos do IDE, copie os códigos-fonte baixados e cole-os diretamente no novo projeto <code>json</code>.</li> |
| |
| <li>Vá para o local no computador onde o arquivo <code>json.zip</code> extraído se encontra e copie (Ctrl-C; ⌘-C no Mac) a pasta <code>json</code>. A pasta <code>json</code> contém os arquivos de origem.</li> |
| |
| <li>Na janela Projetos do IDE, clique com o botão direito do mouse no nó <code><default package></code> do projeto <code>json</code> e selecione Colar. <br><br> Quando você faz isso, “<code>json</code>” passa a ser o nome do pacote e todos os códigos-fonte são listados ali. <br> <img alt="Janela Projetos - os códigos-fonte contidos no projeto 'json'" class="b-all margin-around" src="../../../images_www/articles/71/web/js-toolkits-dojo/proj-win-json-sources.png" title="Agora, os códigos-fonte estão contidos no novo projeto 'json'"></li> |
| |
| <li>Construa o projeto <code>json</code>. Para fazer isso, clique com o botão direito do mouse no nó <code>json</code> do projeto na janela Projetos e selecione Limpar e Construir. <br><br> 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. <br><br> Após criar 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-fonte criados do arquivo <code>json.zip</code>, e a pasta <code>dist</code> contém o arquivo JAR que o projeto <code>DojoTreeSample</code> precisa como referência. <br> <img alt="Janela Arquivos - códigos-fonte criados mostrados na pasta 'build'" class="b-all margin-around" src="../../../images_www/articles/71/web/js-toolkits-dojo/files-win-compiled-classes.png" title="Os códigos-fonte criados podem ser exibidos em uma pasta 'build' do projeto"> <br> 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.</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>. <br><br> Quando você sai da caixa de diálogo, o arquivo <code>json.jar</code> é listado no nó <code>Libraries</code> do projeto. <br> <img alt="Janela Projetos - o arquivo JAR adicionado ao nó Libraries" class="b-all margin-around" src="../../../images_www/articles/71/web/js-toolkits-dojo/libraries-json-jar.png" title="O arquivo jar é referenciado pelo Projeto"> <br> <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.</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/71/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/71/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>. Feito isso, é possível usar o depurador Java do IDE para percorrer o método e examinar como o <code>JSONObject</code> é formado. Isso poderia ser feito:</p> |
| |
| <ol> |
| <li>Ao definir 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/71/web/js-toolkits-dojo/debugger-breakpoint.png" title="Usar o Depurador Java para a etapa por meio de código"></li> |
| |
| <li>Executando o depurador (clique no botão Depurar o Projeto Principal ( <img alt="Botão Depurar o Projeto Principal" src="../../../images_www/articles/71/web/js-toolkits-dojo/debug-btn.png"> ) da barra de ferramentas do IDE),</li> |
| |
| <li>Utilizando os botões Fazer Step Into ( <img alt="Botão Fazer Step Into" src="../../../images_www/articles/71/web/js-toolkits-dojo/step-into-btn.png"> ) e Fazer Step Over ( <img alt="Botão Fazer Step Over" src="../../../images_www/articles/71/web/js-toolkits-dojo/step-over-btn.png"> ) da barra de ferramentas Depurador,</li> |
| |
| <li>Ao examinar os valores da variável e da expressão na janela Variáveis Locais (Janela > Depuração > Variáveis Locais).</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;"> |
| |
| <br> |
| <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 <code>TribeServlet</code> como o nome da classe. Além disso, crie o servlet no pacote <code>dojo.indians</code>. <br> <img alt="Assistente de Novo servlet" class="margin-around b-all" src="../../../images_www/articles/71/web/js-toolkits-dojo/new-servlet-wizard.png" title="Utilizar o assistente de Novo Servlet para criar servlets"> <br><br> Clique em Próximo.</li> |
| |
| <li>Observe que na etapa Configurar Implantação do Servlet do assistente, a opção “Adicionar informações ao descritor de implantação” está selecionada por default, o que significa que o nome de servlet default e o padrão de URL serão adicionados automaticamente ao <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>.</li> |
| |
| <li>Clique em Finalizar. Uma classe de esqueleto será gerada para o novo servlet e aberta no editor. <br><br> 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.</li> |
| |
| <li><a name="contentType"></a>Localize o método <code>processRequest()</code> e altere |
| |
| <pre class="examplecode">response.setContentType("text/html;charset=UTF-8");</pre> |
| |
| para: |
| |
| <pre class="examplecode">response.setContentType("application/json");</pre> |
| |
| Isso define o cabeçalho <code>Content-Type</code> da Resposta HTTP para indicar que qualquer conteúdo retornado está em um formato JSON.</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 necessárias. São elas: |
| |
| <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/71/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: Connecting a Dojo Tree to an ArrayList">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="../../docs/73/javascript-editor.html">Editando JavaScript</a>. Um documento que descreve as funcionalidades básicas de edição JavaScript fornecidas pelo IDE.</li> |
| |
| </ul> |
| |
| </body> |
| </html> |
