< Anterior | Siguiente >

Lección 10: Crear el manejador de ubicador en mapa

Empiece a crear un portlet donde pueda especificar un código postal y ver una lista de sociedades de crédito hipotecario y un mapa. Pulse en el nombre de una sociedad de la lista y el mapa mostrará un marcador de ubicación.
Esta lección se basa en las prestaciones de dos sitios web externos:
Si ahora o más adelante desea obtener más información sobre algunas tecnologías que se utilizan en las lecciones 10 y 11, consulte las fuentes siguientes:

Crear registros para el archivo de interfaz

Para utilizar el Servicio de búsqueda local de Yahoo!, creará los siguientes componentes EGL:

Puede crear los componentes Record de diferentes maneras, pero en esta lección accederá a un servicio REST de la web e incluirá, en la dirección web, los detalles necesarios para recuperar los datos del servicio. El asistente Registro EGL nuevo creará los componentes Record que se corresponden con los datos que se recuperan durante el desarrollo.

Realice lo siguiente:

  1. En el proyecto MortgageServiceProject, en la carpeta EGLSource, pulse con el botón derecho del ratón en el paquete services y pulse Nuevo > Registro.
  2. En la primera página del asistente Registro EGL nuevo, acepte los detalles sobre la carpeta fuente y el paquete y escriba el nombre siguiente para el nuevo archivo fuente:
    YahooRecords
  3. Pulse Siguiente.
  4. En la página Plantillas, pulse Registros de XML. Pulse Siguiente.
  5. En la ventana Registros de XML, pulse Crear a partir de URL y pegue el siguiente URL en el campo URL:
    http://local.yahooapis.com/LocalSearchService/V3/localSearch?
    appid=YahooDemo&query=pizza&zip=94306&results=2
    Combine las dos líneas en un URL de una sola línea sin espacios.
    El URL se muestra en el campo Crear a partir de un URL.
  6. Pulse Siguiente. El asistente muestra una página Resumen que ofrece una vista previa del código que colocará en el nuevo archivo.
    El código se muestra en una ventana Vista previa.
    Nota: El Servicio de búsqueda local de Yahoo! a veces no devuelve datos, en cuyo caso sólo se creará el componente de registro ResultSet. La ausencia de datos es más probable que se produzca los domingos. Si el servicio no está disponible o no devuelve datos, pulse Cancelar y espere hasta otro momento para completar la guía de aprendizaje.

    Los problemas con el Servicio de búsqueda local de Yahoo! pueden notificarse aquí: “API local – Preguntas generales” en http://developer.yahoo.net/forum.

  7. Pulse Finalizar, que guarda el archivo.
  8. Si ve errores en el archivo fuente, compare el código con el contenido del archivo en Código terminado para YahooRecords.egl después de la Lección 10.
  9. Cierre el archivo.

Crear la Interfaz de búsqueda local

Cuando utilice un servicio web externo, cree un componente Interface que identifique las operaciones de servicio a las que se accederá. El código solicitante utiliza el componente Interface, que no es un componente del propio servicio.

Realice lo siguiente:

  1. Cree un nuevo componente Interface pulsando con el botón derecho del ratón en MortgageUIProject y pulsando Nuevo > Interfaz.
  2. En la ventana Componente de interfaz EGL nuevo, complete los campos siguientes:
    1. En el campo Paquete, escriba el nombre siguiente:
      interfaces
    2. En el campo Nombre de archivo fuente EG, escriba el nombre siguiente:
      IYahooLocalService
    3. Pulse Finalizar.
  3. Sustituya el contenido del archivo por el siguiente 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
    Después de pegar el código, realice lo siguiente:
    1. Elimine las líneas sobrantes de modo que el valor uriTemplate se encuentre en una sola línea, sin espacios.
    2. Pulse Ctrl-Mayús-O para incluir la sentencia import, que es necesaria para resolver la referencia al componente de registro ResultSet.
    3. Guarde el archivo.
    El prototipo de la función getSearchResults asegura que cuando el solicitante invoca el servicio, los argumentos appId y zipCode del solicitante se utilizan en lugar de los elementos que hay entre paréntesis en el valor uriTemplate. El código de tiempo de ejecución EGL utiliza el URI completado para acceder al servicio y, en este caso, los detalles siguientes son siempre verdaderos acerca de dicho URI:
    • El URI incluye la palabra clave “mortgage”, que el servicio utiliza para buscar datos.
    • El URI especifica que el servicio debe devolver 10 resultados como máximo.
  4. Si ve errores en el archivo fuente, compare el código con el contenido del archivo en Código terminado para IYahooLocalService.egl después de la Lección 10.
  5. En caso de no haber errores, cierre el archivo.

Crear el manejador MapLocatorHandler

Para crear el manejador MapLocatorHandler:

  1. En la carpeta MortgageUIProject/EGLSource, en el paquete handlers, cree un componente Manejador de IU enriquecida tal como hizo en la lección 4. Asigne el siguiente nombre al manejador:
    MapLocatorHandler
    El manejador se abrirá en la vista Diseño del editor de IU enriquecida.
  2. Pulse dentro del diseño de la cuadrícula, pulse con el botón derecho del ratón en la casilla que ha seleccionado y después pulse Suprimir > Fila. El diseño de la cuadrícula tiene tres filas.
  3. Cree una línea de texto introductorio:
    1. Desde la bandeja Visualizar e introducir de la paleta, arrastre un widget TextLabel a la primera casilla del widget GridLayout y asígnele el siguiente nombre:
      introLabel
    2. En la vista Propiedades, realice los cambios siguientes:
      • En la página General, cambie la propiedad text por la frase siguiente:
        Search for local mortgage businesses
      • En la página Diseño, establezca la propiedad horizontalSpan en 3.
      • Para guardar el archivo, pulse Ctrl-S.
  4. Cree una etiqueta para el campo de entrada de código postal:
    1. Arrastre un widget TextLabel a la primera casilla de la segunda fila y asígnele el siguiente nombre:
      zipLabel
    2. En la vista Propiedades, establezca la propiedad text como se indica a continuación:
      Zip code:
  5. Cree un campo de texto donde el usuario puede especificar un código postal:
    1. Arrastre un widget TextField a la segunda casilla de la segunda fila y asígnele el siguiente nombre:
      zipField
    2. En la vista Propiedades, en la página Posición, establezca la propiedad width en 100.
    3. En la página Eventos, pulse la fila correspondiente al evento onKeyDown. Pulse el signo más (+) para añadir una función para el evento. Se visualizará el diálogo Nuevo manejador de eventos.
    4. Escriba el siguiente nombre para la nueva función:
      checkForEnter
    5. Pulse Aceptar. EGL cambia a la vista Fuente y visualiza la función checkForEnter. Observe dos otras adiciones recientes:
      • En la declaración del widget zipField, la propiedad onKeyDown está establecida en checkForEnter.
      • La siguiente sentencia import resuelve la referencia al tipo de widget TextField:
        import com.ibm.egl.rui.widgets.TextField;
    6. Pulse Diseño para volver a la vista Diseño. El nombre de la función checkForEnter ahora se visualiza junto al evento onKeyDown. Se dice que la función está enlazada con el campo zipField. En la lección siguiente, añadirá el código para esta función.
    7. Para guardar el archivo, pulse Ctrl-S.
  6. Añada un botón para iniciar la búsqueda para el código postal especificado:
    1. Arrastre un widget Button (Dojo) desde la bandeja Visualizar e introducir de la paleta a la tercera casilla de la segunda fila. Asigne el siguiente nombre:
      zipButton
    2. En la vista Propiedades, en la página Eventos, pulse la fila correspondiente al evento onClick. Pulse el signo más (+) para añadir una función para el evento.
    3. En la ventana Nuevo manejador de eventos, escriba el siguiente nombre para la nueva función:
      buttonClicked
    4. Pulse Aceptar. EGL cambia a la vista Fuente y visualiza la función buttonClicked.
    5. Pulse Diseño para volver a la vista Diseño. El nombre de la función buttonClicked ahora se visualiza junto al evento onClick. La función está enlazada con el botón zipButton. En la lección siguiente, añadirá el código para esta función.
    6. En la página General, cambie la propiedad text correspondiente al botón por el siguiente nombre:
      Search
    7. Para guardar el archivo, pulse Ctrl-S.
  7. Cree un recuadro que contenga la lista de sociedades de crédito hipotecario.
    1. Desde la bandeja Diseño de la paleta, arrastre un widget Box a la primera casilla de la tercera fila y asígnele el siguiente nombre:
      listingBox
    2. En la vista Propiedades, en la página General, establezca la propiedad columns en 1.
    3. En la página Posición, establezca la propiedad width en 150.
    4. En la página Diseño, establezca la propiedad verticalAlignment en TOP y la propiedad horizontalSpan en 2.
    En este punto, la IU tiene un aspecto similar a la imagen siguiente:
    Una cuadrícula de tres por tres que contiene un campo de entrada para el código postal, un botón y un recuadro vacío
  8. Desde la bandeja Ejemplos de la paleta, arrastre un widget de Google Maps a la última casilla de la tercera fila, junto al widget listingBox y asígnele el siguiente nombre:
    localMap
    Renueve la vista Diseño del editor de IU enriquecida pulsando el botón de renovación situado en la parte superior derecha de la vista Diseño, no en la parte superior derecha del Explorador de proyectos.El botón de renovación muestra dos flechas amarillas que apuntan en direcciones opuestas.
    La superficie Diseño tiene el siguiente aspecto:
    La pantalla muestra una línea introductoria, un campo para someter un código postal, un recuadro para los resultados de la búsqueda y un mapa predeterminado.
  9. Para guardar el archivo, pulse Ctrl-S.
Ha acabado el trabajo en la vista Diseño.

Si pulsa la pestaña Fuente, podrá ver el código que ha creado el editor de IU enriquecida de EGL. Este código también se proporciona en Código terminado para MapLocatorHandler.egl después de la Lección 10.

Punto de comprobación de lección

Ha aprendido a realizar las tareas siguientes:
  • Crear definiciones de registro a partir de los datos recuperados de un servicio.
  • Configurar un componente Interface con los detalles que permiten acceder al servicio.
  • Crear una interfaz de usuario que incluye un mapa de Google.

En la lección siguiente, añadirá código fuente para completar el manejador MapLocatorHandler.

< Anterior | Siguiente >

Comentarios