< Anterior | Próximo >

Lição 11: Incluir o Código para o Manipulador do Localizador de Mapa

Conclua o código de plano de fundo da interface com o usuário que foi criada na lição anterior.

Concluir o Código de Origem do MapLocatorHandler.egl

  1. Certifique-se de que o arquivo MapLocatorHandler.egl esteja aberto no editor Rich UI. Se você estiver na visualização Design, clique na guia Origem.
  2. Inclua uma linha em branco antes da função start e declare uma variável que é baseada na parte da Interface criada:
    lookupService YahooLocalService{@restbinding};

    A propriedade @restbinding indica que os detalhes de acesso ao serviço estão em seu código em vez de estarem no descritor de implementação do EGL. Essa decisão é conveniente, mas inflexível. Uma mudança no local do serviço requer que você altere o código de origem. A Lição 14 introduz o descritor de implementação do EGL, onde é provável que você insira a maioria dos detalhes de acesso ao serviço do seu trabalho de desenvolvimento.

  3. Para resolver uma referência da parte da Interface, pressione Ctrl-Shift-O. As próximas etapas incluirão novas marcas de erro vermelhas e você não irá removê-las até o final da lição.
  4. Não inclua conteúdo para a função start.
  5. Conclua a função checkForEnter conforme a seguir:
    function checkForEnter(event Event in)
       if(event.ch == 13)
          search();
       end
    end

    Considere o seguinte detalhe de plano de fundo: O código de tempo de execução do EGL chama a função checkForEnter e passa um objeto de evento, que é uma estrutura de memória que inclui detalhes sobre o evento. Neste caso, o evento que provocou a chamada é onKeyDown, e o objeto de evento inclui o caractere ASCII que representa o pressionamento de tecla do usuário. Especificamente, o número 13 é o valor decimal do Retorno de Linha (a tecla ENTER) na tabela ASCII, conforme observado aqui: Tabela ASCII e descrição (http://www.asciitable.com).

    A função checkForEnter é chamada apenas se o usuário pressionar uma tecla, como Tab ou ENTER, quando o campo de texto estiver em foco. A função, por sua vez, chama a função search apenas se a tecla for ENTER. Você criará a função search em breve.

  6. Conclua a função buttonClicked():
    function buttonClicked(event Event in)
       search();
    end

    A função buttonClicked e seu relacionamento com a propriedade onClick específica do botão assegura que, quando o usuário clica no botão Procurar, a função search seja chamada.

  7. Para incluir a função search, posicione o seguinte código no final do manipulador, antes da instrução end final no arquivo:
    function search()
       localMap.zoom = 13;
       
       // show an initial marker, as necessary to display the map at all
       // (the marker identifies only the zip code)
       localMap.addMarker(new MapMarker
          {address = zipField.text, description = "zipcode:  " +
    zipField.text});
    
       // Call the remote Yahoo! service, passing the zip code
       call lookupService.getSearchResults("YahooDemo", zipField.text)
          returning to showResults onException displayError;
    end
    Observe os seguintes detalhes:
    • O widget EGL Google map inclui a propriedade zoom, que especifica a escala do mapa. Em vez de especificar a maior escala usada no mapa padrão da Carolina do Norte, em que o valor de zoom era 8, configure o valor de zoom como 13, o que produz um mapa que mostra ruas da cidade específicas.
    • O widget EGL Google map também inclui a função addMarker, que aceita um registro do tipo MapMarker e identifica o local do mapa de um endereço de entrada.

      Nesta exibição inicial de um CEP específico, o único detalhe que você fornece à função localMap.addMarker() é o próprio CEP. Posteriormente, você configurará a propriedade endereço para fornecer mais detalhe, que é usada para exibir um marcador específico de endereço.

  8. Na sequência, inclua a função showResults que é chamada se o acesso ao serviço do Yahoo! ocorrer sem erro. Posicione o seguinte código após a função search, antes da última instrução end no arquivo:
    function showResults(retResult ResultSet in)
       linkListing HyperLink[0];
       for(i INT from 1 to retResult.result.getSize() by 1)
          newLink HyperLink{padding = 4, text = retResult.result[i].title,
    href = "#"};
          newLink.setAttribute("address", retResult.result[i].Address + ", "
             + retResult.result[i].city + ", " + retResult.result[i].state);
          newLink.setAttribute("title", retResult.result[i].Title);
          newLink.onClick ::= mapAddress;
          linkListing.appendElement(newLink);
       end
       listingBox.setChildren(linkListing);
    end	
    A chamada do serviço retorna uma matriz de detalhes da empresa de hipoteca. Considere estes aspectos da função showResults:
    • Cada elemento inclui um “título” (ou seja, um nome da empresa) e um endereço.
    • A função showResults cria uma matriz de widgets de hiperlink e faz a leitura por meio da matriz de entrada. Para cada elemento na matriz de entrada, a função cria um elemento na matriz dos widgets de hyperlink.
    • Conforme mostrado pela declaração a seguir, cada widget de hyperlink possui texto e preenchimento de exibição e inclui um marcador (#) em vez de um endereço da Web:
      newLink HyperLink{padding = 4, text =
      retResult.result[i].title, href = "#"};

      O hyperlink provocará a chamada do código em vez de um endereço da Web. Entretanto, a presença do marcador assegura que o hyperlink mostra o texto de uma forma familiar, com um sublinhado e colorido, como se o clique do usuário no hyperlink abrisse um Web site.

    • A função chama a função setAttribute para colocar um valor na árvore DOM, em uma área da memória que é específica do widget. Em particular, a função armazena um título e, em seguida, um endereço para recuperação por outra função.
    • Em relação a cada widget de hyperlink, a função showResults configura um comportamento de tempo de execução designando a função mapAddress para o evento onClick.
    • A matriz completa dos widgets de hyperlink é designada como o único filho da caixa de listagem.
  9. Posicione a seguinte função após a função showResults:
    function mapAddress(e Event in)
    
       // Show the marker when the user clicks the link
       businessAddress STRING = e.widget.getAttribute("address") as STRING;
       businessName STRING = e.widget.getAttribute("title") as STRING;
       localMap.addMarker(new MapMarker { 
          address = businessAddress, 
          description = businessName} );
    end

    Quando o usuário clica no hyperlink no tempo de execução, a função mapAddress recupera os atributos que foram configurados na função showResults e configura um marcador no mapa exibido.

  10. Inclua agora o manipulador de exceções que recebe os dados se o acesso ao serviço do Yahoo! falhar. Posicione o seguinte código após a função mapAddress, antes da última instrução end no arquivo:
    function displayError(ex AnyException in)
       DojoDialogLib.showError("Yahoo Service", 
                               "Cannot invoke Yahoo Local Service: " 
                               + ex.message, null);
    end

    DojoDialogLib é uma parte da Biblioteca no projeto com.ibm.egl.rui.dojo.samples que foi incluída na área de trabalho na Lição 2. A função showError nessa biblioteca exibe as informações em um diálogo. A chamada de função inclui uma sequência denominada mensagem, que está no registro de exceção que o código de tempo de execução do EGL passa para a função displayError.

  11. Formate seu código pressionando Ctrl-Shift-F, resolva as referências pressionando Ctrl+Shift+O e salve o arquivo. Se erros forem vistos em seu arquivo de origem, compare seu código com o conteúdo do arquivo em Código Concluído para MapLocatorHandler.egl após a Lição 11.

Testar o Novo Portlet

Como este portlet trabalha de forma independente, é possível testá-lo separadamente.

  1. Certifique-se de salvar o arquivo e, em seguida, clique em Visualização. O EGL exibe o formulário de entrada com o mapa padrão da Carolina do Norte.
  2. Digite o seguinte CEP:
    10001
    Esse CEP faz referência ao centro de Manhattan.
  3. Pressione a tecla Enter ou clique no botão Procurar. Uma lista de empresas de hipoteca é exibida abaixo no lado esquerdo da tela. Na direita está o mapa da Cidade de Nova York.
    Um mapa do centro de Manhattan.
    Nota: O Yahoo! Local Search Service algumas vezes não retorna nenhum dado; em tal caso uma mensagem de erro é exibida devido a uma “exceção nula”. A ausência de dados é mais provável aos domingos. Se o serviço estiver indisponível ou não retornar dados, clique em Cancelar e aguarde até um momento posterior para concluir o tutorial.

    Problemas com o Yahoo! Local Search Service podem ser relatados aqui: “API Local – Questões Gerais” em http://developer.yahoo.net/forum.

  4. Clique em qualquer um dos nomes na coluna da esquerda. O mapa exibe um marcador que mostra a localização do negócio. Se você passar o mouse sobre o marcador, o nome da empresa será exibido.
  5. Refaça a mesma procura ou procure um CEP vizinho, tal como 10009. Os marcadores que você localizou no mapa permanecem ali. Além disso, observe que a procura do Yahoo! recuperou os endereços nos CEPs adjacentes ao que você especificou.
  6. Se desejar remover todos os marcadores antes de cada procura, clique na guia Origem e inclua a linha a seguir na parte superior da função showResults:
    localMap.removeAllMarkers();  
  7. Teste seu trabalho na guia Visualização.
  8. Feche o arquivo.

Ponto de Verificação da Lição

Você aprendeu como concluir as tarefas a seguir:
  • Criar e usar uma variável que está baseada no serviço de Procura Local.
  • Responder aos pressionamentos de tecla do usuário.
  • Usar a árvore DOM para passar valores de uma função para outra.
  • Começar a usar um widget de mapa.

Na próxima lição, você integrará o novo manipulador no aplicativo.

< Anterior | Próximo >

Feedback