< Anterior | Siguiente >

Lección 2: Adición de código para la función de búsqueda

Una vez creada la página web, debe añadir el código EGL que recibe los términos de búsqueda de la página web, busca en la base de datos en función de dichos términos y visualiza los resultados de la búsqueda en la página.

Crear una biblioteca para las funciones de búsqueda

Dado que estas funciones de búsqueda pueden ser complicadas, es conveniente crear una biblioteca para contenerlas. A continuación, podrá reutilizar estas funciones y conservar los Manejadores JSF simples.
  1. Pulse con el botón derecho del ratón la carpeta EGLSource del proyecto EGLWeb y pulse Nuevo > Biblioteca. Se abrirá la ventana Biblioteca EGL nueva.
  2. En el campo Nombre de archivo fuente EGL, escriba este nombre para la biblioteca nueva:
    SearchLibrary
  3. En el campo Paquete, escriba libraries. EGL creará este paquete si no tiene uno con ese nombre.
  4. Bajo Tipo de biblioteca EGL, pulse Basic.
  5. Pulse Finalizar. La biblioteca nueva se crea y se abre en el editor de EGL.
  6. Elimine todo el texto de relleno de la biblioteca nueva, de forma que todo lo que quede sea el código siguiente:
    package libraries;
    
    library SearchLibrary type BasicLibrary
    
    end
Ahora puede añadir funciones a esta biblioteca y utilizarlas en los Manejadores JSF.

Añadir una función de búsqueda SQL a la biblioteca

  1. Al final del archivo SearchLibrary, pero antes de la sentencia final End, inserte este código:
    	function NameAndStateSearch_And(lname STRING in, 
    			state CHAR(2) in, 	customer Customer[])
    get customer;
    	end
    Esta función es similar a las funciones de otras bibliotecas que recuperan cada uno de los registros de la base de datos. La diferencia consiste en que esta función recibe estos tres parámetros:
    • La variable de tipo serie lname, que representa el apellido del cliente que se busca.
    • La variable de tipo carácter state, que representa el estado del cliente que se busca.
    • La matriz de registros de cliente customer, que contendrá los resultados de la búsqueda.

    En este momento, esta función recuperará todos y cada uno de los registros de la base de datos. En los próximos pasos, editará la sentencia SQL generada por esta función para que sólo se devuelvan los registros que coincidan con los términos de búsqueda lname y state.

  2. Si no utiliza la terminación de código para insertar esta función, pulse Control+Mayús+O para organizar las importaciones.
  3. Pulse con el botón derecho del ratón la palabra customer de la línea get customer y pulse Sentencia SQL > Añadir en el menú emergente. La sentencia SQL explícita se añade a la línea de código get customer.

    Estrictamente hablando, en el código no ha cambiado nada. EGL ha expuesto simplemente el código SQL predeterminado que crea cuando encuentra el código get customer. Una vez que este código SQL se muestra explícitamente en la página, puede editarlo para que se comporte de una forma distinta. En este caso, desea cambiar la sentencia para que, en lugar de recuperar todos los registros de cliente, recupere sólo los registros de cliente cuyo apellido y nombre coincidan.

  4. Añada una línea en blanco a continuación de la línea from EGL.CUSTOMER colocando el cursor al final de la línea y pulsando Intro.
  5. En la línea en blanco situada debajo de from EGL.CUSTOMER, inserte este código:
    where LASTNAME like :lname 
      and "STATE" = :state

    El código tiene este aspecto:

    Aspecto de la función NameAndStateSearch_And

    El código que ha añadido no es EGL, sino SQL. LASTNAME es el nombre completo de un campo en la base de datos de ejemplo que utiliza el proyecto. Si observa las partes Registro del paquete eglderbydb.data, verá que los registros como, por ejemplo, el registro Cliente también hacen referencia a estos campos. El código :lname y :state se denominan variables host, que es test contexto son variables EGL que el usuario utiliza en el código SQL. STATE se especifica entre comillas para indicar que "state" es el nombre de la tabla, no la palabra reservada de SQL.

    EGL ofrece diversos procedimientos para crear y generar sentencias SQL. En una guía de aprendizaje anterior de EGL, recuperó un registro de base de datos determinado especificando un número de ID de cliente. Esta cláusula creó una sentencia SQL where similar a la sentencia where que acaba de añadir. También puede utilizar una defaultSelectCondition para realizar la misma tarea.

  6. Guarde el archivo. EGL genera el archivo de forma automática.
A continuación figura el código completo del archivo de biblioteca. Si ve errores marcados con símbolos X de color rojo en el editor, asegúrese de que el código coincida con el código de este archivo: Archivo SearchLibrary.egl completado después de la lección 2

Utilizar la función de búsqueda en el Manejador JSF

  1. Abra la página customersearch.jsp.
  2. Pulse sobre el área de contenidos de la página con el botón derecho del ratón en el editor y pulse Editar código de página en el menú emergente. Se abrirá el archivo de código de página.
  3. En el manejador JSF de la página customersearch.jsp, busque las variables que ha creado para representar los términos de búsqueda y el resultado de la búsqueda:
    searchTerms Customer;
    searchResults Customer[0];
  4. Inmediatamente a continuación de las variables creadas anteriormente, añada el código siguiente para crear dos variables adicionales:
    resultMessage CHAR(80);
    numberOfResults INT;
    A continuación, debe crear una función a la que se llamará desde la página web. Esta función pasará la variable searchResults y los campos necesarios de la variable searchTerms a la función de la biblioteca.
  5. Añada la función siguiente al Manejador JSF justo antes del final de la sentencia end:
    function searchFunction()
    searchTerms.LastName = searchTerms.LastName::"%";
    		SearchLibrary.NameAndStateSearch_And(
    			searchTerms.LastName, 
    searchTerms.State, searchResults);
    resultMessage = " clientes encontrados.";
    numberOfResults = searchResults.getSize(); 
    	end
    Haga caso omiso de las X de color rojo por ahora.


  6. Añada el código a la función onPreRender para restablecer la página después de una búsqueda que ha fallado:
    	function onPrerender()
    if (searchResults.getSize() == 0)
       resultMessage = "No se han encontrado clientes o no se han especificado criterios de búsqueda.";
    		end
    	end

    He aquí información sobre el código de página que acaba de añadir:

    • El registro searchTerms y la matriz de registros searchResults son instancias del registro Customer. Puede crear varias instancias de un registro o componente DataItem.
    • Este código incluye la función searchFunction, que se enlazará al botón Someter de la página. Esta función llama a la función NameAndStateSearch_And que ha añadido anteriormente a la biblioteca en esta lección.
    • La función de búsqueda añade un carácter comodín al final del apellido especificado por el usuario. Por ejemplo, si el usuario especifica Sm, la serie de búsqueda se convierte en Sm% y devuelve resultados como, por ejemplo, Smith y Smiley.
    • La función de búsqueda es sensible a las mayúsculas/minúsculas.
  7. Organice las importaciones (Control+Mayús+O) y guarde el archivo.

Este es el código completo del archivo customersearch.egl. Si ve errores marcados por símbolos X rojos en el archivo, asegúrese de que el código coincida con el código de este archivo:Archivo customersearch.egl completado después de la lección 2

Enlace de la función de búsqueda a la página web

Una vez configurados los datos y la función en el manejador JSF, puede utilizarlos en la página.
  1. Abra la página customersearch.jsp.
  2. En la vista Datos de página, expanda Manejador JSF.
  3. En el grupo Datos, arrastre la variable numberOfResults directamente en el campo de texto de la salida de la izquierda que se halla debajo del botón Someter.
  4. En el grupo Datos, arrastre la variable resultMessage directamente en el campo de texto de la salida de la derecha.
  5. En el grupo Acciones, arrastre searchFunction() directamente al botón Someter de la página. El aspecto de esta página no cambia pero ahora la función está enlazada con el botón.
  6. Guarde la página.
  7. Pruebe la página ejecutándola en el servidor y especificando términos de búsqueda en ella:
    1. En la vista Explorador de proyectos, pulse con el botón derecho el archivo customersearch.jsp y pulse Ejecutar > Ejecutar en servidor. En guías de aprendizaje anteriores, debe haber configurado un servidor predeterminado para el proyecto. Si no lo ha hecho o ha cambiado los valores, puede que sea necesario seleccionar de nuevo el servidor que debe utilizarse.
    2. Cuando se abra la página en el navegador web, especifique una letra en el campo Apellido y un estado en el campo Estado, y pulse el botón Someter. Tenga en cuenta que esta página de búsqueda es sensible a las mayúsculas/minúsculas.

Esta página de búsqueda es difícil de utilizar, ya que el usuario debe conocer tanto el estado del cliente como la primera letra del apellido del cliente. Sería mejor si el usuario pudiera elegir entre una búsqueda AND y una búsqueda OR. En la próxima lección añadirá esta opción a la página. En una lección posterior, cambiará el campo de entrada Estado por un recuadro combinado que listará todos los estados válidos utilizados en la base de datos.

Además, hay un problema con la visualización de "clientes encontrados"; en la salida, el espacio antes de "clientes" se omite. En el ejercicio siguiente, se cambiará la hoja de estilo en cascada (CSS) de la página para corregir este problema.

Cambio del archivo CSS

Las hojas de estilo en cascada funcionan mediante las asociación de elementos en una página HTML con un conjunto de estilos que determina cómo se visualizar estos elementos. EGL proporciona dos hojas de estilo para la plantilla de la página que ha seleccionado:
stylesheet.css
Una hoja de estilo general para todas las plantillas
gray.css
Una hoja de estilo específica para la plantilla A_gray.htpl.

En este ejercicio se cambiará la plantilla más general.

  1. Sin cerrar la página de resultados de la búsqueda del navegador, expanda WebContent y tema. Efectúe una doble pulsación en stylesheet.css para que se abra en el editor.
  2. En el panel de la derecha del editor, localice el elemento .outputText. Añada la línea siguiente entre llaves:
    padding-right:5px;
    Es necesario que un navegador añada 5 píxeles de espacio a la derecha del texto que aparezca codificado como <h:outputText> cuando se visualiza. El elemento ahora tiene el aspecto del ejemplo siguiente; fíjese en los colores de los fonts:
    El estilo de relleno se añade al elemento.
  3. Guarde y cierre el archivo CSS.
  4. Vuelva a la página de resultados de la búsqueda (customersearch) en la ventana del navegador. Pulse el icono de renovación de página que está junto a la dirección:
    El icono de renovación consta de dos flechas pequeñas amarillas que forman un círculo.
    La página renovada ahora muestra un espacio entre el número y el texto del mensaje "clientes encontrados".

Punto de comprobación de lección

Ha creado el código EGL que regirá la página de búsqueda que ha creado en la lección anterior.
En esta lección, ha aprendido a realizar las tareas siguientes:
  • Crear una biblioteca EGL para contener funciones
  • Editar y añadir código al manejador JSF EGL para llamar a las funciones de la biblioteca
  • Enlazar las funciones del manejador JSF con los controles de la página web
Ahora está preparado para empezar la lección 3: Utilizar la condición de búsqueda OR.
< Anterior | Siguiente >

Comentarios