12
Tutorial DWR Tutorial DWR Combos Dependentes Combos Dependentes Por Alexandre Soli Por Alexandre Soli

Tutorial Dwr - Combos Dependentes

Embed Size (px)

DESCRIPTION

Tutorial DWR mostrando como construir combos dependentes.

Citation preview

Page 1: Tutorial Dwr - Combos Dependentes

Tutorial DWRTutorial DWR

Combos DependentesCombos DependentesPor Alexandre SoliPor Alexandre Soli

Page 2: Tutorial Dwr - Combos Dependentes

FerramentasFerramentas

► 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► Se você não sabe por onde começar, dê uma olhada no Se você não sabe por onde começar, dê uma olhada no

tutorial de configuração e uso básicotutorial de configuração e uso básico

http://alexandresoli.wordpress.com/2009/05/14/tutorial-dwr/http://alexandresoli.wordpress.com/2009/05/14/tutorial-dwr/

Page 3: Tutorial Dwr - Combos Dependentes

Exemplo – Estados vs CidadesExemplo – Estados vs Cidades

Problema:Problema: Você precisa que sua lista de cidades mude de Você precisa que sua lista de cidades mude de acordo com o estado selecionado.acordo com o estado selecionado.

Como fazer?

Page 4: Tutorial Dwr - Combos Dependentes

► Coloque a entrada abaixo no dwr.xml.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>

Page 5: Tutorial Dwr - Combos Dependentes

► Crie a classe EstadoCrie 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...

}

Page 6: Tutorial Dwr - Combos Dependentes

► Crie a classe CombosDependentesLookupCrie 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;

}

}

Page 7: Tutorial Dwr - Combos Dependentes

► Crie a classe CidadeCrie 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...}

Page 8: Tutorial Dwr - Combos Dependentes

► Adicione a entrada abaixo no web.xml:Adicione a entrada abaixo no web.xml:

<servlet><servlet>

<servlet-name>ServletCombosDependentes</servlet-name><servlet-name>ServletCombosDependentes</servlet-name>

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

</servlet></servlet>

<servlet-mapping><servlet-mapping>

<servlet-name>ServletCombosDependentes</servlet-name><servlet-name>ServletCombosDependentes</servlet-name>

<url-pattern>/servlet/*</url-pattern><url-pattern>/servlet/*</url-pattern>

</servlet-mapping></servlet-mapping>

Page 9: Tutorial Dwr - Combos Dependentes

► Crie a classe ServletCombosDependentesCrie 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);

}}

Page 10: Tutorial Dwr - Combos Dependentes

► Crie o jsp combos-dependentes.jspCrie 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>

Page 11: Tutorial Dwr - Combos Dependentes

► Testando as combos dependentesTestando 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.

Page 12: Tutorial Dwr - Combos Dependentes

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