Tutorial Dwr - Configuração e Uso

Tutorial DWRTutorial DWR

Configuração e usoConfiguração e usoPor Alexandre SoliPor Alexandre Soli

Passo 1 – FerramentasPasso 1 – Ferramentas

► A versão do DWR utilizada neste tutorial e a 2.0.5 (funciona 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 com Java 1.3 em diante) e pode ser encontrada no link abaixo:abaixo:

http://directwebremoting.org/dwr/downloadhttp://directwebremoting.org/dwr/download

► TOMCAT 5.5 como servidor webTOMCAT 5.5 como servidor web► Java 6Java 6► Eclipse 3.4.1Eclipse 3.4.1

Passo 2 – Criando o projeto Passo 2 – Criando o projeto exemploexemplo

► Dentro do Eclipse clique em File > New > Project e selecione Dentro do Eclipse clique em File > New > Project e selecione Dynamic Web ProjectDynamic Web Project

► Selecione Dynamic Web ProjectSelecione Dynamic Web Project

► Nomeie o projeto para tutorial-dwr e finalize o processo.Nomeie o projeto para tutorial-dwr e finalize o processo.

Passo 3 - ConfiguraçãoPasso 3 - Configuração

► Copie o jar do dwr para a pasta WEB-INF/libCopie o jar do dwr para a pasta WEB-INF/lib

► Nosso web.xml:Nosso web.xml:

<servlet><servlet> <servlet-name><servlet-name>dwrdwr-invoker</servlet-name> -invoker</servlet-name> <servlet-<servlet-

class>class>orgorg..directwebremotingdirectwebremoting..servletservlet.DwrServlet</servl.DwrServlet</servlet-class>et-class>

<init-param><init-param><param-name><param-name>configconfig</param-name></param-name><param-value>/WEB-INF/<param-value>/WEB-INF/dwrdwr..xmlxml</param-value></param-value></init-param></init-param><init-param><init-param><param-name>debug</param-name><param-name>debug</param-name><param-value>false</param-value><param-value>false</param-value></init-param></init-param> <load-on-startup>2</load-on-startup><load-on-startup>2</load-on-startup></servlet></servlet><servlet-mapping><servlet-mapping> <servlet-name><servlet-name>dwrdwr-invoker</servlet-name>-invoker</servlet-name> <url-pattern>/<url-pattern>/dwrdwr/*</url-pattern>/*</url-pattern></servlet-mapping></servlet-mapping>

► Crie um arquivo chamado dwr.xml dentro do diretório WEB-Crie um arquivo chamado dwr.xml dentro do diretório WEB-INF.INF.

► Conteudo do arquivo dwr.xmlConteudo do arquivo dwr.xml

<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "../config/dwr20.dtd">

<dwr><allow> <create creator="new" javascript="ExemploLookup"><param name="class" value="br.com.neoimage.ExemploLookup" /></create>

<convert converter="bean" match="br.com.neoimage.usuario.Usuario"/>

</allow>

</dwr>

► Crie as classes ExemploLookup, Usuario e exemplo.jspCrie as classes ExemploLookup, Usuario e exemplo.jsp

Passo 4 – ExplicaçõesPasso 4 – Explicações

► Usuario - representa um usuário e contém apenas 2 atributos Usuario - representa um usuário e contém apenas 2 atributos e seus respectivos getters e setters.e seus respectivos getters e setters.

► ExemploLookup irá atuar como um serviço para as requisições ExemploLookup irá atuar como um serviço para as requisições AJAX.AJAX.

► Exemplo.jsp – contém a chamada javascript para nosso Exemplo.jsp – contém a chamada javascript para nosso serviço AJAX.serviço AJAX.

► Dwr.xml – contém a declaração de nosso serviço e da classe Dwr.xml – contém a declaração de nosso serviço e da classe Usuario.Usuario.

Passo 5 - CodificaçãoPasso 5 - Codificação► Classe UsuarioClasse Usuario

packagepackage br.com.neoimage.usuario; br.com.neoimage.usuario;

publicpublic classclass Usuario { Usuario {privateprivate String nome; String nome;privateprivate String sobrenome; String sobrenome;

publicpublic String getNome() { String getNome() {returnreturn nome; nome;

}}publicpublic voidvoid setNome(String nome) { setNome(String nome) {

thisthis.nome = nome;.nome = nome;}}publicpublic String getSobrenome() { String getSobrenome() {

returnreturn sobrenome; sobrenome;}}publicpublic voidvoid setSobrenome(String sobrenome) { setSobrenome(String sobrenome) {

thisthis.sobrenome = sobrenome;.sobrenome = sobrenome;}}}}

► Classe ExemploLookupClasse ExemploLookup

packagepackage br.com.neoimage; br.com.neoimage;importimport br.com.neoimage.usuario.Usuario; br.com.neoimage.usuario.Usuario;

publicpublic classclass ExemploLookup { ExemploLookup {

/**/** RespondeResponde as as requisiçõesrequisições AJAX AJAX vindasvindas dada páginapágina exemploexemplo..jspjsp A A entradaentrada:<convert converter="bean" :<convert converter="bean"

match="match="brbr..comcom..neoimageneoimage..usuariousuario..UsuarioUsuario"/>"/> dentrodentro do do dwrdwr..xmlxml permitepermite o o tráfegotráfego do do objetoobjeto entreentre o Java e o o Java e o javascriptjavascript. . */*/publicpublic String metodoExemplo(Usuario usuario) { String metodoExemplo(Usuario usuario) {String nomeCompleto = usuario.getNome() + " " + usuario.getSobrenome();String nomeCompleto = usuario.getNome() + " " + usuario.getSobrenome();

returnreturn nomeCompleto; nomeCompleto;}}}}

► Página exemplo.jspPágina exemplo.jsp

<html><html> o DWR --><script src=<script src='dwr/engine.js''dwr/engine.js' type= type='text/javascript''text/javascript' ></script> ></script> <script src=<script src='dwr/util.js''dwr/util.js' type= type='text/javascript''text/javascript' ></script> ></script>

 ExemploLookup --><script type=<script type='text/javascript''text/javascript' src= src='dwr/interface/ExemploLookup.js''dwr/interface/ExemploLookup.js'></script>></script>

<script language=<script language="javascript""javascript">>

varvar usuario = usuario = newnew Object(); Object(); // cria um objeto de comunicacao javascript/java// cria um objeto de comunicacao javascript/javausuario.nome = "Alexandre"; usuario.nome = "Alexandre"; // equivalente ao usuario.setNome// equivalente ao usuario.setNomeusuario.sobrenome = "Soli"; usuario.sobrenome = "Soli"; // equivalente ao usuario.setSobrenome// equivalente ao usuario.setSobrenome

// faz a chamada para o metodo -metodoExemplo- da classe ExemploLookup// faz a chamada para o metodo -metodoExemplo- da classe ExemploLookup// o obj usuario e passado como parametro// o obj usuario e passado como parametroExemploLookupExemploLookup..metodoExemplometodoExemplo(usuario, (usuario, functionfunction(data) {(data) {// todo codigo a seguir sera executado apos a resposta do metodo -// todo codigo a seguir sera executado apos a resposta do metodo -

metodoExemplo-metodoExemplo-alert(data); // data contém a resposta vinda do Java.alert(data); // data contém a resposta vinda do Java.

});});</script></script></html></html>

Passo 6 – Testando o Passo 6 – Testando o exemploexemplo

► Inicie o servidor e aponte para o endereçoInicie o servidor e aponte para o endereçohttp://localhost:8080/tutorial-dwr/exemplo.jsphttp://localhost:8080/tutorial-dwr/exemplo.jsp

► Ao ser carregada, a página irá mostrar uma mensagem com o Ao ser carregada, a página irá mostrar uma mensagem com o nome e sobrenome passados como parametros na pagina jsp.nome e sobrenome passados como parametros na pagina jsp.

var usuario = new Object(); var usuario = new Object(); usuario.nome = "Alexandre";usuario.nome = "Alexandre";usuario.sobrenome = "Soli"; usuario.sobrenome = "Soli";

► O serviço ExemploLookup irá interceptara chamada ao O serviço ExemploLookup irá interceptara chamada ao método metodoExemplo, fará a concatenação das variáveis e método metodoExemplo, fará a concatenação das variáveis e devolverá uma String.devolverá uma String.

publicpublic String metodoExemplo(Usuario usuario) { String metodoExemplo(Usuario usuario) {String nomeCompleto = usuario.getNome() + " " + usuario.getSobrenome();String nomeCompleto = usuario.getNome() + " " + usuario.getSobrenome();

returnreturn nomeCompleto; nomeCompleto;}}

► Página com a mensagem de resposta.Página com a mensagem de resposta.

Dúvidas ou comentários?Dúvidas ou comentários?

► Envie um email para Envie um email para [email protected]@gmail.com

► Visite meu blog para mais dicas e tutoriasVisite meu blog para mais dicas e tutorias

http://alexandresoli.wordpress.comhttp://alexandresoli.wordpress.com

Technology

Tutorial Dwr - Configuração e Uso