Tutorial DWR Configuração e uso Por Alexandre Soli
Passo 1 – Ferramentas <ul><li>A versão do DWR utilizada neste tutorial e a 2.0.5 (funciona com Java 1.3 em diante) e pode ...
Passo 2 – Criando o projeto exemplo <ul><li>Dentro do Eclipse clique em File > New > Project e selecione Dynamic Web Proje...
<ul><li>Selecione Dynamic Web Project </li></ul>
<ul><li>Nomeie o projeto para tutorial-dwr e finalize o processo. </li></ul>
Passo 3 - Configuração <ul><li>Copie o jar do dwr para a pasta WEB-INF/lib </li></ul>
<ul><li>Nosso web.xml: </li></ul><ul><ul><ul><li><servlet> </li></ul></ul></ul><ul><ul><ul><li><servlet-name> dwr -invoker...
<ul><li>Crie um arquivo chamado dwr.xml dentro do diretório WEB-INF. </li></ul>
<ul><li>Conteudo do arquivo dwr.xml </li></ul><!DOCTYPE dwr PUBLIC &quot;-//GetAhead Limited//DTD Direct Web Remoting 2.0/...
<ul><li>Crie as classes ExemploLookup, Usuario e exemplo.jsp </li></ul>
Passo 4 – Explicações <ul><li>Usuario - representa um usuário e contém apenas 2 atributos e seus respectivos getters e set...
Passo 5 - Codificação <ul><li>Classe Usuario </li></ul><ul><li>package  br.com.neoimage.usuario; </li></ul><ul><li>public ...
<ul><li>Classe ExemploLookup </li></ul><ul><li>package  br.com.neoimage; </li></ul><ul><li>import  br.com.neoimage.usuario...
<ul><li>Página exemplo.jsp </li></ul><ul><li><html> </li></ul><ul><li><!-- Imports  necessários   para  o DWR --> </li></u...
Passo 6 – Testando o exemplo <ul><li>Inicie o servidor e aponte para o endereço </li></ul><ul><li>http://localhost:8080/tu...
<ul><li>Página com a mensagem de resposta. </li></ul>
Dúvidas ou comentários? <ul><li>Envie um email para  [email_address]   </li></ul><ul><li>Visite meu blog para mais dicas e...
Próximos SlideShares
Carregando em…5
×

Tutorial Dwr - Configuração e Uso

5.628 visualizações

Publicada em

Tutorial de configuração e uso da framework DWR para operações AJAX.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

Tutorial Dwr - Configuração e Uso

  1. 1. Tutorial DWR Configuração e uso Por Alexandre Soli
  2. 2. Passo 1 – Ferramentas <ul><li>A versão do DWR utilizada neste tutorial e a 2.0.5 (funciona com Java 1.3 em diante) e pode ser encontrada no link abaixo: </li></ul><ul><li>http://directwebremoting.org/dwr/download </li></ul><ul><li>TOMCAT 5.5 como servidor web </li></ul><ul><li>Java 6 </li></ul><ul><li>Eclipse 3.4.1 </li></ul>
  3. 3. Passo 2 – Criando o projeto exemplo <ul><li>Dentro do Eclipse clique em File > New > Project e selecione Dynamic Web Project </li></ul>
  4. 4. <ul><li>Selecione Dynamic Web Project </li></ul>
  5. 5. <ul><li>Nomeie o projeto para tutorial-dwr e finalize o processo. </li></ul>
  6. 6. Passo 3 - Configuração <ul><li>Copie o jar do dwr para a pasta WEB-INF/lib </li></ul>
  7. 7. <ul><li>Nosso web.xml: </li></ul><ul><ul><ul><li><servlet> </li></ul></ul></ul><ul><ul><ul><li><servlet-name> dwr -invoker</servlet-name> </li></ul></ul></ul><ul><ul><ul><li><servlet-class> org . directwebremoting . servlet .DwrServlet</servlet-class> </li></ul></ul></ul><ul><ul><ul><li><init-param> </li></ul></ul></ul><ul><ul><ul><li><param-name> config </param-name> </li></ul></ul></ul><ul><ul><ul><li><param-value>/WEB-INF/ dwr . xml </param-value> </li></ul></ul></ul><ul><ul><ul><li></init-param> </li></ul></ul></ul><ul><ul><ul><li><init-param> </li></ul></ul></ul><ul><ul><ul><li><param-name>debug</param-name> </li></ul></ul></ul><ul><ul><ul><li><param-value>false</param-value> </li></ul></ul></ul><ul><ul><ul><li></init-param> </li></ul></ul></ul><ul><ul><ul><li><load-on-startup>2</load-on-startup> </li></ul></ul></ul><ul><ul><ul><li></servlet> </li></ul></ul></ul><ul><ul><ul><li><servlet-mapping> </li></ul></ul></ul><ul><ul><ul><li><servlet-name> dwr -invoker</servlet-name> </li></ul></ul></ul><ul><ul><ul><li><url-pattern>/ dwr /*</url-pattern> </li></ul></ul></ul><ul><ul><ul><li></servlet-mapping> </li></ul></ul></ul>
  8. 8. <ul><li>Crie um arquivo chamado dwr.xml dentro do diretório WEB-INF. </li></ul>
  9. 9. <ul><li>Conteudo do arquivo dwr.xml </li></ul><!DOCTYPE dwr PUBLIC &quot;-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN&quot; &quot;../config/dwr20.dtd&quot;> <dwr> <allow> <!-- Declaracao da classe que ira responder as requisicoes AJAX --> <create creator= &quot;new&quot; javascript= &quot;ExemploLookup&quot; > <param name= &quot;class&quot; value= &quot;br.com.neoimage.ExemploLookup&quot; /> </create> <!-- Utilizado para conversao de objetos javascript /java --> <convert converter= &quot;bean&quot; match= &quot;br.com.neoimage.usuario.Usuario&quot; /> </allow> </dwr>
  10. 10. <ul><li>Crie as classes ExemploLookup, Usuario e exemplo.jsp </li></ul>
  11. 11. Passo 4 – Explicações <ul><li>Usuario - representa um usuário e contém apenas 2 atributos e seus respectivos getters e setters. </li></ul><ul><li>ExemploLookup irá atuar como um serviço para as requisições AJAX. </li></ul><ul><li>Exemplo.jsp – contém a chamada javascript para nosso serviço AJAX. </li></ul><ul><li>Dwr.xml – contém a declaração de nosso serviço e da classe Usuario. </li></ul>
  12. 12. Passo 5 - Codificação <ul><li>Classe Usuario </li></ul><ul><li>package br.com.neoimage.usuario; </li></ul><ul><li>public class Usuario { </li></ul><ul><li>private String nome; </li></ul><ul><li>private String sobrenome; </li></ul><ul><li>public String getNome() { </li></ul><ul><li>return nome; </li></ul><ul><li>} </li></ul><ul><li>public void setNome(String nome) { </li></ul><ul><li>this .nome = nome; </li></ul><ul><li>} </li></ul><ul><li>public String getSobrenome() { </li></ul><ul><li>return sobrenome; </li></ul><ul><li>} </li></ul><ul><li>public void setSobrenome(String sobrenome) { </li></ul><ul><li>this .sobrenome = sobrenome; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  13. 13. <ul><li>Classe ExemploLookup </li></ul><ul><li>package br.com.neoimage; </li></ul><ul><li>import br.com.neoimage.usuario.Usuario; </li></ul><ul><li>public class ExemploLookup { </li></ul><ul><li>/** </li></ul><ul><li>Responde as requisições AJAX vindas da página exemplo . jsp </li></ul><ul><li>A entrada :<convert converter=&quot;bean&quot; match=&quot; br . com . neoimage . usuario . Usuario &quot;/> </li></ul><ul><li>dentro do dwr . xml permite o tráfego do objeto entre o Java e o javascript . </li></ul><ul><li>*/ </li></ul><ul><li>public String metodoExemplo(Usuario usuario) { </li></ul><ul><li>String nomeCompleto = usuario.getNome() + &quot; &quot; + usuario.getSobrenome(); </li></ul><ul><li>return nomeCompleto; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  14. 14. <ul><li>Página exemplo.jsp </li></ul><ul><li><html> </li></ul><ul><li><!-- Imports necessários para o DWR --> </li></ul><ul><li><script src= 'dwr/engine.js' type= 'text/javascript' ></script> </li></ul><ul><li><script src= 'dwr/util.js' type= 'text/javascript' ></script> </li></ul><ul><li><!-- Import da classe ExemploLookup --> </li></ul><ul><li><script type= 'text/javascript' src= 'dwr/interface/ExemploLookup.js' ></script> </li></ul><ul><li><script language= &quot;javascript&quot; > </li></ul><ul><li>var usuario = new Object(); // cria um objeto de comunicacao javascript/java </li></ul><ul><li>usuario.nome = &quot;Alexandre&quot;; // equivalente ao usuario.setNome </li></ul><ul><li>usuario.sobrenome = &quot;Soli&quot;; // equivalente ao usuario.setSobrenome </li></ul><ul><li>// faz a chamada para o metodo -metodoExemplo- da classe ExemploLookup </li></ul><ul><li>// o obj usuario e passado como parametro </li></ul><ul><li>ExemploLookup . metodoExemplo (usuario, function (data) { </li></ul><ul><li>// todo codigo a seguir sera executado apos a resposta do metodo -metodoExemplo- </li></ul><ul><li>alert(data); // data contém a resposta vinda do Java. </li></ul><ul><li>}); </li></ul><ul><li></script> </li></ul><ul><li></html> </li></ul>
  15. 15. Passo 6 – Testando o exemplo <ul><li>Inicie o servidor e aponte para o endereço </li></ul><ul><li>http://localhost:8080/tutorial-dwr/exemplo.jsp </li></ul><ul><li>Ao ser carregada, a página irá mostrar uma mensagem com o nome e sobrenome passados como parametros na pagina jsp. </li></ul><ul><ul><li>var usuario = new Object(); </li></ul></ul><ul><ul><li>usuario.nome = &quot;Alexandre&quot;; </li></ul></ul><ul><ul><li>usuario.sobrenome = &quot;Soli&quot;; </li></ul></ul><ul><li>O serviço ExemploLookup irá interceptara chamada ao método metodoExemplo, fará a concatenação das variáveis e devolverá uma String. </li></ul><ul><ul><li>public String metodoExemplo(Usuario usuario) { </li></ul></ul><ul><ul><li>String nomeCompleto = usuario.getNome() + &quot; &quot; + usuario.getSobrenome(); </li></ul></ul><ul><ul><li>return nomeCompleto; </li></ul></ul><ul><ul><li>} </li></ul></ul>
  16. 16. <ul><li>Página com a mensagem de resposta. </li></ul>
  17. 17. Dúvidas ou comentários? <ul><li>Envie um email para [email_address] </li></ul><ul><li>Visite meu blog para mais dicas e tutorias </li></ul><ul><li>http://alexandresoli.wordpress.com </li></ul>

×