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 de hoje em dia. Uma das funcionalidades em ascensão é o uso de 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.

O conteúdo desta página se aplica ao NetBeans IDE 6.7 a 7.1

Conteúdo

Para concluir este documento, você precisa dos recursos e softwares a seguir:

Software ou Recurso Versão Necessária
NetBeans IDE, pacote Java EE 6.7 ou superior
Java Development Kit (JDK) 6 ou 7
GlassFish Server
ou
Contêiner do servlet Tomcat
Open Source Edition 3.1.x
 
6.x ou 7.x
Kit de ferramentas do Dojo versão 1.2.x ou mais recente
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 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.
  • É 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 Core do Dojo e Dijit. 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.
  • O projeto concluído tem a seguinte aparência:
    Exercício concluído exibido no browser

Adicionando um Kit de Ferramentas do Dojo em um Projeto NetBeans

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:

  1. Faça o download da Amostra do projeto do Dojo em algum local no seu computador.
  2. Inicie o NetBeans e clique no botão Abrir Projeto ( Botão Abrir Projeto ) na barra de ferramentas do IDE.
  3. 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.

    Quando você abre o projeto DojoTreeSample no IDE, ele é exibido inicialmente em um texto vermelho com um badge de erro, indicando que um problema de referência existe:
    A janela Projetos exibindo o projeto DojoTreeSample em texto vermelho e com um badge de erro
    O problema de referência existe porque as classes Java usadas no projeto (Tribe e TribeDataManager) fazem referência às classes encontradas no arquivo JAR JSON, que você adicionará posteriormente na seção Adicionando os Arquivos JAR JSON ao Projeto.
  4. 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ó Páginas Web na janela Projetos e selecione Nova > Pasta. Na caixa de diálogo Nova Pasta, digite “recursos” no campo Nome da Pasta. Observe que a palavra “web” é inserida por default no campo Pasta Pai. Clique em Finalizar para criar a nova pasta e veja se agora ela está listada no nó Páginas Web na janela Projetos.

    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. Na caixa de diálogo Nova Pasta desta etapa, a palavra “web” é inserida por default no campo Pasta Pai ao criar um novo item a partir do nó Páginas Web. Se você abrir a janela Arquivos, nesse momento, você verá a nova pasta recursos listada no diretório Web.
  5. Obtenha uma cópia do Kit de ferramentas do Dojo (versão 1.2.x ou mais recente). É possível fazer download do kit de ferramentas do Dojo em http://www.dojotoolkit.org/downloads.

    Observe que a versão atual do kit de ferramentas do Dojo inclui as bibliotecas Core do Dojo, Dijit e DojoX. 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.
  6. 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 recursos e selecione Colar (ou simplesmente selecione o nó recursos e pressione (Ctrl-V; ⌘-V no Mac).

    Lembre-se de que somente as bibliotecas Core do Dojo e Dijit são necessárias, então, caso você tenha feito o download de uma cópia recente do kit de ferramentas, observe que não será necessário adicionar a biblioteca DojoX ao projeto.

    Após ter adicionado as bibliotecas Core do Dojo e Dijit, a janela Projetos deverá ter a seguinte aparência:
    Janela Projetos exibindo as recursos do Dojo

Neste estágio, o projeto DojoTreeSample 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.


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, substitua o
    <!-- TODO: link to Dojo resources here -->
    comentário pelas seguintes tags <script>:
    <script type="text/javascript"
        src="resources/dojo/dojo.js"
        djConfig="parseOnLoad: true">
    </script>
    • 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.
  3. Link para um exemplo de tema contido no kit de ferramentas. A Dijit oferece três exemplos de tema: tundra, soria e nihilo. Esses temas estão contidos na pasta dijit/themes, que você pode verificar na janela Projetos:
    As pastas de tema Dijit exibidas na janela Projetos
    Para vincular ao tema nihilo, adicione a seguinte instrução @import à página. Você pode adicioná-la entre as tags <head> da página, por exemplo, logo abaixo das tags <script> que foram adicionadas (alterações em negrito):
    <script type="text/javascript"
        src="resources/dojo/dojo.js"
        djConfig="parseOnLoad: true">
    </script>
    
    <style type="text/css">
        @import "resources/dijit/themes/nihilo/nihilo.css";
    </style>
  4. Adicione uma classe à tag <body> 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.
    <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

Uma vez vinculado 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. Substitua o
    // TODO: add dojo.require statements here
    comentário (linha 8) pelas seguintes instruções dojo.require:
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dijit.Tree");
  2. Adicione um ItemFileReadStore e um widget Árvore à página. Substitua o
    <!-- TODO: specify AJAX retrieval -->
    
    <!-- TODO: add Tree widget and configure attributes -->
    comentários pelo seguinte:
    <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.

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.zip que contém os códigos-fonte.
  2. Descompacte o arquivo json.zip e observe que a pasta extraída contém os códigos-fonte listados em http://json.org/java.

    Neste momento, é necessário compilar esses códigos-fonte e criar um arquivo compactado JAR (arquivo Java) que possa ser adicionado ao projeto DojoTreeSample.
  3. Na barra de ferramentas principal do IDE, clique no botão Novo Projeto ( Botão Novo Projeto ).
  4. No assistente exibido, selecione Java em Categorias e selecione Biblioteca de Classe Java em Projetos e, em seguida, clique em Próximo.
  5. No painel Nome e Localização do assistente de biblioteca de Classe Java, nomeie o novo projeto como “json” e, em seguida, clique em Finalizar. O novo projeto será criado e aberto na janela Projetos.

    Da mesma forma que os recursos do kit de ferramentas do Dojo foram copiadas e coladas na pasta recursos na janela Projetos do IDE, copie os códigos-fonte baixados e cole-os diretamente no novo projeto json.
  6. Vá para o local no computador onde o arquivo json.zip extraído se encontra e copie (Ctrl-C; ⌘-C no Mac) a pasta json. A pasta json contém os arquivos de origem.
  7. Na janela Projetos do IDE, clique com o botão direito do mouse no nó <default package> do projeto json e selecione Colar.

    Quando você faz isso, “json” passa a ser o nome do pacote e todos os códigos-fonte são listados ali.
    Janela Projetos - os códigos-fonte contidos no projeto 'json'
  8. Construa o projeto json. Para fazer isso, clique com o botão direito do mouse no nó json do projeto na janela Projetos e selecione Limpar e Construir.

    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 criar 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-fonte criados do arquivo json.zip, e a pasta dist contém o arquivo JAR que o projeto DojoTreeSample precisa como referência.
    Janela Arquivos - códigos-fonte criados mostrados na pasta 'build'
    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.
  9. 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.

    Quando você sai da caixa de diálogo, o arquivo json.jar é listado no nó Libraries do projeto.
    Janela Projetos - o arquivo JAR adicionado ao nó Libraries
    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.
  10. Expanda o pacote Source Packages > dojo.indians e clique duas vezes nas classes Tribe e TribeDataManager para abri-las no editor.
  11. 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.

  12. 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.
  13. 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;
    }
  14. 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.
    A classe TribeDataManager exibida no Navigator
    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;
    }
  15. 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.
    Janela Javadoc aberta para a classe TribeDataManager
  16. 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.


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. Além disso, crie o servlet no pacote dojo.indians.
    Assistente de Novo servlet

    Clique em Próximo.
  3. 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 web.xml. Consequentemente, as solicitações ao domínio host (http://localhost:8080/DojoTreeSample/) pelo TribeServlet serão manipuladas pela classe dojo.indians.TribeServlet.
  4. Clique em Finalizar. Uma classe de esqueleto será gerada para o novo servlet e aberta no editor.

    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.
  5. Localize o método processRequest() e altere
    response.setContentType("text/html;charset=UTF-8");
    para:
    response.setContentType("application/json");
    Isso define o cabeçalho Content-Type da Resposta HTTP para indicar que qualquer conteúdo retornado está em um formato JSON.
  6. 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.

  7. Utilize as dicas do IDE para adicionar as instruções de importação necessárias. São elas:
    import dojo.org.json.JSONException;
    import dojo.org.json.JSONObject;
  8. Para executar o projeto, selecione o nó do projeto DojoTreeSample na janela Projetos e, em seguida, clique no botão Executar Projeto (Botão Executar o Projeto Principal) 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.

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:

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2018, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo