| // |
| // Licensed to the Apache Software Foundation (ASF) under one |
| // or more contributor license agreements. See the NOTICE file |
| // distributed with this work for additional information |
| // regarding copyright ownership. The ASF licenses this file |
| // to you under the Apache License, Version 2.0 (the |
| // "License"); you may not use this file except in compliance |
| // with the License. You may obtain a copy of the License at |
| // |
| // http://www.apache.org/licenses/LICENSE-2.0 |
| // |
| // Unless required by applicable law or agreed to in writing, |
| // software distributed under the License is distributed on an |
| // "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| // KIND, either express or implied. See the License for the |
| // specific language governing permissions and limitations |
| // under the License. |
| // |
| |
| = Conectando uma Árvore do Dojo a uma ArrayList utilizando o formato JSON |
| :jbake-type: tutorial |
| :jbake-tags: tutorials |
| :jbake-status: published |
| :icons: font |
| :syntax: true |
| :source-highlighter: pygments |
| :toc: left |
| :toc-title: |
| :description: Conectando uma Árvore do Dojo a uma ArrayList utilizando o formato JSON - Apache NetBeans |
| :keywords: Apache NetBeans, Tutorials, Conectando uma Árvore do Dojo a uma ArrayList utilizando o formato JSON |
| |
| 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 link:http://www.dojotoolkit.org/[+Dojo+], 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. |
| |
| Este tutorial é uma adaptação do link: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+] e demonstra como adicionar e configurar um link:http://dojocampus.org/explorer/#Dijit_Tree_Basic[+widget Árvore do Dojo+] 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 link:http://json.org[+http://json.org+] para processar dados de uma ArrayList no formato JSON. |
| |
| image::images/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"] |
| |
| |
| |
| *Para concluir este documento, você precisa dos recursos e softwares a seguir:* |
| |
| |=== |
| |Software ou Recurso |Versão Necessária |
| |
| |link:https://netbeans.org/downloads/index.html[+NetBeans IDE+] |Java EE 7.2, 7.3, 7.4, 8.0 |
| |
| |link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+JDK (Java Development Kit)+] |7 ou 8 |
| |
| |GlassFish Server |
| _ou_ |
| Contêiner do servlet Tomcat |Open Source Edition 3.1.x ou 4.x |
| _ _ |
| |
| |
| .x ou 8.x |
| |
| |link:http://www.dojotoolkit.org/download[+Kit de ferramentas do Dojo+] |versão 1.8.x ou posterior |
| |
| |link:https://netbeans.org/projects/samples/downloads/download/Samples/Java%20Web/DojoTreeSample.zip[+Exemplo de projeto do Dojo+] |n/d |
| |=== |
| |
| |
| *Observações:* |
| |
| * É necessária uma conexão à Internet para concluir várias etapas incluídas neste tutorial. |
| * 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. |
| * O projeto concluído tem a seguinte aparência: |
| |
| image::images/dojo-tree-complete.png[title="Exercício concluído exibido em um browser"] |
| |
| |
| |
| == Abrindo o Projeto de Amostra |
| |
| 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. |
| |
| 1. Faça o download da link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252FDojoTreeSample.zip[+Amostra do projeto do Dojo+] em algum local no seu computador. |
| 2. Clique no botão Abrir Projeto ( image:images/open-project-btn.png[] ) na barra de ferramentas do IDE para abrir a caixa de diálogo Abrir Projeto. |
| 3. Na caixa de diálogo Abrir Projeto, localize o projeto Dojo de amostra no seu computador e clique em Abrir Projeto. |
| |
| Quando você abrir o projeto `DojoTreeSample` no IDE, verá que projeto está identificado com um crachá de erro para indicar que existe um problema de referência. |
| |
| image::images/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"] |
| |
| O problema de referência existe porque as classes Java usadas no projeto (`Tribe` e `TribeDataManager`) referenciam classes encontradas no arquivo JSON JAR, que você adicionará mais tarde na seção <<addJSON,Adicionando Arquivos JSON JAR ao Projeto>>. |
| |
| *Observação: *A janela Projetos (Ctrl-1; ⌘-1 no Mac) oferece uma _view lógica_ 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 _view com base no diretório_ dos projetos e inclui os arquivos e as pastas que não são exibidos na Janela de Projetos. |
| |
| |
| |
| . Expanda o nó `Páginas Web` na janela Projetos. |
| |
| Você pode ver que uma pasta ``recursos`` é listada sob o nó `Páginas Web` na janela Projetos. A pasta ``recursos`` contém o núcleo e as bibliotecas do Dojo do link:http://www.dojotoolkit.org/download[+kit de ferramentas do Dojo+]. Para implementar o widget Árvore do Dojo, são necessários basicamente 2 componentes: o módulo `ItemFileReadStore` da biblioteca core e o próprio widget `Árvore`, contido na biblioteca Dijit. |
| |
| * `link:http://docs.dojocampus.org/dojo/data/ItemFileReadStore[+dojo.data.ItemFileReadStore+]`: 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. |
| * `link:http://docs.dojocampus.org/dijit/Tree[+dijit.Tree+]`: o widget Árvore que fornece uma view dos dados JSON recuperados do `ItemFileReadStore`. |
| |
| *Observação.* A biblioteca `DojoX` não é necessária nesse projeto. |
| |
| |
| |
| . Expanda o nó `Bibliotecas` na janela Projetos e confirme se todas as bibliotecas obrigatórias estão no classpath. |
| |
| *Observação.* Dependendo da sua configuração, pode ser necessário resolver um problema de servidor ausente. Se você vir um nó ``<Servidor Java EE Ausente>`` sob o nó `Bibliotecas`, clique com o botão direito do mouse no nó do projeto e escolha Resolver Problema de Servidor Ausente no menu pop-up. |
| |
| image::images/proj-win-dojo-resources.png[title="As bibliotecas Dojo e Dijit são adicionadas à pasta 'recursos' do Projeto"] |
| |
| Selecione o GlassFish Server na caixa de diálogo Resolver Referências. Clique em OK. |
| |
| image::images/dojo-add-server.png[title="As bibliotecas Dojo e Dijit são adicionadas à pasta 'recursos' do Projeto"] |
| |
| Nesse estágio, você abriu com sucesso o projeto `DojoTreeSample` 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. |
| |
| |
| == Vinculando aos Recursos do Kit de Ferramentas de um Arquivo do Projeto |
| |
| Para usar os recursos de um kit de ferramentas, é necessário vinculá-los ao arquivo `dojo.js`, encontrado na biblioteca core. O arquivo `dojo.js` é o _carregador de código-fonte_ do Dojo e determina o ambiente correto de hospedagem a ser usado. Enquanto isso é feito, você também pode configurar o `djConfig` adicionando o parâmetro `parseOnLoad`. |
| |
| 1. Na janela Projetos, clique duas vezes no arquivo `dojoDemo.html` para abri-lo no editor. |
| 2. No arquivo `dojoDemo.html`, adicione as seguintes tags `<script>` (em negrito) entre as tags `<head>`. |
| |
| [source,xml] |
| ---- |
| |
| <!-- TODO: link to Dojo resources here --> |
| |
| *<script type="text/javascript"> |
| var djConfig = {parseOnLoad: true, |
| isDebug: true}; |
| </script> |
| <script |
| type="text/javascript" |
| src="resources/dojo/dojo.js"> |
| </script>* |
| |
| </head> |
| ---- |
| * O `link:http://dojotoolkit.org/reference-guide/1.6/djConfig.html[+djConfig+]` permite substituir as definições globais que controlam como o Dojo opera (por exemplo, usando a propriedade `parseOnLoad`). |
| * A propriedade `parseOnLoad` definida como `true` garante que o parse das marcações de página e dos widgets seja feito durante o carregamento da página. |
| |
| |
| . Adicione um link ao tema de exemplo`nihilo` contido no kit de ferramentas, adicionando a instrução `@import` (em negrito) a seguir entre as tags `<head>` e sob as tags `<script>` adicionadas. |
| |
| [source,xml] |
| ---- |
| |
| <script type="text/javascript"> |
| var djConfig = {parseOnLoad: true, |
| isDebug: true}; |
| </script> |
| <script |
| type="text/javascript" |
| src="resources/dojo/dojo.js"> |
| </script> |
| |
| *<style type="text/css"> |
| @import "resources/dijit/themes/nihilo/nihilo.css"; |
| </style>* |
| ---- |
| |
| O tema `nihilo` é incluído no kit de ferramenta por default. Você pode expandir a pasta `dijit/themes` na janela Projetos para ver outros temas de exemplo fornecidos por default. |
| |
| |
| |
| . Adicione o seguinte seletor de classe à tag `<body>` 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. |
| |
| [source,java] |
| ---- |
| |
| <body *class="nihilo"*> |
| ---- |
| |
| Nesse estágio, o arquivo `dojoDemo.html` 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 `nihilo` do Dojo. |
| |
| |
| == Adicionando e configurando o Widget Árvore do Dojo |
| |
| Depois do vínculo ao `dojo.js`, 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 `dijit.Tree` e o `dojo.data.ItemFileReadStore` usando instruções `link:http://docs.dojocampus.org/dojo/require[+dojo.require+]`. Em seguida, adicione os próprios widget e módulo à página. |
| |
| 1. Adicione as instruções `dojo.require` (em negrito) a seguir ao arquivo entre as tags ``<body<`` . |
| |
| [source,xml] |
| ---- |
| |
| <script type="text/javascript"> |
| |
| // TODO: add dojo.require statements here |
| *dojo.require("dojo.data.ItemFileReadStore"); |
| dojo.require("dijit.Tree");* |
| |
| </script> |
| ---- |
| * `link:http://docs.dojocampus.org/dojo/data/ItemFileReadStore[+dojo.data.ItemFileReadStore+]`: lê o conteúdo com estrutura JSON de um ponto final HTTP (em <<prepareServlet,Preparando um Servlet para Iniciar uma Resposta JSON>>, você implementará um servlet com essa finalidade) e armazena todos os itens residentes na memória para um acesso rápido e simples. |
| * `link:http://docs.dojocampus.org/dijit/Tree[+dijit.Tree+]`: o widget Árvore que fornece uma view dos dados JSON recuperados do `ItemFileReadStore`. |
| |
| |
| . Adicione o código (em negrito) a seguir para adicionar um widget `ItemFileReadStore` e `Árvore`. |
| |
| [source,html] |
| ---- |
| |
| <!-- TODO: specify AJAX retrieval --> |
| |
| <!-- TODO: add Tree widget and configure attributes --> |
| *<div dojoType="dojo.data.ItemFileReadStore" |
| url="TribeServlet" |
| jsId="indianStore"> |
| </div> |
| |
| <div dojoType="dijit.Tree" |
| store="indianStore" |
| query="{type:'region'}" |
| label="North American Indians"> |
| </div>* |
| ---- |
| * O `ItemFileReadStore` requer que você especifique a propriedade `url` indicando o recurso no servidor que retorna os dados JSON. Conforme será demonstrado posteriormente, esse é o `TribeServlet`. É possível usar essa a propriedade `jsId` para atribuir aos dados recuperados do JSON um ID que os widgets podem utilizar para consultar o armazenamento de dados. |
| * A `Árvore` usa a propriedade `store` para indicar o `ItemFileReadStore` que fornece os dados JSON. A propriedade `query` permite que a organização da view dos dados, com base em uma palavra-chave usada no arquivo JSON. |
| |
| *Observação.* Você pode ignorar as advertências que são exibidas no editor após adicionar este código. |
| |
| Neste estágio, o arquivo `dojoDemo.html` estará concluído e todas as modificações do _cliente_ no projeto já estarão em vigor. Nas duas etapas a seguir, você fará alterações que afetarão o comportamento _por parte do servidor_ do projeto quando forem feitas solicitações da Árvore. |
| |
| |
| |
| == Adicionando Códigos-Fonte de Conversão JSON de Terceiros como um Arquivo JAR ao Projeto |
| |
| Neste tutorial, a lógica que extrai os dados de amostra da ArrayList foi preparada para você nas classes `Tribe` e `TribeDataManager`. 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 `import` para essas classes nas classes `Tribe` e `TribeDataManager`. 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. |
| |
| 1. Visite link:http://json.org/java[+http://json.org/java+] 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 `JSON-java-master.zip` que contém os códigos-fontes. |
| 2. Descompacte o arquivo `JSON-java-master.zip` e observe que a pasta extraída contém os códigos-fontes listados em link:http://json.org/java[+http://json.org/java+]. |
| |
| Neste momento, compile esses códigos-fontes e crie um arquivo compactado JAR (arquivo Java) que possa ser adicionado ao projeto `DojoTreeSample`. |
| |
| |
| |
| . Clique no botão Novo Projeto (image:images/new-project-btn.png[]) na barra de ferramentas para abrir o assistente do Novo Projeto. |
| |
| |
| . No assistente do Novo Projeto, selecione o tipo de projeto de Bibliotecas de Classes Java na categoria Java. Clique em Próximo. |
| |
| |
| . No painel Nome e Local do assistente da Biblioteca de Classes Java, digite *`json`* como Nome do Projeto. Clique em Finalizar. |
| |
| Quando você clicar em Finalizar, o novo projeto será criado e aberto na janela Projetos. |
| |
| Agora, você precisa copiar os códigos-fontes JSON que obteve por download para o projeto ``json`` da mesma forma que copiou os recursos do kit de ferramentas Dojo no projeto ``DojoTreeSample`` . |
| |
| |
| |
| . Extraia o archive `JSON-java-master.zip` e copie (Ctrl-C; ⌘-C no Mac) os arquivos de código-fonte Java que estão na pasta-raiz. |
| |
| *Observação.* Não é necessário copiar a pasta `zip` e seu conteúdo que também se encontra na pasta-raiz do archive extraído. |
| |
| |
| |
| . 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. |
| |
| |
| . Digite *json* como Nome do Pacote. Clique em Finalizar. |
| |
| |
| . Clique com o botão direito do mouse no pacote de código-fonte `json` e escolha Colar no menu pop-up. |
| |
| Ao expandir o pacote, você verá os códigos-fonte ``json`` . |
| |
| image::images/proj-win-json-sources.png[title="Agora, os códigos-fonte estão contidos no novo projeto 'json'"] |
| |
| |
| . Clique com o botão direito do mouse no nó do projeto `json` na janela Projetos e escolha Limpar e Compilar para compilar o projeto. |
| |
| Quando você cria o projeto, todas as classes Java são criadas nos arquivos `.class`. O IDE cria uma pasta `build` que contém as classes criadas, bem como a pasta `dist` que contém um arquivo JAR para o projeto. Essas pastas podem ser exibidas na janela Arquivos do IDE. |
| |
| Após compilar o projeto `json`, abra a janela Arquivos (Ctrl-2; ⌘-2 no Mac) e expanda a pasta `json`. A pasta `build` contém os códigos-fontes criados do arquivo `JSON-java-master.zip`, e a pasta `dist` contém o arquivo JAR que o projeto `DojoTreeSample` precisa como referência. |
| |
| image::images/files-win-compiled-classes.png[title="Os códigos-fonte criados podem ser exibidos em uma pasta 'build' do projeto"] |
| |
| Agora que o arquivo `json.jar` existe, é possível solucionar os problemas de referência que o projeto `DojoTreeSample` vem exibindo desde que foi aberto. |
| |
| |
| |
| . Na janela Projetos, clique com o botão direito no nó das Bibliotecas do `DojoTreeSample` e selecione Adicionar JAR/Pasta. Em seguida, na caixa de diálogo, vá até o local da pasta `dist` do projeto `json` e selecione o arquivo `json.jar`. |
| |
| 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 `json` na caixa de diálogo Adicionar Projeto. |
| |
| Quando você sai da caixa de diálogo, o arquivo `json.jar` é listado no nó `Libraries` do projeto. |
| |
| image::images/libraries-json-jar.png[title="O arquivo jar é referenciado pelo Projeto"] |
| |
| *Observação: *Mesmo que o arquivo `json.jar` esteja listado no nó `Libraries` 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 `DojoTreeSample` da janela Arquivos). Por isso, se você alterar o local do arquivo JAR, a referência será interrompida. |
| |
| |
| |
| . Expanda o pacote `Source Packages` > `dojo.indians` e clique duas vezes nas classes `Tribe` e `TribeDataManager` para abri-las no editor. |
| |
| |
| . 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. |
| |
| A classe `Tribe` exige as seguintes importações: |
| |
| [source,java] |
| ---- |
| |
| import dojo.org.json.JSONException; |
| import dojo.org.json.JSONObject; |
| ---- |
| A classe `TribeDataManager` requer as seguintes importações: |
| |
| [source,java] |
| ---- |
| |
| import dojo.org.json.JSONArray; |
| import dojo.org.json.JSONException; |
| import dojo.org.json.JSONObject; |
| ---- |
| |
| Observe que as APIs para as classes JSON também são fornecidas em link:http://json.org/java[+http://json.org/java+] - você pode manter esta página aberta ao examinar posteriormente o código em `Tribe` e `TribeDataManager`. |
| |
| |
| |
| . Examine a ArrayList em `TribeDataManager`. A ArrayList é uma coleção de objetos da `Tribe`. Observando o primeiro elemento da ArrayList, é possível ver um novo objeto criado da `Tribe` e adicionado à lista: |
| |
| [source,java] |
| ---- |
| |
| indians.add(new Tribe("Eskimo-Aleut", "Arctic", "Alaska Natives")); |
| ---- |
| Cada objeto da `Tribe` captura três pontos de informação: _tribo_, _categoria_ e _região_. Os dados para este exercício foram retirados da entrada da Wikipédia em link:http://en.wikipedia.org/wiki/Native_Americans_in_the_United_States#Ethno-linguistic_classification[+Native Americans in the United States+]. Como você pode determinar, várias _tribos_ são classificadas em uma _categoria_ e diversas categorias podem estar contidas em uma grande _região_. |
| |
| |
| . Abra a classe `Tribe` no editor e observe que ela é basicamente um link:http://java.sun.com/docs/books/tutorial/javabeans/index.html[+JavaBean+], com exceção do método `toJSONObject()`: |
| |
| [source,java] |
| ---- |
| |
| public JSONObject toJSONObject() throws JSONException { |
| JSONObject jo = new JSONObject(); |
| jo.put("name", this.name); |
| jo.put("type", "tribe"); |
| |
| return jo; |
| } |
| ---- |
| |
| |
| . Retorne ao `TribeDataManager` (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. |
| |
| image::images/dojo-navigator.png[title="Utilizar o Navigator para exibir os campos e propriedades da classe"] |
| |
| O método mais significativo contido é `getIndiansAsJSONObject()`. Esse método analisa a ArrayList, processa os dados e os retorna no formato de um `JSONObject`. O formato de `String` do JSONObject é o exigido pelo `ItemFileReadStore` do Dojo. |
| |
| [source,java] |
| ---- |
| |
| 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; |
| } |
| ---- |
| |
| |
| . Abra o Javadoc no método `getIndiansAsJSONObject()`. É 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. |
| |
| image::images/javadoc-window.png[title="O Javadoc para TribeDataManager fornece um exemplo de dados JSON"] |
| |
| |
| . Examine o exemplo de dados JSON fornecidos no Javadoc. Observe que o formato dos dados está de acordo com os exemplos fornecidos na link: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+]. |
| |
| |
| === Depurador Java do NetBeans IDE |
| |
| Na próxima etapa, você implementará um servlet que chama o método `getIndiansAsJSONObject()`. 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 `JSONObject` é formado. |
| |
| 1. Defina um ponto de interrupção no método (clique no número da linha, por exemplo, linha 99, na margem esquerda do editor). |
| |
| image::images/debugger-breakpoint.png[title="Usar o Depurador Java para a etapa por meio de código"] |
| |
| |
| . Selecione o projeto ``DojoTreeSample`` na janela Projetos. |
| |
| |
| . Execute o depurador (clique no botão Depurar Projeto (image:images/debug-btn.png[] ) da barra de ferramentas). |
| |
| |
| . Use os botões Fazer Step Into (image:images/step-into-btn.png[]) e Fazer Step Over (image:images/step-over-btn.png[]) da barra de ferramentas. |
| |
| |
| . Examine os valores da variável e da expressão na janela Variáveis Locais (Janela > Depuração > Variáveis). |
| |
| Para obter mais informações sobre o Depurador Java, consulte os seguintes screencasts: |
| |
| * link:../java/debug-stepinto-screencast.html[+Ação Visual Step Into no Depurador do NetBeans+] |
| * link:../java/debug-deadlock-screencast.html[+Detecção de Bloqueio Usando o Depurador do NetBeans+] |
| * link:../java/debug-evaluator-screencast.html[+Usando o Avaliador do Snippet do Código no Depurador do NetBeans+] |
| |
| |
| Nesta etapa, os códigos-fonte de terceiros foram compilados em link:http://json.org[+http://json.org+] e adicionados como um arquivo JAR ao projeto `DojoTreeSample`. As instruções de importação foram adicionadas às classes do arquivo JAR nas classes `Tribe` e `TribeDataManager`. Finalmente, alguns dos métodos contidos na `TribeDataManager`, que são usados para converter os dados da ArrayList em uma sequência JSON, foram examinados. |
| |
| Na etapa seguinte, você criará um servlet que manipula solicitações de entrada ao chamar o método `getIndiansAsJSONObject()` da `TribeDataManager` e enviará a sequência de caracteres JSON resultante como resposta ao cliente. |
| |
| |
| |
| == Preparando um Servlet para Iniciar uma Resposta JSON |
| |
| <<TribeServlet,Lembre-se de que você especificou '`TribeServlet`' como o valor para a propriedade>> `url` ao adicionar o `ItemFileReadStore` à 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. |
| |
| 1. Na janela Projetos, clique com o botão direito do mouse no pacote de código-fonte `dojo.indians` e selecione Novo > Servlet. |
| 2. Na caixa de diálogo Novo Servlet, digite *`TribeServlet`* como o nome da classe. Confirme se `dojo.indians` foi especificado como o pacote. Clique em Próximo. |
| |
| image::images/new-servlet-wizard.png[title="Utilizar o assistente de Novo Servlet para criar servlets"] |
| |
| |
| . 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. |
| |
| A função do servlet é chamar o método `getIndiansAsJSONObject()` 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. |
| |
| *Observação.* O assistente adicionará automaticamente o nome do servlet e o padrão de URL ao arquivo `web.xml`. Consequentemente, as solicitações ao domínio host (`http://localhost:8080/DojoTreeSample/`) pelo `TribeServlet` serão manipuladas pela classe `dojo.indians.TribeServlet`. Se você abrir `web.xml` no editor, verá que o arquivo agora contém os elementos `<servlet>` e `<servlet-mapping>`. |
| |
| |
| |
| . Modifique o método `processRequest()` fazendo as seguintes alterações (em negrito): |
| |
| [source,java] |
| ---- |
| |
| response.setContentType("*application/json*"); |
| ---- |
| |
| Isso altera o cabeçalho `Content-Type` da Resposta HTTP para indicar que qualquer conteúdo retornado está em um formato JSON. |
| |
| |
| |
| . Substitua o código comentado no bloco `try` do método `processRequest()` pelo seguinte (alterações em *negrito*): |
| |
| [source,java] |
| ---- |
| |
| try { |
| |
| *JSONObject jo = null; |
| try { |
| jo = TribeDataManager.getIndiansAsJSONObject(); |
| } catch (JSONException ex) { |
| System.out.println("Unable to get JSONObject: " + ex.getMessage()); |
| } |
| |
| out.println(jo);* |
| |
| } finally { |
| out.close(); |
| } |
| ---- |
| |
| Para reformatar o código, clique com o botão direito do mouse no editor e selecione Formatar. |
| |
| |
| |
| . Utilize as dicas do IDE para adicionar as instruções de importação a seguir. |
| |
| [source,java] |
| ---- |
| |
| import dojo.org.json.JSONException; |
| import dojo.org.json.JSONObject; |
| ---- |
| |
| |
| . Para executar o projeto, selecione o nó do projeto `DojoTreeSample` na janela Projetos e, em seguida, clique no botão Executar Projeto (image:images/run-project-btn.png[]) na barra de ferramentas do IDE. |
| |
| O browser será aberto e exibirá uma página de boas-vindas (`dojoDemo.html`), e você poderá ver que o widget Árvore do Dojo exibirá dados da ArrayList corretamente, como na <<final,captura de tela acima>>. |
| link:/about/contact_form.html?to=3&subject=Feedback:%20Connecting%20a%20Dojo%20Tree%20to%20an%20ArrayList[+Envie-nos Seu Feedback+] |
| |
| |
| |
| == Consulte Também |
| |
| Para obter mais informações sobre o Dojo, consulte a documentação oficial: |
| |
| * Guia de Referência do Kit de Ferramentas do Dojo: link:http://dojotoolkit.org/reference-guide/[+Guia de referência+] |
| * Referência On-line da API: link:http://api.dojotoolkit.org/[+http://api.dojotoolkit.org/+] |
| * Demonstração do Dojo: link:http://demos.dojotoolkit.org/demos/[+http://demos.dojotoolkit.org/demos/+] |
| |
| Para obter mais informações sobre o JavaScript e as funcionalidades do kit de ferramentas do JavaScript em link:https://netbeans.org/[+netbeans.org+], consulte os seguintes recursos: |
| |
| * link:js-toolkits-jquery.html[+Usando jQuery para Melhorar a Aparência e o Uso de uma Página Web+]. 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. |
| * link:ajax-quickstart.html[+Introdução ao Ajax (Java)+]. 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. |
| * link:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG2272[+Criando Arquivos JavaScript+] em _Desenvolvendo Aplicações com o NetBeans IDE_ |
