DWR – Directed Web Remoting – Parte I.II

Explicando as tags

1. Allow<allow>: Esta tag é onde você define qual classe você vai mapear para o JS.
2. Create<create>:  Nesta tag você vai definir o tipo de creator(new, session, struts, spring e etc) e o nome do objeto JavaScript.
   1. creator – Tipo de creator do Objeto JS/Java.
   2. javascript – Nome do Objeto JS/Java.
3. Param<param>: É onde você especifica a classe que você quer utilizar.
   1. name – Tipo.
   2. value – Endereço completo da sua Classe.
4. Convert<convert>: Nessa tag você define quem serão os seus beans.
   1. converter – Tipo.
   2. Match – Endereço completo do pacote do seu bean ou o próprio bean.

Inicie novamente o Tomcat para que as novas configurações do xml sejam reconhecidas.

Acesse novamente a url do seu projeto: http://127.0.0.1:8080/PalestraDWR/dwr/

Figura 10.

Agora o DWR já reconhece a sua classe Java. Se você clicar no link da sua classe você vai visualizar todos os métodos dela, e isso é muito útil, pois assim você já pode testar o seu método antes mesmo de criar seu código JavaScript. Veja abaixo:

Figura 11.

Se você clicar em EXECUTE o DWR vai executar o seu método. Pronto seu JavaScript já esta acessando a sua classe Java.

Vamos agora criar o nosso arquivo Java Script, vamos chamá-lo de exemplo.js e vamos criar uma pasta chamada JS onde iremos salva-lo.

Exemplo.js

Vamos criar uma função para acessarmos o método da nossa classe.

Figura 12.

Eu criei três funções no meu js, uma que vai acessar o meu método da minha classe Java, outra que vai exibir esse retorno dentro do meu JSP ou HTML e a última que apaga a minha mensagem da tela.

Antes de mostrarmos o nosso JSP vamos dá um breve resumo da primeira e segunda função.

Observem que na minha função getMsg() eu chamo o meu Objeto JS/Java que faz a chamada do meu método getMensagem(), da minha classe FacadeAjax.

Mais então porque estou passando parâmetro?

Primeiro o que eu estou passando não é um parâmetro e sim uma função que vai ser a função de retorno do meu método.

Simples, no Js essa é uma utilização bem comum, pode ser chamada de Função de Callback, o que ela faz exatamente é equivalente a você fazer o seguinte trecho.

DWRUtil.setValue(“divMensagem”, FacadeAjax.getMensagem());

Ou

var msg = FacadeAjax.getMensagem();

exibirMsg(msg);

Só que no JS isso praticamente não existe, então uma saída que temos é usar o método de callback, que consiste fazer a chamada da minha função de retorno, direto na assinatura da minha função principal, por isso o nome callback.

E se o meu método estiver esperando um parâmetro ?

Essa metodologia se resume a:

Função(callback, parametro1); à Função espera um parâmetro.

Função(callback, parametro1, paremetro2); à Função espera dois parâmetros.

Se a sua função espera um parâmetro, basta você inseri-lo logo após a sua função de callback. Lembrando que existem outras formas de callback.

Bem acho que deu para entender, então vamos adiante para não sairmos do foco.

Resumindo você já configurou o web.xml, dwr.xml, criou a classe FacadeAjax, os beans Pessoa e Usuário e o JS exemplo.js.

Falta agora o JSP para chamarmos a nossa função e rodar esse exemplo.

Criando um JSP

Index.jsp

Vamos criar um JSP chamado index.jsp e vamos salva-lo na raiz do nosso projeto.

Veja abaixo:

Figura 13.

Explicando o código:

1. <%=request.getContextPath() %>

2. <script type="text/javascript" src='<%=request.getContextPath() %>/dwr/interface/FacadeAjax.js'></script>

Nessa linha você esta informando o seu objeto JavaScript que você mapeou no dwr.xml para representar a sua classe Java. Observe que temos o seguinte estrutura de endereço: /Contexto/dwr/interface/seuObjetoJS.js

3. <script type="text/javascript" src='<%=request.getContextPath() %>/dwr/engine.js'></script>

Agora estamos importando a biblioteca engine.js(http://getahead.ltd.uk/dwr/browser/engine) do DWR. Observe que ela não possui na sua url o endereço interface. Pois o interface é só no caso de Objetos JS/Java que você mapeou no dwr.xml.

4. <script type="text/javascript" src='<%=request.getContextPath() %>/dwr/util.js'></script>

Importamos agora a biblioteca que você irá mais utilizar, a util.js(http://getahead.ltd.uk/dwr/browser/util). É dela que usamos a função DWRUtil.setValue(); e outras que veremos nos próximos artigos.

5. <script type="text/javascript" src='js/exemplo.js'></script>

Fazemos um import do nosso JS onde se encontra as nossas funções.

6. <a href="#" onclick="javascript:getMsg();">Exibir mensagem</a> |

   <a href="#" onclick="javascript:apagaMsg();">Apaga Mensagem</a>

Criamos dois links que ao serem clicados vão executar no onClick a nossa respectiva função. Lembrando que essa chamada pode ser feita dentro de um <input>, <link> e onde for possível fazer a chamada com JavaScript.

7. <div id="divMensagem"></div>

É nessa tag <div> onde dizemos onde o DWR(Ajax) irá colocar a sua mensagem. Para isso basta colocar no setValue o nome do ID do seu DIV. Podemos também usar a maioria das tag do HTML: span, div, table, tbody e etc.

Vamos ver esse sistema rodando, acesse: http://127.0.0.1:8080/PalestraDWR/ ou http://localhost:8080/PalestraDWR/.

Figura 14.

Figura 15. 

Conclusão

O DWR não é um bicho de sete cabeças, ele é bem simples como vocês puderam observar, ele é fácil de usar, fácil de instalar, fácil de configurar e dar manutenção.

Vimos na primeira parte desse artigo como criar, configurar um exemplo simples do DWR. No próximo artigo vamos ver alguns exemplos com acesso ao banco de dados, com novas funções e exemplos.

Espero que tenham gostado deste artigo e que ele tenha sido de utilidade.

Até o próximo.

Handerson Frota

(handersonbf@gmail.com)