< Anterior | Próximo >

Lição 10: Criar o Manipulador do Localizador de Mapa

Inicie com a criação de um portlet em que seja possível inserir um CEP e ver uma lista de empresas de hipoteca e um mapa. Clique no nome de uma empresa na lista e o mapa exibe um marcador de local.
Esta lição depende dos recursos de dois Web sites externos:
Se agora ou posteriormente você desejar aprender mais sobre algumas tecnologias usadas nas lições 10 e 11, consulte as seguintes fontes:

Criar Registros para o Arquivo de Interfaces

Para usar o Yahoo! Local Search Service, você criará as seguintes partes do EGL:

É possível criar as partes de Registro de várias formas, mas nesta lição você acessará um serviço REST na Web e incluirá, no endereço da Web, os detalhes necessários para recuperar os dados do serviço. O assistente Novo Registro do EGL criará as partes de Registro que correspondem aos dados recuperados no momento do desenvolvimento.

Faça conforme a seguir:

  1. No projeto MortgageServiceProject, na pasta EGLSource, clique com o botão direito do mouse no pacote services e clique em Novo > Registro.
  2. Na primeira página do assistente Novo Registro do EGL, aceite os detalhes sobre a pasta de origem e pacote e digite o seguinte nome para o novo arquivo de origem:
    YahooRecords
  3. Clique em Avançar.
  4. Na página Modelos, clique em Registros a partir do XML. Clique em Avançar.
  5. Na janela Registros a partir do XML, clique em Criar a partir de uma URL e cole a seguinte URL no campo URL:
    http://local.yahooapis.com/LocalSearchService/V3/localSearch?
    appid=YahooDemo&query=pizza&zip=94306&results=2
    Combine as duas linhas em uma URL de linha única sem espaços.
    A URL é mostrada no campo Criar a partir de uma URL.
  6. Clique em Avançar. O assistente exibe uma página de Resumo que exibe o código que será colocado no novo arquivo.
    O código é mostrado em uma janela de Visualização.
    Nota: O Yahoo! Local Search Service algumas vezes não retorna nenhum dado; em tal caso apenas a parte do Registro ResultSet é criada. 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.

  7. Clique em Concluir, que salva o arquivo.
  8. 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 YahooRecords.egl após a Lição 10.
  9. Feche o arquivo.

Criar a Interface de Procura Local

Ao usar um serviço da Web externo, você cria uma parte da Interface que identifica as operações de serviço que serão acessadas. A parte da Interface é usada pelo código da solicitação e não é um componente de próprio serviço.

Faça conforme a seguir:

  1. Crie uma nova parte da Interface clicando com o botão direito do mouse em MortgageUIProject e clicando em Nova > Interface.
  2. Na janela Nova Parte da Interface do EGL, preencha os seguintes campos:
    1. No campo Pacote, insira o seguinte nome:
      interfaces
    2. No campo Nome do Arquivo de Origem EGL, insira o seguinte nome:
      IYahooLocalService
    3. Clique em Concluir.
  3. Substitua o conteúdo do arquivo com o seguinte código:
    package interfaces;
    
    interface YahooLocalService
       function getSearchResults(appId string in, zipCode string in)
    returns(ResultSet)
          {@GetRest{uriTemplate =
    "http://local.yahooapis.com/LocalSearchService/V3/
                    localSearch?appid={appId}&query=mortgage&zip={zipcode}&results=10",
                    responseFormat = XML}};
    end
    Após colar o código, faça o seguinte:
    1. Remova linhas extras para que o valor uriTemplate esteja em uma única linha, sem espaços.
    2. Pressione Ctrl-Shift-O para incluir a instrução de importação necessária para resolver a referência para a parte do Registro ResultSet.
    3. Salve o arquivo.
    O protótipo de função getSearchResults assegura que quando o solicitante chama o serviço, os argumentos appId e zipCode do solicitante serão usados no local dos elementos entre colchetes no valor uriTemplate. O código de tempo de execução do EGL usa o URI completo para acessar o serviço e, neste caso, os seguintes detalhes são sempre verdadeiros sobre esse URI:
    • O URI inclui a palavra-chave “mortgage”, que é usada pelo serviço para procurar os dados.
    • O URI especifica que o serviço deve retornar 10 resultados, no máximo.
  4. 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 IYahooLocalService.egl após a Lição 10.
  5. Na ausência de erros, feche o arquivo.

Criar o Manipulador MapLocatorHandler

Para criar o manipulador MapLocatorHandler:

  1. Na pasta MortgageUIProject/EGLSource, no pacote handlers, crie uma parte do Manipulador do Rich UI como foi feito na lição 4. Forneça ao manipulador o seguinte nome:
    MapLocatorHandler
    O manipulador é aberto na visualização Design do editor Rich UI.
  2. Clique dentro do layout de grade, clique com o botão direito do mouse na célula selecionada e clique em Excluir > Linha. O layout de grade possui três linhas.
  3. Crie uma linha de texto introdutório:
    1. A partir da gaveta Exibição e Entrada da paleta, arraste um widget TextLabel para a primeira célula do widget GridLayout e forneça a ele o seguinte nome:
      introLabel
    2. Na visualização Propriedades, faça as seguintes mudanças:
      • Na página Geral, altere a propriedade texto com a seguinte frase:
        Search for local mortgage businesses
      • Na página Layout, configure a propriedade horizontalSpan como 3.
      • Para salvar o arquivo, pressione Ctrl-S+S.
  4. Crie um rótulo para o campo de entrada do CEP:
    1. Arraste um widget TextLabel para a primeira célula da segunda linha e designe o nome a seguir:
      zipLabel
    2. Na visualização Propriedades, configure a propriedade texto conforme a seguir:
      Zip code:
  5. Crie um campo de texto em que o usuário possa inserir um CEP:
    1. Arraste um widget TextLabel para a segunda célula da segunda linha e designe o nome a seguir:
      zipField
    2. Na visualização Propriedades, na página Posição, configure a propriedade largura como 100.
    3. Na página Eventos, clique na linha do evento onKeyDown. Clique no sinal de mais (+) para incluir uma função para o evento. O diálogo Novo Manipulador de Eventos é exibido.
    4. Insira o seguinte nome para a nova função:
      checkForEnter
    5. Clique em OK. O EGL alterna para a visualização Origem e exibe a função checkForEnter. Observe duas outras adições recentes:
      • Na declaração do widget zipField, a propriedade onKeyDown é configurada como checkForEnter.
      • A instrução de importação a seguir resolve a referência para o tipo de widget TextField:
        import
        com.ibm.egl.rui.widgets.TextField;
    6. Clique em Design para retornar para a visualização Design. O nome da função checkForEnter é agora exibido próximo ao evento onKeyDown. A função é considerada o limite do campo zipField. Você incluirá o código para essa função na próxima lição.
    7. Para salvar o arquivo, pressione Ctrl-S+S.
  6. Inclua um botão para iniciar a procura de um CEP especificado:
    1. Arraste um widget de Botão (Dojo) a partir da gaveta Exibição e Entrada da paleta para terceira célula na segunda linha. Designe o seguinte nome:
      zipButton
    2. Na visualização Propriedade, na página Eventos, clique na linha do evento onClick. Clique no sinal de mais (+) para incluir uma função para o evento.
    3. Na janela Novo Manipulador de Eventos, insira o seguinte nome para a nova função:
      buttonClicked
    4. Clique em OK. O EGL alterna para a visualização Origem e exibe a função buttonClicked.
    5. Clique em Design para retornar para a visualização Design. O nome da função buttonClicked é agora exibido próximo ao evento onClick. A função é o limite do botão zipButton. Você incluirá o código para essa função na próxima lição.
    6. Na página Geral, altere a propriedade texto para o botão com o seguinte nome:
      Search
    7. Para salvar o arquivo, pressione Ctrl-S+S.
  7. Crie uma caixa para conter a lista de empresas de hipoteca.
    1. A partir da gaveta Layout da paleta, arraste um widget Box para a primeira célula da terceira linha e forneça a ele o seguinte nome:
      listingBox
    2. Na visualização Propriedades, na página Geral, configure a propriedade colunas como 1.
    3. Na página Posição, configure a propriedade largura como 150.
    4. Na página Layout, configure a propriedade verticalAlignment como PARTE SUPERIOR e a propriedade horizontalSpan como 2.
    Neste ponto, a IU se parece com a seguinte figura:
    Uma grade três por três contendo um campo de entrada para CEP, um botão e uma caixa vazia
  8. A partir da gaveta Amostras da paleta, arraste um widget Google Map para a última célula na terceira linha, próximo ao widget listingBox, e forneça a ele o seguinte nome:
    localMap
    Atualize a visualização Design do editor Rich UI clicando no botão de atualização no lado superior direito da visualização Design, não no lado superior direito do Explorador de Projetos. O botão de atualização mostra duas setas amarelas que aponta em direções opostas.
    A área Design parece com o seguinte:
    A tela mostra uma linha introdutória, um campo para submissão de um CEP, caixa para resultados da procura e um mapa padrão.
  9. Para salvar o arquivo, pressione Ctrl-S+S.
Você concluiu o trabalho na visualização Design.

Se você clicar na guia Origem, será possível ver o código que o editor EGL Rich UI criou. Esse código também é fornecido em Código Concluído para MapLocatorHandler.egl após a Lição 10.

Ponto de Verificação da Lição

Você aprendeu como concluir as tarefas a seguir:
  • Criar definições de Registro a partir de dados recuperados de um serviço.
  • Configurar uma parte da Interface com detalhes que permitem o acesso do serviço.
  • Criar uma interface com o usuário que inclui um mapa do Google.

Na próxima lição, você incluirá o código de origem para concluir o manipulador MapLocatorHandler.

< Anterior | Próximo >

Feedback