» Início » Desenvolvimento » Ajax » Como fazer um mapa do Brasil em Flash, ASP e AJAX

Avaliação: | Publicado em: 02/11/2006

Como fazer um mapa do Brasil em Flash, ASP e AJAX

Dirceu Pauka Júnior É um programador que adora ferramentas simples para auxiliar tanto na programação server-side como client-side, por isso se foca em linguagens interpretadas como Ruby e Javascript e frameworks que auxiliam no desenvolvimento como Rails e Merb para Ruby e jQuery para Javascript.

Olá, em meu primeiro artigo no Plug! vou mostrar como com um código simples você pode criar um mapa brasileiro que diferencia a cor dos estados enviados em uma variável simples. Esse mapa tem aplicação em paginas do tipo: Representantes em sites institucionais.

A definição de variável simples neste artigo significa que ela é um String, e não um Array ou outro tipo de objeto.

Um exemplo dessa variável simples seria:

vEstados = "SP,PR,PE"

Para executar os próximos passos é recomendavel que o leitor baixe o arquivo mapa_brasileiro.zip que se encontra anexo à este artigo. Abrindo o .fla você vai ter o mapa brasileiro e uma caixa de texto (usada para um eventual debug).

Como o objetivo desse artigo é ensinar e não entregar ao leitor algo pronto, eventuais alterações por parte do leitor serão necessarias, assim com interpletações. Vamos ao código por partes. Para começar, no layer actions copie o seguinte AS:

vEstados = "SP,PR,PE"
var my_array:Array = vEstados.split(",");

Com isso você definiu a variavel vEstados e quebrou o seu conteúdo em um Array.

A partir daqui um minimo conhecimento sobre o objeto Array é requerido, por isso é recomendado a leitura na documentação sobre esse objeto.

Você deve saber que um Array é uma coleção de itens. Para testar isso em nosso código adicione a linha abaixo ao Flash.

trace(my_array[0]);

E você terá o retorno SP no Output, que no caso é o primeiro item da coleção.

Para marcar os Estados que estiverem dentro do Array, vamos usar o For. Adicione ao seu AS:

for (var i = 0; i<my_array.length; i++) {
   tEstado(my_array[i]);
}

Para entender está parte também é necessario a leitura sobre o objeto For na documentação. Mas resumidamente o que este trecho do código vai fazer é executar a função tEstado() para cada elemento da coleção my_array.

A função tEstado() é responsavel por marcar com uma cor diferente o MC do Estado que estiver na coleção. Além de mudar a cor o nosso MC vai ter uma ação de onRelease para que quando o usuario clicar em um estado ativo, seja exibido a lista de "Representantes" por exemplo, do estado em questão. Para tal usamos o seguinte AS:

function tEstado(estado) {
   var my_color1:Color = new Color(estado);
   my_color1.setRGB(0xF7D137);
   eval(estado).onRollOver = function() {
      var my_color2:Color = new Color(this);
      my_color2.setRGB(0xE3C035);
   };
   eval(estado).onRollOut = function() {
      var my_color3:Color = new Color(this);
      my_color3.setRGB(0xF7D137);
   };
   eval(estado).onRelease = function() {
      getURL("javascript:mostraEstado('"+estado+"');");
   };
}

Por partes: Primeiro é definida uma nova cor para o MC do estado (#F7D137), então são definidas 3 ações para o MC.
onRollOver, responsavel pelo efeito ao passar o mouse em cima.
onRollOut, responsavel pelo efeito ao retirar o mouse de cima (no caso volta a mesma cor de antes: #F7D137).
onRelease, responsavel pela ação executado quando o usuario clica em cima.

O nossa trabalho no Flash agora está praticamente pronto, gerando o .fla você vera o mapa com os estados de São Paulo, Paraná e Pernambuco com uma cor distinta dos demais.

Não seria interessante ter um mapa desse sem que o cadastro dos representantes fosse feito de forma "Dinamica", porém construir um cadastro desse tipo levaria um certo tempo e conhecimento intermediario de alguma linguagem de programação e base de dados. A partir de agora vou mostrar como é possivel que os estados sejam marcados como ativos sem que a variavel vEstados seja definida no propio arquivo do Flash.

Enviar dados para dentro do Flash se tornou muito mais facil usando um método chamado FlashVars.

De forma simples a ação do FlashVars é: Incorporando um parametro HTML onde o Flash é "chamado", envia valores de variaveis para dentro do Movie.

Dentro do Flash comente a linha que define os estado. Seu código completo e definitivo devera ser o seguinte (AS):

//vEstados = "SP,PR,PE";
function tEstado(estado) {
   var my_color1:Color = new Color(estado);
   my_color1.setRGB(0xF7D137);
   eval(estado).onRollOver = function() {
      var my_color2:Color = new Color(this);
      my_color2.setRGB(0xE3C035);
   };
   eval(estado).onRollOut = function() {
      var my_color3:Color = new Color(this);
      my_color3.setRGB(0xF7D137);
   };
   eval(estado).onRelease = function() {
      getURL("javascript:mostraEstado('"+estado+"');");
   };
}
var my_array:Array = vEstados.split(",");
//trace(my_array[0]);
for (var i = 0; i<my_array.length; i++) {
   tEstado(my_array[i]);
}

Caso o seu objetivo não é tranformar essa funcionalidade em dinamica, e somente apresentar os estados que possuem representantes e permitir que o javascript definido no Flash seja executado, clique aqui para pular essa parte sobre base de dados.

A partir daqui são usados códigos em ASP, porém é facil entender como tranformar para PHP, Ruby on Rails ou outra linguagem, lembre-se que não importa a linguagem ou a forma que está organizada a sua base de dados, o que você precisa agora é gerar um retorno dos estados que possuam representantes.

Caso você esteja utilizando ASP e supondo que possua uma tabela para representantes que tenha a coluna estados, uma forma simples de escrever os estados que possuem representantes seria (ASP):

<%
SQL = "SELECT DISTINCT estado FROM representantes"
set rs = bd.execute(SQL)
i = 0
if not rs.eof then
   do until rs.eof
   i = i + 1
   if i <> 1 then
      estados = estados & "," & rs("estado")
   else
      estados = estados & rs("estado")
   end if
   rs.movenext
   loop
end if
%>

Uma verificação que pode ser notada é se é o primeiro registro ou não, isso pode ser feito de uma forma melhor (sempre pode), porém por hora ficamos assim. Essa verificação fez se necessario para evitar que um virgula no começo ou no final da variavel que será enviada para o Flash apareça, isso pode causar erros na hora de quebrar a String em Array.

Testando o ASP teriamos que estados retornaria por exemplo: "MT,AL". Para enviar isso para o Flash é simples.

Adicione o parametro a seguir no seu objeto Flash do HTML:

<param name="FlashVars" value="vEstados=<%=estados%>" />

Pronto, o swf agora recebe vEstados via FlashVars.

Vamos agora fazer o AJAX funcionar. Dentro do mesmo arquivo ou em um arquivo externo de .js cole o seguinte código JavaScript:

try{
   xmlhttp = new XMLHttpRequest();
}catch(ee){
   try{
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
   }catch(e){
      try{
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }catch(E){
        xmlhttp = false;
      }
   }
}
function fxmlhttp(xmlhttp,conteudo) {
   xmlhttp.onreadystatechange=function() {
      if (xmlhttp.readyState==4){
         var texto=xmlhttp.responseText;
         texto=texto.replace(/+/g," ")
         texto=unescape(texto);
         conteudo.innerHTML = texto;
      }
   }
   xmlhttp.send(null)
}
function mostraEstado(oestado) {
   var conteudo=document.getElementById("divRepre");
   xmlhttp.open("GET", "lista_representante.asp?estado="+oestado,true);
   fxmlhttp(xmlhttp,conteudo);
}


Está é uma função AJAX bem resumida e que traz alguns problemas como: Botão Voltar do navegador não funciona, não possui uma URL direta impossibilitando histórico e outras funcionalidades. Porém serve de exemplo à demonstração.

No exemplo usando o JavaScript igual ao meu, é necessario que você insira um elemento (uma DIV por exemplo) no HTML, nele será carregada a pagina lista_representante.asp.

Um exemplo de como poderia ser a consulta SQL da pagina pagina lista_representante.asp:

<%
SQL = "SELECT * FROM representantes WHERE estado="&Request("estado")
%>

Como disse no inicio do artigo o objetivo não é entregar uma funcionalidade pronta, e sim ensinar a usar. Então fica a cargo do leitor eventuais mudanças necessarias para que o exemplo fosse feito de forma "Estatica".

Alguns problemas podem aparecer no meio do desenvolvimento, principalmente com respeito à JavaScript sendo chamado via Flash, correções recentes nos navegadores estão bloqueando esse tipo de chamada.

Fique à vontade para modificar o arquivo e/ou suas funcionalidades, melhoramentos são sempre bem vindos.

Espero comentários, elogios, críticas e sugestões.
Até o próximo artigo!

• mapa_brasileiro.zip