/*setembro « 2009 « SP-GTUG*/

Archive for setembro, 2009

Entendendo um pouco a API Google Maps

O Google dispensa comentários com todas as inovações que ele faz, hoje falaremos um pouco sobre a API do Google Maps. API (Application Programming Interface ou Interface de Programação de Aplicativos) é a forma que temos de nos comunicar com as funções pré-programadas definidas pelo fornecedor, no caso, Google.

Esta API permite a criação de mapas com locais definidos, controle de zoom, tipos de mapa, geração de rotas, pesquisa por estabelecimentos, e muitas coisas mais.

Como começar

A primeira coisa que devemos fazer é acessar o link da página inicial da API (http://code.google.com/intl/pt-BR/apis/maps/signup.html), ler e aceitar o contrato, digitar a url do site que deseja usar a API e clicar no botão “Gerar chave da API”. (veja a figura 1)

Figura 1: Aceitando o contrato
Figura 1: Aceitando o contrato

Após isso, caso ainda não esteja logado com a sua “Google Account”, o Google pedirá para efetuar o login, nesse passo você obterá a chave para usar a API somente na url que digitou o site. Caso queira usar a API em outro site, deverá repetir esse processo para cada site que quiser. (Veja a figura 2)

Figura 2: Chave Gerada
Figura 2: Chave Gerada

Agora que já temos a chave, podemos usar a API no site. O Google disponibiliza alguns exemplos, para trabalhar com JavaScript, Flash, Serviço, etc..

Neste artigo abordaremos o uso da API para JavaScript e para isso devemos adicionar o seguinte script dentro do bloco head do HTML, no local “SUA_CHAVE”, você deve colocar a chave que o Google gerou para o site, veja o campo Your key is na figura 2.

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=SUA_CHAVE"></script>

O código de base para começar o aprendizado está abaixo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<title>Aprendendo a Usar a API Google Maps | Paulo Fernandes </title>
 
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"/>
 
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAAaVFxs6kNq7gWY59qf5XMxSec6s_uUscdbTyPSy8oWl8zYzqFRRanjFebOU60thMmEQQDEPx3A3y5Q"></script>
 
<script>
 
var map = null;
 
var geocoder = null;
 
function inicializa() {
 
if (GBrowserIsCompatible()) {
 
map = new GMap2(document.getElementById("mapa_base"));
 
map.setCenter(new GLatLng(-22.9035393, -43.2095869), 13);
 
geocoder = new GClientGeocoder();
 
}
 
}
 
</script>
 
</head>
 
<body>
 
<div style="width: 500px; height: 300px"></div>
 
</body>
 
</html>

Este código não está difícil de entender, explicaremos as partes mais importantes:

  • No onload(), a função inicializa() verifica se o navegador do usuário é compatível com a API Google Maps, caso positivo, o método captura uma div com id igual a mapa_base e defini o mapa centralizado. O local padrão que escolhi foi à cidade do Rio de Janeiro, que é representada pelas seguintes coordenadas de latitude e longitude -22.9035393, -43.2095869, respectivamente. O número seguinte, 13 representa o zoom no mapa, quando menor esse número, menor o zoom.
  • No onunload(), a função GUnload() serve para limpar as estruturas internas e liberar a memória.

Para mais informações sobre os métodos acesse a documentação em português, através do seguinte link: http://code.google.com/intl/pt-BR/apis/maps/documentation/reference.html. Essa documentação está interessante, e será a base para o artigo.

Exemplos Simples

No link a seguir podemos analisar diversos exemplos do poder desta API, http://code.google.com/intl/pt-BR/apis/maps/documentation/demogallery.html.

Para o artigo, colocaremos alguns exemplos interessantes para inserir um mapa personalizado no site.

  • Descobrir qual a latitude e longitude do endereço: Isso é útil quando se pretende definir algum local como default ao entrar no site. Para isso faremos um formulário onde você digita o endereço e o mapa é carregado no endereço e exibe o posicionamento de latitude e longitude. O código JavaScript é esse:
function mostraEndereco(){
 
var endereco = document.getElementById("endereco").value;
 
if ( geocoder ) {
 
geocoder.getLatLng(endereco,
 
function(point){
 
if ( !point ) {
 
alert(endereco + " não encontrado");
 
} else {
 
map.setCenter(point, 13);
 
var marca = new GMarker(point);
 
map.addOverlay(marca);
 
marca.openInfoWindowHtml( endereco + "<br />" + point.toString() );
 
}
 
}
 
);
 
} else {
 
alert("GeoCoder não identificado");
 
}
 
}

E no HTML:

<form action="#" method="get">
 
<input size=50value="São Paulo" />
 
<input value="Mostrar Latitude/Longitude"/>
 
</form>
  • Definindo um evento: Para definir um evento precisamos utilizar o objeto GEvent. Seguindo a mesma linha do código, definiremos um evento, que será disparado toda vez que o marcador for clicado, fazendo com que a posição geográfica seja exibida, devemos colocar esse evento na função mostrarEndereco(), pois é nela que definimos o marcador.
GEvent.addListener(marca, "click", function() {
     marca.openInfoWindowHtml( endereco + "<br />" + point.toString() ); 
});
  • Adicionando zoom no mapa: Para adicionar o controle de zoom, devemos adicionar um controle ao mapa, através do método addControl() e a esse controle devemos adicionar o controle do mapa, o mais correto é adicionar isso na função de inicialização: inicializa(), a linha completa que deve ser inserida é está:
map.addControl( new GSmallMapControl() );
  • Adicionando forma de visualização: Podemos definir um controle para que o usuário possa ver o endereço na forma de mapa, hibrido ou satélite. Para isso devemos seguir a mesma linha de raciocínio para inserir o zoom, que seria adicionar um controle.
map.addControl( new GMapTypeControl() );

Exemplo Avançado

Para mostrar algo avançado que tal traçar a rota do ponto A ao ponto B? Para isso precisaremos que o usuário digite os valores dos pontos A e B. Para traçar a rota, vamos reescrever todo o exemplo, simplificando as configurações.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<title>Aprendendo a Usar a API Google Maps - Obter Rota | Paulo Fernandes </title>
 
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"/>
 
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAAaVFxs6kNq7gWY59qf5XMxSec6s_uUscdbTyPSy8oWl8zYzqFRRanjFebOU60thMmEQQDEPx3A3y5Q"></script>
 
<script>
 
var map = null;
 
var geocoder = null;
 
var from;
 
var to;
 
var directionsPanel = null;
 
var directions = null;
 
function inicializa() {
 
if (GBrowserIsCompatible()) {
 
map = new GMap2(document.getElementById("mapa_base"));
 
map.setCenter(new GLatLng(-22.5489433, -46.6388182), 7);
 
geocoder = new GClientGeocoder();
 
map.addControl( new GSmallMapControl() );
 
map.addControl( new GMapTypeControl() );
 
directionsPanel = document.getElementById("route");
 
directions = new GDirections(map, directionsPanel);
 
}
 
}
 
function gerarRota(){
 
from = document.getElementById("partida").value;
 
to = document.getElementById("destino").value;
 
if ( geocoder ) {
 
geocoder.getLatLng(from,
 
function(point){
 
if ( !point ) {
 
alert(from + " não encontrado");
 
}
 
}
 
);
 
geocoder.getLatLng(to,
 
function(point){
 
if ( !point ) {
 
alert(to + " não encontrado");
 
}
 
}
 
);
 
var string = "from: " + from + " to: "+to;
 
directions.clear();
 
directions.load(string);
 
GEvent.addListener(directions, "error", erroGetRoute);
 
} else {
 
alert("GeoCoder não identificado");
 
}
 
}
 
function erroGetRoute(){
 
alert("Não foi possivel traçar a rota de: " + from + " para: " + to );
 
}
 
</script>
 
</head>
 
<body>
 
<form action="#" method="get">
 
<label for="partida">Partida</label>
 
<input value="São Paulo" size="50" />
 
<br />
 
<label for="destino">Destino</label>
 
<input value="Rio de Janeiro" size="50" />
 
<br />
 
<input value="Obter Rota"/>
 
</form>
 
<div style="width: 800px; height: 500px;"></div>
 
<div style="width: 300px; height: 500px; position: absolute; right: 0; top: 0;"></div>
 
</body>
 
</html>

Para mostrar a rota, tivemos que criar uma nova div com o id igual à “route”, é neste local que exibiremos o passo a passo da rota traçada. Essa captura do local foi feito nesta linha directionsPanel = document.getElementById(“route”); Para traçar a rota, devemos instanciar o objeto GDirections e informar para ele carregar a rota através do método directions.load(string);

No método load devemos passar os dois endereços escritos por extenso, antes o endereço de partida devemos atribuir from: e antes do endereço de destino to: , ficando a string completa from: São Paulo to: Rio de Janeiro , por exemplo.

Caso algum dos dois endereços não seja encontrado, o código exibirá um alert informando que a rota não pode ser traçada.

Conclusão

Com este artigo pudemos perceber o poder que a API nos dá, ela nos fornece outras diversas possibilidades que podem ser vistas na documentação oficial. O objetivo do artigo foi introduzir os principais conceitos e o que se pode utilizar no site de sua empresa, por exemplo.

Algo que devemos tomar cuidado é na declaração das variáveis, pois o local onde ela é declarada pode fazer com que a API se porte de forma indesejada. Por exemplo, quando declaramos uma marca, se tivemos declarado ela fora da função a cada novo endereço, a marca anterior seria perdida, mas repare que a informação de latitude e longitude é perdida, mantendo somente a ultima. Faça o teste, declare a variável fora do método, acredito que achará bem interessante.

Pode ser que exista outra forma de fazer o que demonstramos ou até que o que foi demonstrado esteja errado, mesmo que aparentemente funcionando.

Tags: ,

Iniciando com o GWT

Sabemos que deixar uma interface rica e que funcione nos principais navegadores é muito difícil devido à falta de padrões existentes entre os navegadores. O GWT foi criado para facilitar essa tarefa para os desenvolvedores, pois podem passar até 90% do tempo diário para contornar as peculiaridades de cada navegador.

O GWT (Google Web Toolkit) é um framework para desenvolvimento web que tem como objetivo facilitar a vida dos desenvolvedores, pois possui um conjunto de ferramentas, API e componentes visuais que facilitam a criação de modernas, ricas e dinâmicas interfaces.

A criação do código para geração da interface é escrita usando Java e não JavaScript, o que torna o desenvolvimento muito mais fácil, pois graças as IDEs (ferramentas que auxiliam o desenvolvimento, muita delas gratuitas e conhecidas), os erros podem ser descobertos em tempo de compilação, Java é fortemente tipada e é muito mais fácil encontrar desenvolvedores Java no mercado do que JavaScript.

No momento que a classe Java é compilada o GWT faz o papel de compilador JavaScript, fazendo com que o código Java seja convertido em JavaScript. O Hosted Mode é utilizado como debbuger do código facilitando a identificação dos erros devido ao seu console de administração.

Uma funcionalidade muito interessante é que com o GWT minimizamos ao máximo o tamanho do arquivo JavaScript, ao invés de fazer vários “IFs” no código para saber qual o navegador, qual o idioma, etc., ele gera um arquivo JavaScript para cada tipo de combinação de navegador e se por acaso sua aplicação for internacionalizada, o GWT gerará um arquivo JavaScript para cada tipo de idioma. O responsável por saber qual arquivo será utilizado na hora de exibição para o usuário é o servidor, tudo isso ocorre transparentemente para os usuários.

Começando

Para iniciarmos uma aplicação usando o GWT, precisamos fazer o download de suas bibliotecas que podem ser baixadas nesse link, http://code.google.com/intl/pt-BR/webtoolkit/. Além disso, precisaremos de uma IDE, usaremos o Eclipse IDE versão Ganymede que pode ser baixado neste link, http://www.eclipse.org/downloads/. Para facilitar ainda mais o desenvolvimento, devemos fazer o download do plugin do GWT para o Eclipse Ganymede, que pode ser encontrado neste link, http://code.google.com/intl/pt-BR/eclipse/docs/download.html.

Neste passo não vamos detalhar o processo de instalação, pois no site Google este passo está muito bem detalhado, veja este link, http://code.google.com/intl/pt-BR/eclipse/docs/install-eclipse-3.4.html

Para criar um novo projeto usando o Eclipse e o plugin, devemos clicar em File > New > Web Application Project. Preencha o campo Project name com o nome do projeto, no exemplo usaremos PucProjeto, o campo Package pode ser preenchido com o pacote que deseja que fique o raiz do projeto, no exemplo usaremos br.pucsp.pos.web. No campo Location definimos o workspace da aplicação, no campo Google SDKs definimos qual GWT devemos usar e qual a Engine devemos usar. Após isso clique em Finish.

Imagem 1 Artigo GWT
Imagem 1 Artigo GWT

Após clicar em Finish uma aplicação de exemplo será criada, para testá-la, clique com o botão do lado direito sobre o projeto e depois Run As > Web Application, um console do Google será aberto e você ver a aplicação de teste em funcionamento.

Todo o código que é renderizado e mostrado para o usuário está na classe br.pucsp.pos.web.client.PucProjeto, que usa uma implementação da classe com.google.gwt.core.client.EntryPoint. O código que será compilado deve ficar dentro do método onModuleLoad(), caso queira editar este projeto que o plugin criou, pode excluir todas as classes exceto a br.pucsp.pos.web.client.PucProjeto, fazendo isso não teremos nenhum problema, pois somente com ela o GWT consegue compilar.

Na criação do projeto usando o plugin uma pasta chamada war foi criada, dentro dessa pasta existem dois arquivos, um com as configurações do CSS (Cascading Style Sheet), que são as folhas de estilo. Podemos criar as nossas classes e nossos IDs e depois usá-los no código Java do GWT citando o id com o seguinte comando:

closeButton.getElement().setId("closeButton");

ou citando a classe com o seguinte comando:

closeButton.getElement().setClassName("sendButton");

No outro arquivo encontramos o layout da página HTML, todos os elementos que forem absolutos devem ser inseridos nessa página. Podemos definir áreas nesse código HTML que serão inseridas via a classe Java que estamos criando com o uso do framework GWT. No exemplo criado pelo plugin, o GWT criou uma página com uma tabela com duas colunas e definiu as colunas como áreas, para o nosso exemplo, altere o nome dessas áreas para os seguintes nomes, nameFieldContainer, aboutButtonContainer. Para que algo seja inserido nessas áreas, devemos criar um tipo de painel, no exemplo usamos o SimplePanel e o DialogBox que são referenciadas no código Java através da seguinte linha de código:

RootPanel.get("nameFieldContainer").add(psugBox);
RootPanel.get("aboutButtonContainer").add(aboutButton);

Abaixo está o código completo da classe br.pucsp.pos.web.client.PucProjeto

package br.pucsp.pos.web.client;
 
import com.google.gwt.core.client.EntryPoint;
 
import com.google.gwt.event.dom.client.ClickEvent;
 
import com.google.gwt.event.dom.client.ClickHandler;
 
import com.google.gwt.user.client.ui.Button;
 
import com.google.gwt.user.client.ui.DialogBox;
 
import com.google.gwt.user.client.ui.HTML;
 
import com.google.gwt.user.client.ui.Label;
 
import com.google.gwt.user.client.ui.MultiWordSuggestOracle;
 
import com.google.gwt.user.client.ui.RootPanel;
 
import com.google.gwt.user.client.ui.SimplePanel;
 
import com.google.gwt.user.client.ui.SuggestBox;
 
import com.google.gwt.user.client.ui.VerticalPanel;
 
public class PucProjeto implements EntryPoint {
 
public void onModuleLoad() {
 
final Button aboutButton = new Button("Sobre");
 
final DialogBox about = new DialogBox();
 
about.setText("Sobre o Exemplo");
 
about.setAnimationEnabled(true);
 
final Button closeButton = new Button("Fechar");
 
closeButton.getElement().setId("closeButton");
 
aboutButton.getElement().setClassName("sendButton");
 
VerticalPanel dialogVPanel = new VerticalPanel();
 
dialogVPanel.addStyleName("dialogVPanel");
 
dialogVPanel.add(new HTML("&lt;b&gt;Projeto Desenvolvido por:&lt;/b&gt;"));
 
dialogVPanel.add(new HTML("&lt;br&gt;&lt;b&gt;Paulo Fernandes [ paulofernandesjr@gmail.com ]&lt;/b&gt;"));
 
dialogVPanel.setHorizontalAlignment(VerticalPanel.ALIGN_RIGHT);
 
dialogVPanel.add(closeButton);
 
about.setWidget(dialogVPanel);
 
/**
 
* Essa é uma forma de fazer
 
*/
 
class MyHandler implements ClickHandler {
 
public void onClick(ClickEvent event) {
 
aboutButton.setEnabled(false);
 
about.setText("Sobre o Projeto");
 
about.center();
 
closeButton.setFocus(true);
 
}
 
}
 
MyHandler handler = new MyHandler();
 
aboutButton.addClickHandler(handler);
 
/**
 
* Essa é outra forma de fazer
 
*/
 
closeButton.addClickHandler(new ClickHandler() {
 
public void onClick(ClickEvent event) {
 
about.hide();
 
aboutButton.setEnabled(true);
 
aboutButton.setFocus(true);
 
}
 
});
 
MultiWordSuggestOracle palavras = new MultiWordSuggestOracle();
 
palavras.add("abacate");
 
palavras.add("abacaxi");
 
palavras.add("acordar");
 
palavras.add("aeromotor");
 
palavras.add("agudo");
 
palavras.add("alcool");
 
palavras.add("algarismo");
 
SuggestBox suggestBox = new SuggestBox(palavras);
 
suggestBox.setAnimationEnabled(true);
 
suggestBox.setVisible(true);
 
/**
 
* painel para a caixa de sugestões
 
*/
 
VerticalPanel sugBox = new VerticalPanel();
 
sugBox.setHorizontalAlignment(VerticalPanel.ALIGN_CENTER);
 
sugBox.add(new Label("Digite a letra A"));
 
sugBox.add(suggestBox);
 
SimplePanel psugBox = new SimplePanel();
 
psugBox.setWidget(sugBox);
 
RootPanel.get("nameFieldContainer").add(psugBox);
 
RootPanel.get("aboutButtonContainer").add(aboutButton);
 
}
 
}

Concluindo

No seguinte link http://code.google.com/intl/pt-BR/webtoolkit/doc/1.6/DevGuide.html está o guia para os desenvolvedores que quiserem se aperfeiçoar mais com este excelente framework. Neste outro link tem uma aplicação de exemplo que o pessoal do Google fez para vermos mais um pouco do poder do GWT http://gwt.google.com/samples/Mail/Mail.html.

Com este artigo descobrimos o quanto podemos melhorar nossas aplicações usando o GWT, para quem já desenvolve para web, sabe que para fazer o que fizemos neste exemplo, daria um trabalho um tanto quanto complexo, imagine só essa aplicação de e-mail que está no link acima.

Fontes

http://code.google.com/intl/pt-BR/webtoolkit/

http://www.gwt.com.br/

http://www.comp.ufscar.br/~bruno_abrahao/Trabalhos/Tutorial%20GWT.pdf

Imagem 2 Artigo GWT
Imagem 2 Artigo GWT

Bate-papo 30/08/2009

Como anunciado em nossa lista, no último domingo dia 30/08/2009 as 20 horas, aconteceu um bate papo com alguns membros do grupo.

Durante este bate-papo que durou cerca de 1 hora e meia, conversamos sobre:

  • Vantagens e desvantagens de utilizarmos o Team Speak para as conferencias;
  • Camisetas do grupo;
  • Ações que podem prover o grupo, aumentando o seu número de membros;
  • Melhorias a serem aplicadas em nosso Forum;
  • Construção de tutoriais, para auxiliar os usuarios com as ferramentas do Google;
  • Inicio do planejamento dos proximos encontros;

Entre outros assuntos que foram abordados, abaixo esta o link com o audio da conversa.

Por enquanto é isso e até a próxima pessoal.

 
icon for podpress  Reunião 30/08/2009: Play Now | Play in Popup | Download

Tags: , , ,