Conectando uma Árvore do Dojo a uma ArrayList utilizando o formato JSON

This tutorial needs a review. You can open a JIRA issue, or edit it in GitHub following these contribution guidelines.

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 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 Java One Hands-On Lab: Leveraging JavaScript Toolkits for End-to-End Connectivity in Web Applications e demonstra como adicionar e configurar um 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 http://json.org para processar dados de uma ArrayList no formato JSON.

netbeans stamp 80 74 73
Figure 1. 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

NetBeans IDE

Java EE 7.2, 7.3, 7.4, 8.0

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

Kit de ferramentas do Dojo

versão 1.8.x ou posterior

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:

dojo tree complete
Figure 2. 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 Amostra do projeto do Dojo em algum local no seu computador.

  2. Clique no botão Abrir Projeto ( open project btn ) 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.

proj win ref problems
Figure 3. 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 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.

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

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

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

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

proj win dojo resources
Figure 4. 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.

dojo add server
Figure 5. 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>.

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

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

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

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

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

<script type="text/javascript">

    // TODO: add dojo.require statements here
    *dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dijit.Tree");*

</script>

  • dojo.data.ItemFileReadStore: lê o conteúdo com estrutura JSON de um ponto final HTTP (em 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.

  • dijit.Tree: o widget Árvore que fornece uma view dos dados JSON recuperados do ItemFileReadStore.

    1. Adicione o código (em negrito) a seguir para adicionar um widget ItemFileReadStore e Árvore.

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

  1. Clique no botão Novo Projeto (new project btn) na barra de ferramentas para abrir o assistente do Novo Projeto.

  2. No assistente do Novo Projeto, selecione o tipo de projeto de Bibliotecas de Classes Java na categoria Java. Clique em Próximo.

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

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

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

  2. Digite json como Nome do Pacote. Clique em Finalizar.

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

proj win json sources
Figure 6. Agora, os códigos-fonte estão contidos no novo projeto 'json'

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

files win compiled classes
Figure 7. 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.

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

libraries json jar
Figure 8. 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.

  1. Expanda o pacote Source Packages > dojo.indians e clique duas vezes nas classes Tribe e TribeDataManager para abri-las no editor.

  2. 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:

import dojo.org.json.JSONException;
import dojo.org.json.JSONObject;

A classe TribeDataManager requer as seguintes importações:

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 http://json.org/java - você pode manter esta página aberta ao examinar posteriormente o código em Tribe e TribeDataManager.

  1. 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:

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

  1. Abra a classe Tribe no editor e observe que ela é basicamente um JavaBean, com exceção do método toJSONObject():

public JSONObject toJSONObject() throws JSONException {
    JSONObject jo = new JSONObject();
    jo.put("name", this.name);
    jo.put("type", "tribe");

    return jo;
}

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

dojo navigator
Figure 9. 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.

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;
}

  1. 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"]

  2. Examine o exemplo de dados JSON fornecidos no Javadoc. Observe que o formato dos dados está de acordo com os exemplos fornecidos na 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).

debugger breakpoint
Figure 10. Usar o Depurador Java para a etapa por meio de código

  1. Selecione o projeto DojoTreeSample na janela Projetos.

  2. Execute o depurador (clique no botão Depurar Projeto (debug btn ) da barra de ferramentas).

  3. Use os botões Fazer Step Into (step into btn) e Fazer Step Over (step over btn) da barra de ferramentas.

  4. 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:

Nesta etapa, os códigos-fonte de terceiros foram compilados em 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

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.

new servlet wizard
Figure 11. Utilizar o assistente de Novo Servlet para criar servlets

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

  1. Modifique o método processRequest() fazendo as seguintes alterações (em negrito):

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.

  1. Substitua o código comentado no bloco try do método processRequest() pelo seguinte (alterações em negrito):

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.

  1. Utilize as dicas do IDE para adicionar as instruções de importação a seguir.

import dojo.org.json.JSONException;
import dojo.org.json.JSONObject;

  1. Para executar o projeto, selecione o nó do projeto DojoTreeSample na janela Projetos e, em seguida, clique no botão Executar Projeto (run project btn) 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 captura de tela acima. Envie-nos Seu Feedback

Consulte Também

Para obter mais informações sobre o Dojo, consulte a documentação oficial:

Para obter mais informações sobre o JavaScript e as funcionalidades do kit de ferramentas do JavaScript em netbeans.org, consulte os seguintes recursos: