Flex 4 e Geolocation usando no navegador do seu desktop

Mundo moderno, Web moderna, querendo ou não você vai acabar criando ou vendo em algum site, a integração da sua localização com o aplicativo, e isso acaba virando regra em algumas opções que temos por ai. Imagine você ter formulários mais inteligentes, que ao invés de pegar o endereço completo do cliente, você pega sua latitude, longitude e o número da residência e complemento. Bingo! Você cativa inúmeros usuários.

O HTML 5, ou melhor HTML, tem uma API em Javascript padronizada pela W3C, que possui essa funcionabilidade, pegar sua localização através de IP ou registro do seu ponto de acesso wi-fi caso esteja cadastrado na base do NIC ou coisa parecida.

Essa API ao menos funciona nos seguintes navegadores (Firefox 3.5+, Chrome 8+, IE9+,Opera 10.6+,Safari 5), conseqüentemente se seu usuário tiver um navegador anterior a essas versões, peça-o gentilmente para atualizar, assim você consegue usar essa funcionabilidade.

Infelizmente, o Flash Player ainda não tira proveito disso. Logo em breve acredito que ele utilize esse artifício. Hoje o Adobe AIR 2.5 possui API pronta para isso, só que para celular, para Desktop você tem que fazer um workaround, ou no popular brasileiro, da-se um jeito.

O Flash Player comunica-se muito bem com o Javascript, e vice-versa. Por que não usar esse canal de comunicação e criarmos nosso aplicativo Flex que tire proveito da API do navegador já padronizada e usar a classe External Interface do Flash Player para pegar a latitude, longitude e por ai vai.

Mão na massa, ou melhor no código!

Supondo que você já tenha o Flash Builder devidamente instalado. você pode seguir o passo-a-passo.

1. Crie um novo Projeto em seu Flash Builder
2. geo

Analise a extrutura de nosso projeto, veja que existe uma pasta chamada html-template, abra ela e você vai ver que existe 3 arquivos e 1 diretório, index.template.html, playerProdutInstall.swf, swfobject.js e o diretório history

O que nos interesse nesse momento é o index.template.html, caso você esteja usando o Flash Builder puro sem nenhum editor de HTML, você pode clicar sobre o botão direito do mouse em cima do arquivo, escolher a opção Open With- > Text Editor.

Como a publicação do Flash Builder é inteiramente dinâmica, queremos que nossa função de pegar o geolocation seja dinamica. Ou melhor, respeite a execução do projeto sempre que você der um build ou run.

3. Próximo passo é criar a função em javascript nesse arquivo de index.template.html para pegar o geolocation.

Para inserir o código em Javascript, coloque no intervalo .

        

Criei 2 funções, 1 que fará a requisição, para o navegador, e automaticamente ele vai pedir ao seu usuário para permitir ou não o uso de sua posição para aquela aplicação em questão. Aparecendo um pequeno alerta do navegador. É interessante notar ou avisar ao seu usuário sobre isso, por que o alerta de pedido de geolocation é um alerta similar a barra de lembrar senha do navegador, e poucos podem não prestar atenção a essa barra e ficar sem saber o que fazer em algum determinado momento em sua aplicação.

geo2

Preste atenção na função document.getElementById, eu uso o js para aplicar o envio automático da minha localização através da passagem de parametro do meu swf, aplicando a sintaxe básica do SWFObject.

Não esqueça de marcar a opção , caso contrário ele não vai enviar a posição ou se comunicar com o js.
Por que alterar o index.template.html?

Por que sempre que você publica ou executa o Run no Flash Builder ele gera novamente um arquivo de html, swf, js sempre. Então se você altera ele uma única vez no template, você não precisará fazer isso sempre.

Okay, feito isso. Vamos ao Flex.

Crie uma nova Classe e estenda da classe EventDispatcher, eu chamei minha classe de GeoLocation.as.

package
{
	import flash.events.Event;
	import flash.events.EventDispatcher;
	import flash.external.ExternalInterface;

	public class GeoLocation extends EventDispatcher
	{

		private var _lat:String = "";
		private var _long:String = "";


		public function GeoLocation()
		{
			super();
			//adiciono primeiro o callback
			ExternalInterface.addCallback("enviarLatLong",geoInfo);
			// Chamo posteriormente o requisitarGeo
			ExternalInterface.call("requisitarGeo");
		}


		[Bindable(event="change")]
		public function get latitude():String
		{
			return _lat;
		}

		public function set latitude(value:String):void
		{
				_lat = value;
		}

		[Bindable(event="change")]
		public function get longitude():String
		{
			return _long;
		}

		public function set longitude(value:String):void
		{
				_long = value;

		}

		private function geoInfo(lati:String,longi:String):void
		{
			_lat = lati;
			_long = longi;
			dispatchEvent(new Event(Event.CHANGE));
		}

	}
}

Com a classe GeoLocation, eu consigo agora pegar as informações de localização, embora eu não tratei nenhum erro, é importante você notar isso quando for implementar, lembrando que essa classe não é visível, ela é apenas para exemplo.

Feito isso, como implementar a classe na sua aplicação Flex?

Simples, dentro do tag , eu instancio a classe, já que a chamada do processo de externo chamei no construtor. Então veja como podemos usar.




	
		
		
	
		
				
		

		
		


E voilá, temos as coordenadas estabelecidas.

geo3

Ok, com a latitude e longitude eu consigo usar o Google Maps for Flash e criar um mapa que aponte.

Uma opinião sobre “Flex 4 e Geolocation usando no navegador do seu desktop”

Deixe uma resposta

Conecte-se com:

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>