>> Mais documentação do Visual Web Pack

Usando o componente Visualizador de mapa Ajax

Conteúdo -  Obtendo uma chave API de mapas do Google -  Criando o aplicativo Ajax da Web -  Adicionando componentes de entrada -  Adicionando um marcador de mapa -  Adicionando um sinalizador de marcador de mapa -  Fazendo mais com o componente Visualizador de mapa Ajax

Este tutorial funciona com as tecnologias e os recursos seguintes

Componentes JavaServer Faces/ Plataforma Java EE	1.2 com Java EE 5* 1.1 com J2EE 1.4
Banco de dados Viagem	Não é necessário
Biblioteca de componentes Blueprints Ajax	Necessário

* Na data da publicação deste tutorial, somente o servidor de aplicativos Sun Java System oferecia suporte ao Java EE 5.

Este tutorial foi adaptado para ser usado com o Servidor de aplicativos Sun Java System PE 9.0, versão atualizada 1, e o Tomcat 5.5.17. Se você estiver usando um servidor diferente, consulte as Notas de versão e as Perguntas freqüentes para obter informações sobre problemas conhecidos e soluções sugeridas. Para obter informações detalhadas sobre os servidores suportados e a plataforma Java EE, consulte as Notas de versão.

Obtendo uma chave API de mapas do Google

1. No navegador da Web, vá para http://www.google.com/apis/maps/.

   A página de inscrição para a chave de mapa do Google abre-se no navegador da Web.

2. Clique em "Sign up for a Google Maps API key".

   A página do contrato de licença para a chave de mapa do Google abre-se no navegador da Web.

3. Leia e aceite o contrato, e digite o URL para seu site na Web.

   Para localizar o URL para o site, implante um aplicativo e verifique o nome do servidor e o número da porta. Por exemplo, http://localhost:8080/.

   O URL que você especifica deve coincidir exatamente com o que você usa para executar o aplicativo. Você pode usar esta mesma chave para qualquer aplicativo usando a API de mapas do Google implantada no servidor de aplicativo local. Se reconfigurar o servidor, use uma porta diferente ou implante em um outro servidor, após o que é necessário obter outra chave do Google.
4. Clique em "Generate API Key".
5. Copie a chave de mapa gerada pelo Google e salve-a em um arquivo de texto ou em outro local conveniente. Você usa a chave de mapa enquanto cria o aplicativo Visualizador de mapa Ajax.

Criando o aplicativo Ajax da Web

1. Faça o download dos componentes Ajax e importe-os, se ainda não o fez.

2. Crie um projeto de aplicativo da Web visual e nomeie-o AjaxMapViewer.

   A página inicial do AjaxMapViewer, Page1, abre-se no Visual Designer.

3. Na janela Projetos, clique com o botão direito do mouse no nó AjaxMapViewer > Bibliotecas de componentes e escolha Adicionar biblioteca de componentes no menu pop-up. Selecione Componentes BluePrints Ajax e clique em Adicionar biblioteca de componentes.

   O IDE copia a biblioteca de componentes no projeto, adiciona os componentes e dá suporte a Beans na Paleta.

4. Na Paleta, expanda o nó Componentes BluePrints Ajax, se não estiver expandido, arraste o componente Visualizador de mapa e solte-o na Page1. Coloque o componente em uma posição baixa no Visual Designer, como mostrado na Figura 1, para que você tenha espaço para os componentes descritos na próxima seção.

   Uma imagem de mapa aparece na Page1 e os componentes mapViewer1 e mapViewer1_center aparecem na janela Esboço, semelhante à figura abaixo.

   Figura 1: Componente Visualizador de mapa (clique para ampliar)

5. Na janela Propriedades, defina a propriedade key do Visualizador de mapa para a chave de mapa do Google que você salvou anteriormente, como mostrado na figura abaixo.

   Figura 2: Propriedade de chave de mapa

6. Para ver o que foi criado até agora, clique na seta verde na barra de ferramentas principal ou escolha Executar > Executar projeto principal, para construir e executar o aplicativo.

   O projeto ajaxMapViewer abre-se no navegador da Web, como mostrado na figura abaixo.

   Figura 3: Aplicativo Visualizador de mapa - Primeira exibição

   
   

   Se não houver exibição de mapa na página da Web, verifique o seguinte:

   • Assegure-se de que esteja conectado à Internet.
   • Se estiver trabalhando protegido por um firewall, confira se o host proxy e o número da porta estão definidos corretamente.
   • Verifique se há erros de registro do servidor de aplicativos. Expanda a janela Tempo de execução, clique com o botão direito do mouse no nó do servidor e selecione Exibir log do servidor.

Adicionando componentes de entrada

As propriedades latitude e longitude do componente mapViewer1_center determinam a localização do mapa. Nesta seção, você adiciona componentes de entrada à página que contém um endereço inserido pelo usuário e usa o componente Geocoding Service Object do Bean de suporte Ajax para converter o endereço em coordenadas de latitude e longitude. Você adiciona propriedades de latitude e longitude ao Bean de solicitação e usa estas propriedades para definir coordenadas no componente mapViewer1_center.

A figura abaixo mostra o projeto AjaxMapViewer após a adição de componentes de entrada.

Figura 4: Visualizador de mapa com componentes de entrada

1. Na seção Básico, da Paleta, arraste o componente de rótulo e solte-o na parte superior da página. Defina o texto do componente como Mapear um endereço. Na seção Aparência na janela Propriedades, defina a propriedade labelLevel como Strong(1).
2. Solte dois outros componentes de rótulo abaixo do primeiro componente de rótulo. Defina o texto do primeiro rótulo como Inserir o endereço: e defina o texto do segundo como Inserir a cidade:.
3. Solte um componente de campo de texto à direita do componente de rótulo Endereço.
4. Na seção Componentes BluePrints Ajax da Paleta, arraste um componente de campo de texto Selecionar valor e solte-o à direita do componente de rótulo Cidade. Na janela Propriedades, defina a propriedade required do campo de texto Selecionar valor como verdadeiro.
5. Solte o componente de botão abaixo do componente de rótulo. Defina a propriedade text do Botão como Obter mapa e a propriedade id como getMap.
6. Adicione um componente Grupo de mensagens abaixo do Visualizador de mapa. Este componente exibe erros de entrada.

1. Na seção Beans de suporte BluePrints Ajax da Paleta, arraste o componente "Geocoding Service Object" e solte-o em qualquer lugar no Visual Designer.

   O componente geoCoder1 é exibido na janela Esboço, como mostrado na figura abaixo.

   Figura 5: geoCoder1 na janela Esboço

2. Se você não estiver trabalhando protegido por um firewall, passe para a Etapa 3. Se estiver trabalhando protegido por um firewall, defina as configurações de proxy no componente geoCoder1, porque ele não recupera as configurações de proxy do IDE. Se não estiver trabalhando protegido por um firewall, ignore esta etapa.

   1. Na janela Propriedades para o componente geoCoder1, defina a propriedade proxyHost para o proxy apropriado para seu local.
   2. Defina a propriedade proxyPort para a porta apropriada para seu local.

3. Na janela Esboço, clique com o botão direito do mouse no RequestBean1 e escolha Adicionar > Propriedade no menu pop-up.

   Se não ver Adicionar no menu, ou se estiver desativado, pressione a tecla Esc e clique com o botão direito do mouse novamente em RequestBean1.
4. Na caixa de diálogo Novo padrão de propriedade, insira longitude no campo Nome e double (em letras minúsculas) no campo Tipo, em seguida clique em OK.
5. Crie uma segunda propriedade de Bean de solicitação. Insira latitude no campo Nome e double (em letras minúsculas) no campo Tipo, em seguida clique em OK.

6. Clique no botão Java para abrir o editor de Java para Page1.jsp. Localize a declaração public class Page1 extends AbstractPageBean. Adicione a linha a seguir, mostrada em negrito, no ocultamento de código Definição de componente gerenciado.

   Amostra de código 1: Adicionando um booleano displayMap

   public class Page1 extends AbstractPageBean { // Managed Component Definition private boolean displayMap = false;

   
   

   Este operador impede que o mapa seja exibido no aplicativo implantado até o usuário inserir um endereço para o mapa.

7. Retorne ao Visual Designer e clique duas vezes no botão Obter mapa.

   O IDE abre Page1 no editor de Java no método getMap_action() .

8. Adicione o seguinte código ao método getMap_action().

   Amostra de código 2: Código do botão getMap

   public String getMap_action() { String address = (String)(textField1.getText() + " " + this.selectValue1.getValue()); GeoPoint points[] = geoCoder1.geoCode(address); if (points.length < 1) { error("Não é possível encontrar este local; seja mais específico."); return null; } getRequestBean1().setLatitude(points[0].getLatitude()); getRequestBean1().setLongitude(points[0].getLongitude()); displayMap = true; return null; }

9. Clique com o botão direito do mouse no editor de Java e escolha Corrigir importações no menu pop-up para resolver o erro de GeoPoint não localizado.

1. Abra a janela Esboço. Clique com o botão direito do mouse em RequestBean1 e escolha Adicionar > Propriedade no menu pop-up. Na caixa de diálogo Novo padrão de propriedade, insira geoPoints no campo Nome e HashMap no campo Tipo, em seguida clique em OK.
2. Clique duas vezes em RequestBean1 na janela Esboço para abrir o arquivo RequestBean1.java. Clique com o botão direito do mouse no editor de Java e escolha Corrigir importações no menu pop-up para resolver o erro de HashMap não localizado.
3. Substitua a declaração HashMap private HashMap geoPoints; pelo seguinte código:

   private HashMap geoPoints = new HashMap();

4. Retorne ao Visual Designer e clique duas vezes no componente do campo de texto Selecionar valor. No editor de Java, substitua o código do método selectValue1_matchValue() pelo seguinte código:

   Amostra de código 3: Mótodo selectValue1_matchValue()

   public SelectItem[] selectValue1_matchValue(FacesContext context, String value) { GeoPoint points[] = null; try { points = getGeoCoder1().geoCode(value); } catch (Exception e) { error("Falha de Geo Coding. Sua conexão com a internet/proxy pode estar desligada."); } if ((points == null) || (points.length < 1)) { return null; } else { HashMap geoPoints = getRequestBean1().getGeoPoints(); geoPoints.clear(); SelectItem[] results = new SelectItem[points.length]; for (int i = 0; i < points.length; ++ i){ geoPoints.put(points[i].toString(), points[i]); results[i] = new SelectItem(points[i].toString(), points[i].toString()); } return results; } }

5. Clique com o botão direito do mouse no editor de Java e escolha Corrigir importações no menu pop-up para resolver os erros de HashMap e SelectItem não localizados.

6. Efetue rolagem até o método prerender() e adicione o seguinte código:

   Amostra de código 4: Método prerender

   public void prerender() { if (displayMap) { mapViewer1_center.setLatitude(getRequestBean1().getLatitude()); mapViewer1_center.setLongitude(getRequestBean1().getLongitude()); mapViewer1.setRendered(true); } else { mapViewer1.setRendered(false); } displayMap = false; }

   
   Este código processa o componente Visualizador de mapa, se o endereço for resolvido em uma latitude e uma longitude reconhecíveis.

7. Construa e execute o aplicativo. AjaxMapViewer abre-se no navegador da Web. Insira um endereço físico, como 15 Network Circle, Menlo Park, CA.

   Observe como a lista suspensa do campo de texto Selecionar valor é preenchida com possíveis opções de cidade à medida que você começa a inserir texto no campo de texto. Você pode selecionar Menlo Park, CA na lista, quando esta opção aparecer.

8. Após ter inserido o endereço completo, clique no botão Obter mapa.

   Um mapa que mostra o local inserido abre-se no navegador da Web, semelhante à figura abaixo. Observe que apenas o campo de texto Selecionar valor é necessário.

   Se você selecionar uma cidade sem inserir um endereço, o mapa retornado mostrará a cidade inteira.

   Figura 6: Aplicativo Visualizador de mapa: Mapa centrado em coordenadas especificadas

Adicionando um marcador de mapa

1. Abra a exibição Design da Page1.
2. Na seção Beans de suporte BluePrints Ajax da Paleta, arraste o componente Marcador de mapa e solte-o em qualquer lugar na Page1.

3. Na janela Esboço, selecione o nó Page1 > mapMarker1, como mostrado na figura abaixo.

   Figura 7: Janela Esboço - nó mapMarker1

4. Na janela Propriedades para mapMarker1, defina a propriedade markup como This is the place!.

   Os espaços não separáveis ( ) impedem que o texto seja separado em várias linhas devido ao espaço limitado alocado para o texto.
5. Na janela Design, clique com o botão direito do mouse no componente Visualizador de mapa e escolha Vinculações de propriedade no menu pop-up.

6. Na caixa de diálogo Vinculações de propriedade, vincule a propriedade info do mapViewer1 à propriedade mapMarker1 de Page1, como mostrado na figura abaixo. Clique em Aplicar e, em seguida, em Fechar.

   Figura 8: Vinculação da propriedade info do mapViewer1 ao mapMarker1

7. Clique no botão Java para abrir o editor de Java.

8. Efetue rolagem até o método prerender e adicione as duas linhas mostradas a seguir em negrito.

   Amostra de código 5: Método prerender() com suporte de marcador de mapa

   public void prerender() { if (displayMap) { mapViewer1_center.setLatitude(getRequestBean1().getLatitude()); mapViewer1_center.setLongitude(getRequestBean1().getLongitude()); mapMarker1.setLatitude(mapViewer1_center.getLatitude()); mapMarker1.setLongitude(mapViewer1_center.getLongitude()); mapViewer1.setRendered(true); } else { mapViewer1.setRendered(false); } displayMap = false; }

   
   Este código define as coordenadas no componente mapMarker1, de modo que o componente aponte para o local em que o mapa está centralizado.

9. Construa e execute o aplicativo. Quando o aplicativo AjaxMapViewer se abrir no navegador da Web, insira um endereço, como 15 Network Circle, Menlo Park, CA. Após a seleção do endereço completo, clique no botão Obter mapa. O mapa abre-se no navegador da Web com um marcador de mapa apontando para o local, semelhante à figura abaixo.

   Figura 9: Aplicativo Visualizador de mapa: Mapa com marcador de mapa

Adicionando um sinalizador de marcador de mapa

1. No editor de Java para Page1, localize a declaração public class Page1 extends AbstractPageBean. Adicione o seguinte código (mostrado em negrito) a esta classe.

   Amostra de código 6: Adicionando uma matriz de marcador de mapa a Page1

   public class Page1 extends AbstractPageBean { //Managed Component Definition private boolean displayMap = false; private MapMarker[] markers; public MapMarker[] getMarkers(){ return markers; }

2. Efetue rolagem até o método prerender() e adicione as duas linhas de código mostradas a seguir em negrito.

   Amostra de código 7: Método prerender() com código de sinalizador de marcador de mapa

   public void prerender() { if (displayMap) { mapViewer1_center.setLatitude(getRequestBean1().getLatitude()); mapViewer1_center.setLongitude(getRequestBean1().getLongitude()); mapMarker1.setLatitude(mapViewer1_center.getLatitude()); mapMarker1.setLongitude(mapViewer1_center.getLongitude()); markers = new MapMarker[1]; markers[0] = mapMarker1; mapViewer1.setRendered(true); } else { mapViewer1.setRendered(false); } displayMap = false; }

3. Clique no botão Design para retornar à exibição Design da Page1.
4. Clique com o botão direito do mouse no Visualizador de mapa e escolha Vinculações de propriedade no menu pop-up.

5. Na caixa de diálogo Vinculações de propriedade, vincule a propriedade markers do mapViewer1 à matriz mapMarker1 de Page1, como mostrado na figura abaixo. Clique em Aplicar e, em seguida, em Fechar.

   Figura 10: Vinculação da propriedade de marcadores à matriz de marcadores

6. Construa e execute o aplicativo. Insira um endereço e clique no botão Obter mapa. O mapa abre-se no navegador da Web com um marcador de mapa e um sinalizador apontando para o local, semelhante à figura abaixo.

   Figura 11: Aplicativo Visualizador de mapa: Mapa com marcador de mapa e sinalizador

Fazendo mais com o componente Visualizador de mapa Ajax

Experimente. Na seção Adicionando um sinalizador de marcador de mapa, você adicionou uma matriz MapMarker para conter o marcador de mapa e o sinalizador de marcador. Tente usar a matriz para colocar múltiplos marcadores no mapa.

Experimente. Este tutorial mostra como armazenar a matriz MapMarker no escopo da página. Tente armazenar a matriz MapMarker no escopo da sessão e implemente uma página "adicionar um marcador" para adicionar marcadores ao mapa. Certifique-se de que os endereços extras fornecidos por você apareçam no mapa no fator de escala que está sendo usado. O fator de escala padrão é 4.

Experimente. Este tutorial mostra como usar um componente de mapa Java BluePrints Ajax para criar um mapa personalizado. Tente construir um aplicativo que crie mais de um mapa. Em vez de armazenar a chave API do serviço de mapa do Google como uma propriedade em cada componente que você usa, crie um parâmetro de inicialização de contexto denominado com.sun.j2ee.blueprints.ui.mapviewer.KEY no arquivo web.xml e armazene nele o valor da chave API do serviço de mapa do Google.

Experimente. Para obter informações sobre a API JavaScript de mapas do Google, consulte Conceitos da API de mapas do Google. Para a capacidade de criar controles de mapa personalizados, como controles de panorâmica e zoom internos, consulte a seção Controles de mapa personalizados.

Consulte também:

• Fazendo download e importando Ajax e outros componentes
• Usando o componente Barra de progresso Ajax