O site do DWR é completo e possui extensa documentação, que é a base deste artigo. Alguns exemplos são fornecidos para mostrar como o DWR é usado e que tipo detrabalho pode ser realizado com suas bibliotecas.
Este artigo permite que os leitores vejam como um aplicativo da web usando DWR é construído passo a passo. Mostrarei os detalhes necessários para criar este aplicativo de amostra simples, que pode ser baixado e implantado em seu ambiente para ver como o DWR funciona.
NOTA: Não é difícil encontrar informações sobre javascript :void(0);">AJAX; existem vários artigos e entradas de blog na web cobrindo esse tópico, cada um tentando apontar e comentar um aspecto diferente do conceito. Na seção de recursos você encontrará alguns links interessantes para exemplos e artigos para aprender mais sobre javascript :void(0);">AJAX.
Aplicativo de exemplo
O aplicativo de exemplo usado neste artigo simula um mecanismo de busca de aluguel de apartamentos em Toronto. Os usuários podem selecionar um conjunto de critérios de pesquisa antes de pesquisar. Para melhorar a interatividade, javascript :void(0);">AJAX é usado nas duas situações a seguir:
·A aplicação informa ao usuário quantos resultados de pesquisa serão retornados com base em suas seleções. Este número é atualizado em tempo real - usando javascript :void(0);">AJAX - quando o número de quartos e banheiros selecionados pelo usuário, ou a faixa de preço muda. Quando não há ou há muitos resultados de pesquisa que correspondam aos critérios , o usuário não precisa clicar no botão de pesquisa.
· A consulta ao banco de dados e recuperação dos resultados é feita por javascript :void(0);">AJAX. Quando o usuário pressiona o botão mostrar resultados, o banco de dados realiza a busca. Desta forma, a aplicação parece mais responsiva, e todo o a página não precisa estar sobrecarregada para exibir os resultados.
Banco de Dados
O banco de dados que usamos é o HSQL, que é um mecanismo de banco de dados Java SQL que ocupa poucos recursos e pode ser empacotado com aplicações Web seminstalação e configuração. Um arquivo SQL é usado para criar uma tabela na memória e adicionar alguns registros quando o contexto do aplicativo web é iniciado.
A aplicação de classe Java contém duas classes principais chamadas Apartment e ApartmentDAO. A classe Apartment.java é uma classe Java simples com propriedades e métodos getter/setter. ApartmentDAO.java é a classe de acesso a dados utilizada para consultar o banco de dados e retornar informações com base nos critérios de pesquisa do usuário. A implementação da classe ApartmentDAO é simples; ela usa chamadas de conexão de banco de dados Java diretamente para obter o número total de apartamentos e a lista de apartamentos disponíveis que correspondem à solicitação do usuário.
Configuração e uso do DWR
Configurar o uso do DWR é simples: copie o arquivo jar do DWR no diretório WEB-INF/lib da aplicação web, adicione uma declaração de servlet em web.xml e crie o arquivo de configuração do DWR. Um arquivo jar separado é necessário para a distribuição do DWR. Você deve incluir o servlet DWR na seção do descritor de implementação no WEB-INF/web.xml do seu aplicativo.
dwr-invoker
Servlet DWR
Servlet remoto direto da Web
uk.ltd.getahead.dwr.DWRServlet
depurar
verdadeiro
dwr-invoker
/dwr/*
Uma etapa opcional é definir o DWR para o modo de depuração - como no exemplo acima - definindo o parâmetro debug como true na seção de descrição do servlet. Quando o DWR está no modo de depuração, você pode ver todos os objetos Java acessíveis na página HTML. Uma página web contendo uma lista de objetos disponíveis aparecerá na URL /WEBAPP/dwr, que exibe os métodos públicos do objeto. Os métodos listados podem ser chamados a partir da página, permitindo, pela primeira vez, executar métodos em objetos no servidor. A imagem a seguir mostra a aparência da página de depuração:
Página de depuração
Agora você deve informar ao DWR qual objeto receberá a solicitação por meio do objeto XMLHttpRequest. Esta tarefa é realizada por um arquivo de configuração chamado dwr.xml. No arquivo de configuração, você define os objetos que o DWR permite chamar da página da web. Por design, o DWR permite acesso a todos os métodos públicos de uma classe publicada, mas no nosso caso permitimos acesso apenas a alguns métodos. Aqui está o arquivo de configuração do nosso exemplo:
O arquivo acima atinge ambos os objetivos em nosso exemplo. Primeiro, a tag informa ao DWR para converter o tipo do objeto dwr.sample.Apartment em um array associativo, porque, por motivos de segurança, o DWR não converte beans comuns por padrão. Em segundo lugar, a tag permite que o DWR exponha a classe dwr.sample.ApartmentDAO para chamadas JavaScript; os arquivos JavaScript que usamos na página são definidos pelo atributo javascript; Devemos ficar atentos à tag , que especifica quais métodos da classe dwr.sample.ApartmentDAO estão disponíveis.
Após o código HTML/JSP
ser configurado, você pode iniciar seu aplicativo Web. Neste momento, o DWR estará pronto para chamar os métodos necessários de sua página do lado do servidor HTML ou Java (JSP). Você cria arquivos JavaScript. No arquivo search.jsp, devemos adicionar a interface JavaScript fornecida pelo DWR, bem como o mecanismo DWR, e adicionar as três linhas a seguir ao nossocódigo :
Observamos que quando o usuário altera os critérios de pesquisa, esta é a primeira aplicação de javascript :void(0);">AJAX no programa de exemplo; como ele veja, o número de apartamentos disponíveis é atualizado quando os critérios mudam. Criei duas funções JavaScript: A função ApartmentDAO.countApartments() é a parte mais interessante é o primeiro parâmetro, a função loadTotal(), que especifica o método JavaScript. O DWR chamará ao receber uma resposta do servidor. loadTotal é então chamado para exibir os resultados no da página HTML usada em cenários interativos:
function updateTotal() {.
$("tabelaresultados").style.display = 'nenhum';
var quartos = document.getElementById("quartos").value;
var banheiros = document.getElementById("banheiros").value;
var preço = document.getElementById("preço").valor;
ApartmentDAO.countApartments(loadTotal, quartos, banheiros, preço);
}
função carregarTotal(dados) {
document.getElementById("totalRecords").innerHTML = dados;
}
Obviamente, o usuário deseja ver anúncios de apartamentos que correspondam aos seus critérios de pesquisa. Então, quando o usuário estiver satisfeito com seus critérios de pesquisa e os totais forem válidos, ele pressiona o botão que exibe os resultados, que chama o método JavaScript updateResults():
function updateResults() {
DWRUtil.removeAllRows("corpodeapartamentos");
var quartos = document.getElementById("quartos").value;
var banheiros = document.getElementById("banheiros").value;
var preço = document.getElementById("preço").valor;
ApartamentoDAO.findApartments(fillTable, quartos, banheiros, preço);
$("tabelaresultados").style.display = '';
}
function preencherTabela(apartamento) {
DWRUtil.addRows("apartmentsbody", apartamento, [ getId, getAddress, getBedrooms, getBathrooms, getPrice ]);
}
O método updateResults() limpa o campo da tabela que armazena os resultados retornados da pesquisa, obtém os parâmetros necessários da interface do usuário e passa esses parâmetros para o objeto ApartmentDAO criado pelo DWR. Em seguida, a consulta ao banco de dados será executada e fillTable() será chamado, que analisa o objeto retornado pelo DWR (apartments) e o exibe na página (apartmentsbody).
Fatores de Segurança
Para manter o exemplo breve, a classe ApartmentDAO é mantida tão simples quanto possível, mas tal classe geralmente possui um conjunto de métodos definidos para manipular dados, como insert(), update() e delete(). DWR expõe todos os métodos públicos a serem chamados por todas as páginas HTML. Por razões de segurança, não é aconselhável expor a sua camada de acesso a dados desta forma. Os desenvolvedores podem criar uma fachada que centralize a comunicação entre todas as funções JavaScript e os componentes de negócios subjacentes, limitando assim a exposição excessiva da funcionalidade.
Conclusão
Este artigo é apenas o começo para você usar javascript baseado em DWR :void(0);">AJAX em seus projetos. O DWR permite que você se concentre em como melhorar o modelo de interação de sua aplicação. , eliminando o responsabilidade de escrever e depurar código JavaScript O desafio mais interessante com javascript :void(0);">AJAX é definir onde e como melhorar a usabilidade. O DWR é responsável por operar a comunicação entre a página Web e seus objetos Java, ajudando assim você a se concentrar inteiramente em como tornar a interface de usuário do seu aplicativo mais amigável.
Gostaria de agradecer ao Mircea Oancea e ao Marcos Pereira, que leram este artigo e deram um feedback muito valioso.
Recursos ·javaworld.com:javaworld.com
·Comunidade de desenvolvedores Matrix-Java: http://www.matrix.org.cn/
·onjava.com:onjava.com
· Baixe todo o código-fonte do programa de amostra: http://www.javaworld.com/javaworld/jw-06-2005/dwr/jw-0620-dwr.war
·DWR: http://www.getahead.ltd.uk/dwr/index.html
·HSQL: http://hsqldb.sourceforge.net/
·javascript :void(0);">Definição de AJAX: http://en.wikipedia.org/wiki/javascript :void(0);">AJAX
· "javascript :void(0);">AJAX: Um Novo Caminho para Aplicações Web": Jesse James Garrett (Adaptive Path, 2005.2): http://www.adaptivepath.com/publications/essays/archives/000385. php
· “Uma interface web muito dinâmica” Drew McLellan (xml.com, 2005.2): http://www.xml.com/pub/a/2005/02/09/xml-http-request.html
·XMLHttpRequest & javascript :void(0);">Exemplo de trabalho AJAX: http://www.fiftyfoureleven.com/resources/programming/xmlhttprequest/examples
· “Práticas Utilizáveis de XMLHttpRequest” Thomas Baekdal (Baekdal.com, 2005.3): http://www.baekdal.com/articles/Usability/usable-XMLHttpRequest/
·"Diretrizes de uso de XMLHttpRequest" Thomas Baekdal (Baekdal.com, 2005.2): http://www.baekdal.com/articles/Usability/XMLHttpRequest-guidelines/