Discussoes de Programacao e Tecnologia

Duvida de como fazer com jsp?

9 respostas
F
fernandopaiva

Salve galera, eu preciso fazer um esquema no browser mas não sei como fazer, se tem alguma tag(html, xml etc…) q ajuda nisso q preciso ou alguma outra tecnica para se fazer.

Seguinte, eu tenho uma imagem de uma área que será vendidos terrenos para um condominio fechado, seria uma planta baixa da área do total do terreno (vou colocar como anexo no post). Nessa imagem tem mais ou menos 68 terrenos marcados com suas áreas, por exemplo terreno 01,02…68.

Tem um sistema Desktop onde o cliente chega, escolhe o terreno que quer e ja faz a reserva ou compra do terreno. Para cada terreno eu tenho 3 imagens referentes, (Padrao, VerdeEscura, Laranja). Todas essas imagens foram cortadas pelo Photoshop e ja estão prontas.

Imaginem agora.

O cliente chega, escolhe o terreno q mais gostou, e faz uma reserva. Automaticamente, atraves de um SELECT no BD eu pego o numero do terreno e se foi reservado ou vendido, e na minha página web, eu quero trocar a imagem para a escolha do cliente "compra, reserva, ou nenhum dos 2 opcao usando a imagem padrao.

Por exemplo: Cliente reservou o 19, no browser eu quero trocar para a imagem Laranja, mostrando q esta reservado.
Cliente comprou o terreno 31, no browser eu quero trocar a imagem para VerdeEscura.
Cliente não comprou nada ou cancelou a reserva, imagem padrão.

Vou postar a planta baixa da área com os terrenos marcados pra vcs entenderem o q quero fazer. Vejam que todos os terrenos dentro da área estão marcados com seu número referente.

Tem alguma maneira de fazer isso ??? Como ?

obrigado.

2012/6/21/6e79235de017456d7a93da10a68f2b50_21649.jpg_778×381 71.8 KB

Alura Desenvolvimento Front-End React Do primeiro componente à liderança técnica! HTML/CSS/JavaScript fundamental, React com hooks e...

9 Respostas

A
andre.froes

Isso daí é bem facil de se fazer. Como eu te diria para implementar:

  1. No teu banco de dados, voce tem que identificar a situacao do lote (voce ja tem isso)
  2. Por meio dessa propriedade, no jquery, você colore de acordo com a disponibilidade do lote
  3. Faça hotspot na imagem, utilize esse tutorial aqui que você tira de letra, e ainda pode integrar em um sistema desktop.
F
fernandopaiva

andre.froes:
Isso daí é bem facil de se fazer. Como eu te diria para implementar:

  1. No teu banco de dados, voce tem que identificar a situacao do lote (voce ja tem isso)
  2. Por meio dessa propriedade, no jquery, você colore de acordo com a disponibilidade do lote
  3. Faça hotspot na imagem, utilize esse tutorial aqui que você tira de letra, e ainda pode integrar em um sistema desktop.

Opa, obrigado, vou tentar aqui…Qquer coisa volto a postar, obrigado !

F
fernandopaiva

andre.froes:
Isso daí é bem facil de se fazer. Como eu te diria para implementar:

  1. No teu banco de dados, voce tem que identificar a situacao do lote (voce ja tem isso)
  2. Por meio dessa propriedade, no jquery, você colore de acordo com a disponibilidade do lote
  3. Faça hotspot na imagem, utilize esse tutorial aqui que você tira de letra, e ainda pode integrar em um sistema desktop.

Opa, estou seguindo o esquema q vc me passou e estou com algumas dúvidas. No meu SELECT eu trago o lote e a situação(vendido,reservado).
Estou vendo um exemplo do JQuery e eles trabalham com coordenadas, o exemplo ta aqui: view-source:http://davidlynch.org/projects/maphilight/docs/demo_usa.html
O que acontece é q não estou entendendo como jogar isso no meu mapa, para pegar a localização do terreno e mudar sua situação.

Esse mapa aqui é basicamente o q eu preciso: http://davidlynch.org/projects/maphilight/docs/demo_usa.html .Mas menos passar o mouse em cima para colorir, ou seja, mudou a situação ja colore no mapa:

Desde já, obrigado. !

A
andre.froes

Para ficar mais facild e entender o exemplo, eu refiz o que você colocou removendo o que não precisa:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery maphilight documentation</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://davidlynch.org/projects/maphilight/jquery.maphilight.min.js"></script>
	<script type="text/javascript">$(function() {
		$('.map').maphilight();
	});</script>
</head>
<body>
<h1>The United States of America</h1>
<p>This map generated from <a href="http://en.wikipedia.org/wiki/Image:Map_of_USA_with_state_names.svg">"Map of USA with state names.svg"</a>.</p>
<img  src="http://davidlynch.org/projects/maphilight/docs/demo_usa.png"   >
&lt;map name="usa"&gt;

&lt;area href="#" title="CO" shape="poly" coords="368,246, 256,235, 245,320, 346,330, 363,331"&gt;
&lt;/map&gt;
<a >Back to the index</a>
&lt;/body&gt;
&lt;/html&gt;

(pode copiar e colar se você está com internet desbloqueada, eu arrumei para funcionar na máquina, basta apenas salvar como html)

somente o estado do Colorado vai estar selecionado, ele trabalha com área de polígono, aquele tanto de número é o traçado perfeito em volta do estado que o desenvolvedor fez, mas basta você fazer o traçado simples em volta da area que tu quer.

F
fernandopaiva
andre.froes:
Para ficar mais facild e entender o exemplo, eu refiz o que você colocou removendo o que não precisa: 
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;meta charset="utf-8"&gt;
	&lt;title&gt;jQuery maphilight documentation&lt;/title&gt;
	&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"&gt;&lt;/script&gt;
	&lt;script type="text/javascript" src="http://davidlynch.org/projects/maphilight/jquery.maphilight.min.js"&gt;&lt;/script&gt;
	&lt;script type="text/javascript"&gt;$(function() {
		$('.map').maphilight();
	});&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;The United States of America&lt;/h1&gt;
<p>This map generated from <a href="http://en.wikipedia.org/wiki/Image:Map_of_USA_with_state_names.svg">"Map of USA with state names.svg"</a>.</p>
<img  src="http://davidlynch.org/projects/maphilight/docs/demo_usa.png"   >
&lt;map name="usa"&gt;

&lt;area href="#" title="CO" shape="poly" coords="368,246, 256,235, 245,320, 346,330, 363,331"&gt;
&lt;/map&gt;
<a >Back to the index</a>
&lt;/body&gt;
&lt;/html&gt;

(pode copiar e colar se você está com internet desbloqueada, eu arrumei para funcionar na máquina, basta apenas salvar como html)

somente o estado do Colorado vai estar selecionado, ele trabalha com área de polígono, aquele tanto de número é o traçado perfeito em volta do estado que o desenvolvedor fez, mas basta você fazer o traçado simples em volta da area que tu quer.

Sim sim, até ai perfeito, eu havia sacado como funciona, inclusive havia feito isso q vc propoe....O problema são as coordenadas na propriedade "coords", como eu sei as coordenadas dos terrenos para pintar, sacou a duvida ?? ...kkk !!! E também, como eu pego o retorno do meu SELECT no banco e trabalho com o resultado....sacou ?

Desculpe a ignorancia, mas é meu primeiro trabalho usando WEB dessa maneira, nunca fiz nada igual a isso.

Obrigado pela atenção.

A
andre.froes

Para saber as coordenadas, basta procurar um plugin que informe as coordenadas x/y, no google encontrei isso daqui: http://pastebin.me/49b5ab74275f5
Quanto a como utilizar colorir do banco de dados, basta você utilizar um pouco de lógica correto?

Você tem 3 opções, então, crie 3 maps highlight, compra, reserva e nenhum, o que for compra, você lança dentro do map que você vai deixar de uma cor, assim você faz com os outros 2 também(você pode fazer tudo em um unico map, mas para deixar mais legível o código, coloque separados)

e em cada highlight tu vai fazer assim:

em jsf com ui:repeat

&lt;map name="disponiveis"&gt;
       &lt;ui:repeat value="#{seuBean.lotesDisponiveis}" var="lote"&gt;
              &lt;area href="#" shape="poly" coords="#{lote.coord}" data-maphilight='{"strokeColor":"CorDaLinhaQieCirculaOLote","strokeWidth":5(grossura da lnha que circula o lote),"fillColor":"UmaCorExa","fillOpacity":0.6}' title="#{lote.nome}"&gt;
        &lt;/ui:repeat&gt;
&lt;/map

mais fácil que tirar bug de html né não?
no seu banco de dados, você pode criar um lote que tem essas informações:

id(default auto-integer)
cood(varchar(255))
nome(varchar(255))
disponibilidade(Integer (define 1,2,3 para cada tipo de disponibilidade))
>

F
fernandopaiva

andre.froes:
Para saber as coordenadas, basta procurar um plugin que informe as coordenadas x/y, no google encontrei isso daqui: http://pastebin.me/49b5ab74275f5
Quanto a como utilizar colorir do banco de dados, basta você utilizar um pouco de lógica correto?

Você tem 3 opções, então, crie 3 maps highlight, compra, reserva e nenhum, o que for compra, você lança dentro do map que você vai deixar de uma cor, assim você faz com os outros 2 também(você pode fazer tudo em um unico map, mas para deixar mais legível o código, coloque separados)

e em cada highlight tu vai fazer assim:

em jsf com ui:repeat

&lt;map name="disponiveis"&gt;
       &lt;ui:repeat value="#{seuBean.lotesDisponiveis}" var="lote"&gt;
              &lt;area href="#" shape="poly" coords="#{lote.coord}" data-maphilight='{"strokeColor":"CorDaLinhaQieCirculaOLote","strokeWidth":5(grossura da lnha que circula o lote),"fillColor":"UmaCorExa","fillOpacity":0.6}' title="#{lote.nome}"&gt;
        &lt;/ui:repeat&gt;
&lt;/map

mais fácil que tirar bug de html né não?
no seu banco de dados, você pode criar um lote que tem essas informações:

id(default auto-integer)
cood(varchar(255))
nome(varchar(255))
disponibilidade(Integer (define 1,2,3 para cada tipo de disponibilidade))
>

kkkkkk !!! Muito boommmm…vou testar aqui, qquer coisa te falo…

Desde já, obrigadooo…:wink:

F
fernandopaiva

andre.froes:
Para saber as coordenadas, basta procurar um plugin que informe as coordenadas x/y, no google encontrei isso daqui: http://pastebin.me/49b5ab74275f5
Quanto a como utilizar colorir do banco de dados, basta você utilizar um pouco de lógica correto?

Você tem 3 opções, então, crie 3 maps highlight, compra, reserva e nenhum, o que for compra, você lança dentro do map que você vai deixar de uma cor, assim você faz com os outros 2 também(você pode fazer tudo em um unico map, mas para deixar mais legível o código, coloque separados)

e em cada highlight tu vai fazer assim:

em jsf com ui:repeat

&lt;map name="disponiveis"&gt;
       &lt;ui:repeat value="#{seuBean.lotesDisponiveis}" var="lote"&gt;
              &lt;area href="#" shape="poly" coords="#{lote.coord}" data-maphilight='{"strokeColor":"CorDaLinhaQieCirculaOLote","strokeWidth":5(grossura da lnha que circula o lote),"fillColor":"UmaCorExa","fillOpacity":0.6}' title="#{lote.nome}"&gt;
        &lt;/ui:repeat&gt;
&lt;/map

mais fácil que tirar bug de html né não?
no seu banco de dados, você pode criar um lote que tem essas informações:

id(default auto-integer)
cood(varchar(255))
nome(varchar(255))
disponibilidade(Integer (define 1,2,3 para cada tipo de disponibilidade))
>

Opa, funcionou blzinha…To pegando do banco e ja preenchendo os terrenos conforme preciso, mas ainda tenho 2 problemas faltantes pra resolver.

1 - A imagem do terreno só pinta quando passo o mouse por cima do terreno. E eu preciso que quando abrir a pagina ja estejam todos pintandos conforme seus status.
2 - Preciso criar uma Thread para que a cada 1minuto essa página se atualize.

Aqui como ficou o que eu fiz.

&lt;%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;

&lt;head&gt;
	&lt;%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %&gt;
	&lt;style type="text/css"&gt;
		@import url("layout.css");
	&lt;/style&gt;
 	&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"&gt;&lt;/script&gt;  
    &lt;script type="text/javascript" src="http://davidlynch.org/projects/maphilight/jquery.maphilight.min.js"&gt;&lt;/script&gt;  
 	&lt;script type="text/javascript"&gt;
 		$(function() {
			$('.map').maphilight();
		});&lt;/script&gt; 
	&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
		&lt;title&gt;.: Empreendimento Residencial Thobias Landim :: 17. 3331-3141 :.&lt;/title&gt;
&lt;/head&gt;


&lt;body&gt;
 
	&lt;center&gt;
		<img   >
	&lt;/center&gt;
	
&lt;map name="thlandim"&gt; 
	&lt;jsp:useBean id="dao" class="br.com.residencialthobiaslandim.dao.LotesTBLandimDAO"/&gt;
		&lt;c:forEach var="lote" items="${dao.lotes}"&gt;
			&lt;c:choose&gt;
				&lt;c:when test='${lote.tipRes == "RESERVA"}'&gt;
					&lt;area href="#" shape="poly" coords="${lote.coordenadas}" data-maphilight='{"stroke":false,"fillColor":"FEFD02","fillOpacity":0.5}' title="${lote.lotNom}"/&gt;
				&lt;/c:when&gt;
				&lt;c:when test='${lote.tipRes == "VENDA"}'&gt;
					&lt;area href="#" shape="poly" coords="${lote.coordenadas}" data-maphilight='{"stroke":false,"fillColor":"12F209","fillOpacity":0.5}' title="${lote.lotNom}"/&gt;
				&lt;/c:when&gt;
			&lt;/c:choose&gt;	
		&lt;/c:forEach&gt;
&lt;/map&gt;

&lt;/body&gt;
&lt;/html&gt;

Vlw ae, obrigado…:wink:

F
fernandopaiva

Tudo resolvido, agora os mapas ficam todos pintados conforme a venda ou reserva.
Fiz assim

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
	<style type="text/css">
		@import url("layout.css");
	</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>    
    <script type="text/javascript" src="http://davidlynch.org/projects/maphilight/jquery.maphilight.min.js"></script>     
 	
     	 <script type="text/javascript">
     		setTimeout("location.reload();",1000*30);
     		$(function() {
					$('.map').maphilight();
			});
     	 </script> 
 	
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>.: Empreendimento Residencial Thobias Landim :: 17. 3131-3141 :.</title>
</head>


<body>


<div id="divPrincipal">
	<center>
	<img class="map" src="imagens/painelTV.jpg" usemap="#thlandim" alt="Residencial Thobias Landim">
	</center>
	
	<map name="thlandim"> 
		<jsp:useBean id="dao" class="br.com.residencialthobiaslandim.dao.LotesTBLandimDAO"/>
			<c:forEach var="lote" items="${dao.lotes}">
				<c:choose>
					<c:when test='${lote.tipRes == "RESERVA"}'>
						<area href="#" shape="poly" coords="${lote.coordenadas}" data-maphilight='{"strokeColor":"FF8C00","fillColor":"FEFD02","fillOpacity":0.5,"alwaysOn":true}' title="${lote.lotNom}"/>
					</c:when>
					<c:when test='${lote.tipRes == "VENDA"}'>
						<area href="#" shape="poly" coords="${lote.coordenadas}" data-maphilight='{"strokeColor":"006400","fillColor":"12F209","fillOpacity":0.5,"alwaysOn":true}' title="${lote.lotNom}"/>
					</c:when>
				</c:choose>	
			</c:forEach>
	</map> 
</div>


</body>
</html>
Criado 21 de junho de 2012
Ultima resposta 26 de jun. de 2012
Respostas 9
Participantes 2

Topicos relacionados

Colocar ícone em botão 8 respostas Erro de Byte inválido 1 da sequência UTF-8 do byte 1 JSF + IReport 8 respostas LazyInitializationException - Spring/Hibernate4/JPA (Resolvido) 6 respostas [Resolvido] Como fazer o parse de uma resposta SOAP pelo cliente gerado de um WSDL (Correios) 9 respostas Jboss as 7 com hibernate 3.3 12 respostas
Alura Sistemas operacionais: entenda seu conceito e suas funções Descubra o que são sistemas operacionais, suas funções e tipos. Aprenda tudo de forma clara e objetiva. Não perca tempo!
Casa do Codigo Aprenda JavaScript com Dashboards: Seus primeiros passos... Por Lucas Tauil — Casa do Codigo