Baixado 73 vezes
![Dúvidas ou comentários? Envie um email para [email_address] Visite meu blog para mais dicas e tutorias http://alexandresoli.wordpress.com](https://image.slidesharecdn.com/tutorialdwr-combosdependentes-090521155740-phpapp02/85/Tutorial-Dwr-Combos-Dependentes-12-320.jpg)
Carregado porAlexandre S. Oliveira
Tutorial Dwr - Combos Dependentes
Este documento descreve como criar combos (dropdowns) dependentes usando DWR, onde a lista de cidades muda de acordo com o estado selecionado. Instruções passo a passo incluem criar classes Java para estados e cidades, configurar o DWR, criar um servlet e um JSP para exibir as combos. Ao final, testar o exemplo acessando uma URL que carrega as combos dependentes.
Tutorial Dwr - Combos Dependentes
- 1. Tutorial DWR CombosDependentes Por Alexandre Soli
- 2. Ferramentas A versãodo 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/
- 3. Exemplo –Estados vs Cidades Problema: Você precisa que sua lista de cidades mude de acordo com o estado selecionado. Como fazer?
- 4. Coloque a entradaabaixo 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>
- 5. Crie a classeEstado 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... }
- 6. Crie a classeCombosDependentesLookup 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; } }
- 7. Crie a classeCidade 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... }
- 8. Adicione a entradaabaixo 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>
- 9. 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); } }
- 10. Crie o jspcombos-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>
- 11. Testando as combosdependentes 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.
- 12. Dúvidas ou comentários?Envie um email para [email_address] Visite meu blog para mais dicas e tutorias http://alexandresoli.wordpress.com