Tutorial DWR

Combos Dependentes
Por Alexandre Soli
 Ferramentas
► 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:
http://directwebremoting.org/dwr/download

► TOMCAT 5.5 como servidor web

► Java 6
► Eclipse 3.4.1
► Se você não sabe por onde começar, dê uma olhada no tutorial de
configuração e uso básico
http://alexandresoli.wordpress.com/2009/05/14/tutorial-dwr/
 Exemplo – Estados vs Cidades
Problema: Você precisa que sua lista de cidades mude de acordo com o
estado selecionado.

Como fazer?
► Coloque a entrada abaixo no dwr.xml.

<dwr>
<allow>

<!-- Declaracao da classe que ira responder as requisicoes AJAX -->

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

<!-- Irá responder as requisicoes AJAX para o exemplo de combos dependentes -->
<create creator="new" javascript="CombosDependentesLookup">
<param name="class" value="br.com.neoimage.CombosDependentesLookup" />
</create>

<!-- Utilizado para conversao de objetos javascript/java -->

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

</allow>

</dwr>
► Crie a classe Estado

package br.com.neoimage.localizacao;
import java.util.ArrayList;
import java.util.List;

public class Estado {

private Integer codigo;
private String nome;

public List<Estado> listar() {

List<Estado> listaEstados = new ArrayList<Estado>();
Estado estado = new Estado();
estado.setCodigo(12);
estado.setNome("São Paulo");
listaEstados.add(estado);
estado.setCodigo(24);
estado.setNome("Rio de Janeiro");
listaEstados.add(estado);
return listaEstados;
}

// getters e setters...

}
► Crie a classe CombosDependentesLookup

package br.com.neoimage;

import java.util.ArrayList;
import java.util.List;

import br.com.neoimage.localizacao.Cidade;
import br.com.neoimage.localizacao.Estado;

public class CombosDependentesLookup {

public List<Cidade> obterCidades(Estado estado) {

Cidade cidade = new Cidade();

List<Cidade> listaCidades = new ArrayList<Cidade>();
listaCidades = cidade.listar(estado);
return listaCidades;

}
► Crie a classe Cidade
package br.com.neoimage.localizacao;
import java.util.ArrayList;
import java.util.List;

public class Cidade {

private Integer codigo;

private String nome;

public List<Cidade> listar(Estado estado) {

List<Cidade> listaCidades = new ArrayList<Cidade>();
Cidade cidade = new Cidade();

if (estado.getCodigo().equals(24)) {
cidade.setCodigo(1);
cidade.setNome("ANGRA DOS REIS");
listaCidades.add(cidade);
cidade = new Cidade();
cidade.setCodigo(2);
cidade.setNome("APERIBÉ");
listaCidades.add(cidade);
listaCidades.add(cidade);

} else if (estado.getCodigo().equals(12)) {
cidade.setCodigo(21);
cidade.setNome("PRESIDENTE PRUDENTE");
listaCidades.add(cidade);
cidade = new Cidade();
cidade.setCodigo(22);
cidade.setNome("ADAMANTINA");
listaCidades.add(cidade);
listaCidades.add(cidade);
}
return listaCidades;
}
// getters e setters...
}
► Adicione a entrada abaixo no web.xml:

<servlet>
<servlet-name>ServletCombosDependentes</servlet-name>
<servlet-class> br.com.neoimage.ServletCombosDependentes</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>ServletCombosDependentes</servlet-name>
<url-pattern>/servlet/*</url-pattern>
</servlet-mapping>
► Crie a classe ServletCombosDependentes

package br.com.neoimage;
import java.io.IOException;
import java.util.List;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import br.com.neoimage.localizacao.Estado;

public class ServletCombosDependentes extends HttpServlet {

public void doGet(HttpServletRequest request,

HttpServletResponse response)
throws ServletException, IOException {

Estado estado = new Estado();

List<Estado> listaEstados = estado.listar();
request.setAttribute("listaEstados", listaEstados);
RequestDispatcher rd =
request.getRequestDispatcher("/combos-dependentes.jsp");
► Crie o jsp combos-dependentes.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html>
<head>
<script type='text/javascript' src='/tutorial-dwr/dwr/interface/CombosDependentesLookup.js'></script>
<script type='text/javascript' src='/tutorial-dwr/dwr/engine.js'></script>
<script type='text/javascript' src='/tutorial-dwr/dwr/util.js'></script>
<script language="javascript">
function carregarCidades() {
var estado = new Object();
estado.codigo = document.getElementById("comboEstados").value;
CombosDependentesLookup.obterCidades(estado,function(data) {
dwr.util.removeAllOptions("comboCidades");
dwr.util.addOptions("comboCidades", {"0":"Selecione..."});
dwr.util.addOptions("comboCidades", data, "codigo", "nome");
});
}
</script>
</head>
<body>
<label>Estados</label>
<select name="comboEstados" id="comboEstados" onchange="carregarCidades();">
<option value="0">Selecione...</option>
<c:forEach var="estado" items="${listaEstados}">
<optionvalue="<c:out value="${estado.codigo}" />"><c:out value="${estado.nome}" />
</option>
</c:forEach>
</select>

<label>Cidades</label>
<select id="comboCidades" >
<option value="0">Selecione...</option>
<c:forEach var="cidade" items="${listaCidades}">
<optionvalue="<c:out value="${cidade.codigo}" />"><c:out value="${cidade.nome}" />
</option>
</c:forEach>
</select>
</body>
</html>
► Testando as combos dependentes

Inicie o servidor e aponte para o endereço abaixo

http://localhost:8080/tutorial-dwr/servlet/ServletCombosDependentes

Os valores da combo de cidades irá mudar de acordo com o Estado selecionado.

 Dúvidas ou comentários?
► Envie um email para alexandre.soli@gmail.com

► Visite meu blog para mais dicas e tutorias

http://alexandresoli.wordpress.com