< Anterior | Siguiente >

Lección 11: Añadir código al manejador de ubicador en mapa

Complete el código de fondo para la interfaz de usuario que ha creado en la lección anterior.

Finalizar el código fuente para MapLocatorHandler.egl

  1. Asegúrese de que el archivo MapLocatorHandler.egl está abierto en el editor de IU enriquecida de EGL. Si se encuentra en la vista Diseño, pulse la pestaña Fuente.
  2. Añada una línea en blanco justo antes de la función start y declare una variable que se basa en el componente Interface que ha creado:
    lookupService YahooLocalService{@restbinding};

    La propiedad @restbinding indica que los detalles de acceso al servicio se encuentran en el código y no en el descriptor de despliegue EGL. La decisión es cómoda pero inflexible. Un cambio en la ubicación del servicio requiere cambiar el código fuente. En la lección 14 se ofrece una introducción del descriptor de despliegue EGL, donde seguramente deberá especificar detalles de acceso al servicio en la mayor parte de su trabajo de desarrollo.

  3. Para resolver una referencia al componente de interfaz, pulse Ctrl-Mayús-O. Los pasos siguientes añadirán nuevas marcas de error de color rojo, y nos las eliminará hasta que se encuentre hacia el final de la lección.
  4. No añada contenido a la función start.
  5. Complete la función checkForEnter como se indica a continuación:
    function checkForEnter(event Event in)
       if(event.ch == 13)
          search();
       end
    end

    Considere los siguientes detalles de fondo: El código de tiempo de ejecución EGL invoca la función checkForEnter y pasa un objeto de evento, que es una estructura de memoria que incluye detalles acerca del evento. En este caso, el evento que ha originado la invocación es onKeyDown, y el objeto de evento incluye el carácter ASCII que representa la pulsación del usuario. Concretamente, el número 13 es el valor decimal para el retorno de carro (la tecla INTRO) en la tabla ASCII, como se indica aquí: Tabla ASCII y descripción (http://www.asciitable.com).

    La función checkForEnter sólo se invoca si el usuario pulsa una tecla, como por ejemplo Tab o INTRO, cuando el campo de texto tiene el foco. La función, a su vez, invoca la función search sólo si se trataba de la tecla INTRO. Pronto creará la función search.

  6. Complete la función buttonClicked():
    function buttonClicked(event Event in)
       search();
    end

    La función buttonClicked y su relación con la propiedad onClick específica del botón asegura que cuando el usuario pulse el botón Search se invocará la función search.

  7. Para añadir la función search, coloque el siguiente código al final del manejador, antes de la sentencia end final del archivo:
    function search()
       localMap.zoom = 13;
       
       // mostrar un marcador inicial, según sea necesario para visualizar el mapa
       // (el marcador sólo identifica el código postal)
       localMap.addMarker(new MapMarker
          {address = zipField.text, description = "zipcode:  " + zipField.text});
    
       // Llamar al servicio Yahoo! remoto, pasando el código postal
       call lookupService.getSearchResults("YahooDemo", zipField.text)
          returning to showResults onException displayError;
    end
    Tenga en cuenta los siguientes detalles:
    • El widget Google maps de EGL incluye la propiedad zoom, que especifica la escala del mapa. En lugar de especificar la escala grande que se utiliza para el mapa predeterminado de Carolina del Norte, donde el valor de zoom era 8, establezca el valor de zoom en 13, que genera un mapa que muestra las calles de la ciudad.
    • El widget Google maps de EGL también incluye la función addMarker, que acepta un registro de tipo MapMarker e identifica la ubicación en el mapa de una dirección de entrada.

      En esta visualización inicial de un código postal específico, el único detalle que se proporciona a la función localMap.addMarker() es el propio código postal. Más tarde, establezca la propiedad address para ofrecer más detalle, que se utiliza para visualizar un marcador específico de dirección.

  8. A continuación, añada la función showResults que se invoca si el acceso al servicio de Yahoo! se realiza sin ningún error. Coloque el siguiente código después de la función search, pero antes de la última sentencia end del archivo:
    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	
    La llamada al servicio devuelve una matriz de detalles sobre las sociedades de crédito hipotecario. Considere los siguientes aspectos de la función showResults:
    • Cada elemento consta de un “título” (es decir, un nombre de empresa) y una dirección.
    • La función showResults crea una matriz de widgets de hiperenlace y lee paso a paso la matriz de entrada. Para cada elemento de la matriz de entrada, la función crea un elemento en la matriz de widgets de hiperenlace.
    • Como muestra la siguiente declaración, cada widget de hiperenlace tiene texto visualizable y relleno, e incluye un marcador de posición (#) en lugar de una dirección web:
      newLink HyperLink{padding = 4, text = retResult.result[i].title, href = "#"};

      El hiperenlace provocará la invocación del código y no de una dirección web. Sin embargo, la presencia del marcador de posición asegura que el hiperenlace mostrará el texto de una forma familiar, con un subrayado y en color, como cuando el usuario pulsa el hiperenlace para abrir un sitio web.

    • La función invoca la función setAttribute para colocar un valor en el árbol DOM, en un área de memoria que es específica del widget. Concretamente, la función almacena un título y después una dirección para su recuperación por parte de otra función.
    • En relación con cada widget de hiperenlace, la función showResults configura un comportamiento de tiempo de ejecución asignando la función mapAddress al evento onClick.
    • La matriz completa de widgets de hiperenlace se asigna como hijo único del recuadro de listado.
  9. Coloque la siguiente función después de la función showResults:
    function mapAddress(e Event in)
    
       // Mostrar el marcador cuando el usuario pulsa el enlace
       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

    Cuando el usuario pulsa el hiperenlace en tiempo de ejecución, la función mapAddress recupera los atributos que se habían establecido en la función showResults y establece un marcador en el mapa visualizado.

  10. Ahora puede añadir el manejador de excepciones que recibe datos si falla el acceso del servicio de Yahoo!. Coloque el siguiente código después de la función mapAddress, pero antes de la última sentencia end del archivo:
    function displayError(ex AnyException in)
       DojoDialogLib.showError("Yahoo Service", 
                               "Cannot invoke Yahoo Local Service: " 
                               + ex.message, null);
    end

    DojoDialogLib es un componente Library del proyecto com.ibm.egl.rui.dojo.samples que se ha añadido al espacio de trabajo de la Lección 2. La función showError de dicha biblioteca muestra información en un diálogo. La invocación de la función incluye una serie llamada message, que está en el registro de excepción que el código de tiempo de ejecución de EGL pasa a la función displayError.

  11. Formatee el código pulsando Ctrl-Mayús-F, resuelva las referencias pulsando Ctrl+Mayús+O y guarde el archivo. Si ve errores en el archivo fuente, compare el código con el contenido del archivo en Código terminado para MapLocatorHandler.egl después de la Lección 11.

Probar el portlet nuevo

Dado que este portlet funciona de manera independiente, puede probarlo por separado.

  1. Asegúrese de guardar el archivo y, a continuación, pulse Vista previa. EGL muestra el formulario de entrada con el mapa predeterminado de Carolina del Norte.
  2. Escriba el siguiente código postal:
    10001
    Este código postal hace referencia a midtown Manhattan.
  3. Pulse la tecla Intro o pulse el botón Buscar. Se visualiza una lista de sociedades de crédito hipotecario en la parte izquierda de la pantalla. A la derecha hay un mapa de la ciudad de Nueva York.
    Un mapa de midtown Manhattan.
    Nota: El Servicio de búsqueda local de Yahoo! a veces no devuelve datos, en cuyo caso se visualiza un mensaje de error debido a una “excepción nula”. 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.

  4. Pulse cualquiera de los nombres de la columna izquierda. El mapa muestra un marcador que muestra la ubicación de la empresa. Si pasa el cursor por encima del marcador, se visualizará el nombre de la empresa.
  5. Vuelva a realizar la misma búsqueda o bien busque en un código postal cercano, como por ejemplo 10009. Los marcadores que ha colocado en el mapa siguen allí. Además, observe que la búsqueda de Yahoo! ha recuperado direcciones de códigos postales adyacentes al que ha especificado.
  6. Si desea eliminar todos los marcadores antes de cada búsqueda, pulse la pestaña Fuente y añada la línea siguiente en la parte superior de la función showResults:
    localMap.removeAllMarkers();  
  7. Pruebe el trabajo en la pestaña Vista previa.
  8. Cierre el archivo.

Punto de comprobación de lección

Ha aprendido a realizar las tareas siguientes:
  • Crear y utilizar una variable que se basa en el servicio de búsqueda local.
  • Responder a las pulsaciones de usuario.
  • Utilizar el árbol DOM para pasar valores de una función a otra.
  • Empezar a utilizar un widget de mapa.

En la lección siguiente, incorporará el nuevo manejador en la aplicación.

< Anterior | Siguiente >

Comentarios