Tutorial Dwr - Combos Dependentes

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.

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"); rd.forward(request, response); } }

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?