Desejo fazer um filtro para Pais-->Estado-->Cidade-->Bairro. Alguém pode me dar uma idéia?

Front-end
#1

:?: Bom dia sou iniciante na programação web em java, estou fazendo um sistema usando JSF e JSP, um hotel simples, só que estou com um problema, desejo fazer um filtro de Pais–>Estado–>Cidade–>Bairro. Como posso fazer?

#2

rafapilao
ta mais qual eh sua dificuldade ???
eh em logica??? vc nao sabe fazer uma logica para isso
ou é qual componetes JSF vc poderia usar pra seu filtro ???

#3

Primeiramente é a lógica e não sei os componentes que posso usar. :? :frowning:

#4

Primeiramente é a lógica e não sei os componentes que posso usar.

[quote=RobsonFagundes]rafapilao
ta mais qual eh sua dificuldade ???
eh em logica??? vc nao sabe fazer uma logica para isso
ou é qual componetes JSF vc poderia usar pra seu filtro ???[/quote]

#5

Intaum Primeiramente estude Orientacao a Objetos


t+

#6

rafapilao: vc pode usar o framework DWR . Procura o link no google. Ele é um framework bem simples que é acionado via javascript para devolver respostas com AJAX através da interação com classes java. É legal.
Você coloca um combo (html do tipo SELECT) contendo os Estados, por exemplo. Ao selecionar um Estado ele chama uma função javascript que chama o framework DWR. Ele ativará uma classe que vc deve criar e configurar no dwr.xml . Essa classe retorna pra tua página um java.util.Map contendo a lista de cidades e ainda atualiza a combo de cidades automaticamente.

Vou te passar um exemplo que fiz rapidinho pra te ajudar. Tenta implemtar. Usei o Eclipse Europa, criei um projeto ExemploDWR :

[list]baixe o arquivo dwr.jar e coloque ele dentro de Web Content\WEB-INF\lib (espero que não tenhamos problemas com versões, aqui. baixei o meu jar faz um ano e não procurei uma atualização.)[/list]
[list]Configure os arquivos abaixo do jeito que te passar. [/list]

web.xml

[code]<?xml version=“1.0” encoding=“UTF-8”?>
<web-app xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance” xmlns=“http://java.sun.com/xml/ns/javaee” xmlns:web=“http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd” xsi:schemaLocation=“http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd” id=“WebApp_ID” version=“2.5”>
<display-name>ExemploDWR</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>

  &lt;!-- DWR --&gt;

<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

</web-app>[/code]

dwr.xml coloque isso dentro do WEB-INF , junto do web.xml :

[code]<!DOCTYPE dwr PUBLIC “-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN” “http://getahead.org/dwr//dwr20.dtd”>

<dwr>
<allow>
<create creator=“new” javascript=“Cidade”><!-- javascript=[nome] este é o nome
que será usado pra chamar os métodos da classe via javascript -->
<param name=“class” value=“exemplo.dwr.Cidade” />
</create>
</allow>
</dwr>[/code]

Crie a classe Cidade.java . Faça o mesmo pacote que criei pra não ter que alterar no dwr.xml

[code]package exemplo.dwr;

import java.util.LinkedHashMap;
import java.util.Map;
/**

  • Esta classe é acionada por um javascript do framework DWR
  • @author marcelbonnet

*/
public class Cidade {

/**
 * lista de cidades
 */
private Map&lt;Integer, String&gt; cidades;

/**
 * Lista as cidades de uma Unidade Federativa
 * @param uf inteiro que representa o código de uma UF
 * @return a lista de cidades daquele Estado (UF)
 */
public Map&lt;Integer, String&gt; listarCidades(int uf){
	cidades = new LinkedHashMap&lt;Integer, String&gt;();
	//acesso a uma base de dados:
	//if uf = 123 ... sql busca cidades do estado 123... e por aí vai
	//teste:
	if(uf == 1){
		cidades.put(1, "Curitiba");
		cidades.put(2, "Maringá");
		cidades.put(3, "Cascavel");
	}
	if(uf == 2){
		cidades.put(3, "São Paulo");
		cidades.put(4, "Presidente Prudente");
	}
	
	return cidades;
}

}
[/code]

E por fim, faça tua JSP : index.jsp

[code]<%@ page language=“java” contentType=“text/html; charset=ISO-8859-1”
pageEncoding=“ISO-8859-1”%>
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=ISO-8859-1”>

<!–
ATENAÇÃO COM ESSES SCRIPTS: ELES DEVEM SER USADOS DESSE JEITO. APENAS LEMBRE QUE O PRIMEIRO
DEVE SER O NOME REGISTRADO NO [DWR.XML].JS :
–>

<script type=‘text/javascript’
src=’${pageContext.request.contextPath}/dwr/interface/Cidade.js’></script>
<!-- OS PRÓXIMOS SCRIPTS SÃO IMPORTADOS COM OS NOMES A SEGUIR SEMPRE: -->
<script type=‘text/javascript’
src=’${pageContext.request.contextPath}/dwr/engine.js’></script>
<script type=‘text/javascript’
src=’${pageContext.request.contextPath}/dwr/util.js’></script>

<script type=“text/javascript”>

/**
@param combo deve ser passado o nome do combo para o DWR, e não o objeto em si.
*/
function dwrCidade(id, combo){
DWRUtil.removeAllOptions(combo);//limpa os itens do combo (<select>)
/
* MUITO CUIDADO AQUI:
Cidade.[método] porque eu registrei no dwr.xml uma classe
com o identificador “Cidade”. É assim que aquela classe será referenciada
no javascript. A seguir vc chama um método implementado.
Consulte a documentação do DWR para saber mais sobre isso. eu não manjo tanto.
*/
Cidade.listarCidades(id, function(mapa){
DWRUtil.addOptions(combo, mapa);
});
}

</script>

</head>
<body>
<table>
<tr>
<td>Estado</td>
<td colspan=“3”>
<select id=“cmbEstado” onchange=“dwrCidade(this.value,‘cmbCidade’);”>
<option value=“1”>Paraná</option>
<option value=“2”>São Paulo</option>
</select>
</td>
</tr>
<tr>
<td>Cidades</td>
<td colspan=“3”>
<select id=“cmbCidade”>
<option value=“0”>Selecione a cidade</option>
</select>
</td>
</tr>
</table>

</body>
</html>[/code]

Olha, eu testei e funcionou. Espero que vc consiga se virar agora. Não esqueça de nos responder dizendo qual tua impressão, ok?

Abraço.

#7

Agradeço a ajuda farei isso, irei no google. Abraço.

[quote=marcelbonnet]rafapilao: vc pode usar o framework DWR . Procura o link no google. Ele é um framework bem simples que é acionado via javascript para devolver respostas com AJAX através da interação com classes java. É legal.
Você coloca um combo (html do tipo SELECT) contendo os Estados, por exemplo. Ao selecionar um Estado ele chama uma função javascript que chama o framework DWR. Ele ativará uma classe que vc deve criar e configurar no dwr.xml . Essa classe retorna pra tua página um java.util.Map contendo a lista de cidades e ainda atualiza a combo de cidades automaticamente.

Vou te passar um exemplo que fiz rapidinho pra te ajudar. Tenta implemtar. Usei o Eclipse Europa, criei um projeto ExemploDWR :

[list]baixe o arquivo dwr.jar e coloque ele dentro de Web Content\WEB-INF\lib (espero que não tenhamos problemas com versões, aqui. baixei o meu jar faz um ano e não procurei uma atualização.)[/list]
[list]Configure os arquivos abaixo do jeito que te passar. [/list]

web.xml

[code]<?xml version=“1.0” encoding=“UTF-8”?>
<web-app xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance” xmlns=“http://java.sun.com/xml/ns/javaee” xmlns:web=“http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd” xsi:schemaLocation=“http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd” id=“WebApp_ID” version=“2.5”>
<display-name>ExemploDWR</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>

  &lt;!-- DWR --&gt;

<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

</web-app>[/code]

dwr.xml coloque isso dentro do WEB-INF , junto do web.xml :

[code]<!DOCTYPE dwr PUBLIC “-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN” “http://getahead.org/dwr//dwr20.dtd”>

<dwr>
<allow>
<create creator=“new” javascript=“Cidade”><!-- javascript=[nome] este é o nome
que será usado pra chamar os métodos da classe via javascript -->
<param name=“class” value=“exemplo.dwr.Cidade” />
</create>
</allow>
</dwr>[/code]

Crie a classe Cidade.java . Faça o mesmo pacote que criei pra não ter que alterar no dwr.xml

[code]package exemplo.dwr;

import java.util.LinkedHashMap;
import java.util.Map;
/**

  • Esta classe é acionada por um javascript do framework DWR
  • @author marcelbonnet

*/
public class Cidade {

/**
 * lista de cidades
 */
private Map&lt;Integer, String&gt; cidades;

/**
 * Lista as cidades de uma Unidade Federativa
 * @param uf inteiro que representa o código de uma UF
 * @return a lista de cidades daquele Estado (UF)
 */
public Map&lt;Integer, String&gt; listarCidades(int uf){
	cidades = new LinkedHashMap&lt;Integer, String&gt;();
	//acesso a uma base de dados:
	//if uf = 123 ... sql busca cidades do estado 123... e por aí vai
	//teste:
	if(uf == 1){
		cidades.put(1, "Curitiba");
		cidades.put(2, "Maringá");
		cidades.put(3, "Cascavel");
	}
	if(uf == 2){
		cidades.put(3, "São Paulo");
		cidades.put(4, "Presidente Prudente");
	}
	
	return cidades;
}

}
[/code]

E por fim, faça tua JSP : index.jsp

[code]<%@ page language=“java” contentType=“text/html; charset=ISO-8859-1”
pageEncoding=“ISO-8859-1”%>
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=ISO-8859-1”>

<!–
ATENAÇÃO COM ESSES SCRIPTS: ELES DEVEM SER USADOS DESSE JEITO. APENAS LEMBRE QUE O PRIMEIRO
DEVE SER O NOME REGISTRADO NO [DWR.XML].JS :
–>

<script type=‘text/javascript’
src=’${pageContext.request.contextPath}/dwr/interface/Cidade.js’></script>
<!-- OS PRÓXIMOS SCRIPTS SÃO IMPORTADOS COM OS NOMES A SEGUIR SEMPRE: -->
<script type=‘text/javascript’
src=’${pageContext.request.contextPath}/dwr/engine.js’></script>
<script type=‘text/javascript’
src=’${pageContext.request.contextPath}/dwr/util.js’></script>

<script type=“text/javascript”>

/**
@param combo deve ser passado o nome do combo para o DWR, e não o objeto em si.
*/
function dwrCidade(id, combo){
DWRUtil.removeAllOptions(combo);//limpa os itens do combo (<select>)
/
* MUITO CUIDADO AQUI:
Cidade.[método] porque eu registrei no dwr.xml uma classe
com o identificador “Cidade”. É assim que aquela classe será referenciada
no javascript. A seguir vc chama um método implementado.
Consulte a documentação do DWR para saber mais sobre isso. eu não manjo tanto.
*/
Cidade.listarCidades(id, function(mapa){
DWRUtil.addOptions(combo, mapa);
});
}

</script>

</head>
<body>
<table>
<tr>
<td>Estado</td>
<td colspan=“3”>
<select id=“cmbEstado” onchange=“dwrCidade(this.value,‘cmbCidade’);”>
<option value=“1”>Paraná</option>
<option value=“2”>São Paulo</option>
</select>
</td>
</tr>
<tr>
<td>Cidades</td>
<td colspan=“3”>
<select id=“cmbCidade”>
<option value=“0”>Selecione a cidade</option>
</select>
</td>
</tr>
</table>

</body>
</html>[/code]

Olha, eu testei e funcionou. Espero que vc consiga se virar agora. Não esqueça de nos responder dizendo qual tua impressão, ok?

Abraço.[/quote]

#8

Pode deixar irei fazer isso e responderei logo.

#9

Cara, contanto que vc saiba o mínimo de Java e Java Web tipo, como criar um projeto web num eclipse da vida, tiver idéia do que seja JSP, vc conseguirá entender. Os detalhes do DWR é que eu não conheço bem, mas isso aí é tranquilo e quebra muito galho pra gente, sem contar que incorpora ajax de uma forma simples. Vc pode depois incrementar com taglibs… ou trocar tudo por JSF, mas aí a curva de tempo aprendizado só aumenta e as dificuldades também!

#10
#11

Ótimo. Boa sorte com o teu projeto!
Abraço.

#12

[quote=marcelbonnet]Ótimo. Boa sorte com o teu projeto!
Abraço.[/quote]

#13