// 
//     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 
_ _ 

[start=7]
.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.


[start=4]
. 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.


[start=5]
. 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.

[start=3]
. 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.


[start=4]
. 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`.

[start=2]
. 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`.


[start=3]
. Clique no botão Novo Projeto (image:images/new-project-btn.png[]) na barra de ferramentas para abrir o assistente do Novo Projeto.

[start=4]
. No assistente do Novo Projeto, selecione o tipo de projeto de Bibliotecas de Classes Java na categoria Java. Clique em Próximo.

[start=5]
. 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`` .


[start=6]
. 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.


[start=7]
. 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.

[start=8]
. Digite *json* como Nome do Pacote. Clique em Finalizar.

[start=9]
. 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'"]

[start=10]
. 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.


[start=11]
. 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.


[start=12]
. Expanda o pacote `Source Packages` > `dojo.indians` e clique duas vezes nas classes `Tribe` e `TribeDataManager` para abri-las no editor.

[start=13]
. 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`.


[start=14]
. 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_.

[start=15]
. 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;
}
----

[start=16]
. 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;
}
----

[start=17]
. 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"]

[start=18]
. 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"]

[start=2]
. Selecione o projeto  ``DojoTreeSample``  na janela Projetos.

[start=3]
. Execute o depurador (clique no botão Depurar Projeto (image:images/debug-btn.png[] ) da barra de ferramentas).

[start=4]
. 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.

[start=5]
. 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"]

[start=3]
. 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>`.


[start=4]
. 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.


[start=5]
. 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.


[start=6]
. 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;
----

[start=7]
. 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_