< Anterior | Siguiente >

Lección 5: Personalización de los resultados de la búsqueda

En esta lección, aprenderá a realizar una tabla de datos más compleja para visualizar los resultados de búsqueda.

Hasta ahora, cada componente JSF que ha añadido a las páginas Web se ha enlazado con datos de una sola tabla de base de datos. Si utiliza una base de datos relacional compleja, puede ser conveniente trabajar con datos procedentes de más de una tabla simultáneamente.

En esta lección, personalizará los resultados visualizando datos de la tabla de clientes y de la tabla de estados. De este modo, los resultados mostrarán tanto el nombre del cliente (de la tabla de clientes) como el nombre completo del estado del cliente en lugar de la abreviatura de dos letras (de la tabla de estados). También manipulará los resultados combinando el nombre y el apellido del cliente en un solo campo de nombre completo. La tabla de datos resultante tendrá este aspecto:

Tabla de datos con un nombre de cliente y un nombre de estado completos.

La forma más fácil de crear una tabla de datos personalizada como esta consiste en crear un registro EGL personalizado que represente un solo registro en esta tabla de datos. A continuación, creará una matriz de estos registros que se enlazará con la tabla de datos. El registro EGL personalizado que creará en esta lección tiene los tres campos siguientes:
  • El campo email, que contiene la dirección de correo electrónico del cliente procedente de la tabla de clientes.
  • El campo fullName, que contiene la combinación de nombre y apellido del cliente procedentes de la tabla de clientes.
  • El campo State, que contiene el nombre completo del estado del cliente. Para obtener el nombre completo, la función de búsqueda hace referencias cruzadas de la abreviatura de estado del cliente procedente de la tabla de clientes con la lista de abreviaturas y nombres de estado de la tabla de estados.

Añadir código a la biblioteca

  1. Abra SearchLibrary.egl.
  2. Añada la función siguiente a la biblioteca:
    function getOneState(state Statetable)
    get state;
    	end
    El registro stateTable se ha definido en el archivo Statetable.egl, por lo que, si no ha utilizado la conclusión de código para especificar esta función, deberá organizar las importaciones (Control+Mayús+O).
  3. Añada el código siguiente al archivo, justo después del final de la sentencia end de la biblioteca:
    Record customizedResult  type basicRecord
    	fullName STRING {displayName = "Nombre completo"};
    	email STRING {displayName = "Dirección de correo electrónico"};
    	stateName STRING {displayName = "Estado"};
    end
    Nota: Dado que la propia biblioteca no puede contener definiciones de registro, debe añadir la definición de registro customizedResult después de la sentencia end que cierra la biblioteca.
  4. Guarde el archivo.
  5. Genere el archivo.

Este es el código completo del archivo SearchLibrary.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 SearchLibrary.egl completado después de la lección 5.

Añadir código al archivo de código de página

  1. Vuelva a la página customersearch.jsp.
  2. Pulse la página customersearch.jsp con el botón derecho del ratón y pulse Editar código de página en el menú emergente.
  3. Añada la siguiente definición de variable al manejador JSF, después de la línea customerStates STRING[0];:
    allRecords customizedResult[0];
    Esta variable representa os nuevos resultados de búsqueda, basados en el registro personalizado que ha creado.
  4. Si no ha utilizado la terminación de código para insertar esta línea de código, asegúrese de organizar las importaciones.
  5. Añada la función siguiente al manejador JSF:
    function generateCustomResults(passedResults Customer[])
    allRecords.removeAll();
    oneRecord customizedResult;
    		counter INT = 1;
    state Statetable;
    		
    //bucle una vez para cada resultado de búsqueda devuelto
    while (counter <= (passedResults.getSize()))
    	oneRecord.fullName = passedResults[counter].FirstName ::
    	  " " :: passedResults[counter].LastName;
    	oneRecord.email = passedResults[counter].EmailAddress;
    			state.STATE_ABBREV = passedResults[counter].state;
    	SearchLibrary.getOneState(state);
    			oneRecord.stateName = state.STATE_NAME;
    	allRecords.appendElement(oneRecord);
    	counter = counter + 1;
    		end
    	end
    Esta función ensambla los resultados de búsqueda personalizados. Debe llamar a esta función al final de la función searchFunction().
  6. Añada esta línea de código inmediatamente antes de la sentencia end que cierra la función searchFunction() en el manejador JSF:
    generateCustomResults (searchResults);
  7. Guarde el archivo.
La nueva función que ha añadido al manejador JSF ensambla los resultados de búsqueda personalizados siguiendo estos pasos generales:
  1. Ensambla el nombre completo del cliente a partir del nombre y el apellido.
  2. Obtiene la dirección de correo electrónico del cliente.
  3. Obtiene la abreviatura del estado del cliente.
  4. Busca el nombre de estado que coincide con la abreviatura.
  5. Añade el nombre completo, la dirección de correo electrónico y el nombre de estado a la matriz allRecords.

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 5.

Crear la tabla de datos personalizada

  1. Vuelva a la página customersearch.jsp.
  2. Si desea eliminar los resultados de búsqueda antiguos, puede suprimir la tabla de datos antigua. Estos pasos son opcionales:
    1. Pulse en cualquier lugar de la tabla de resultados de búsqueda antigua para establecer en ella el foco del cursor.
    2. Pulse la tecla de flecha Abajo. Toda la tabla de datos quedará seleccionada.
    3. Pulse Suprimir. La tabla de datos se eliminará de la página.
  3. En la vista Datos de página, arrastre allRecords - customizedResult[] a la página, justo debajo de la ubicación de la tabla de datos antiguos. Se abre la ventana Insertar control de lista.
  4. Pulse el botón de selección situado junto a Visualizar un registro existente (sólo lectura).
  5. Pulse Finalizar. La tabla de datos nueva se creará en la página.
  6. Guarde la página.
  7. Pruebe la página.

Ahora, cuando busque un cliente, verá el nombre completo, la dirección de correo electrónico y el nombre de estado completo del cliente en la tabla de datos. La página tiene el aspecto siguiente:

Página de búsqueda finalizada

Punto de comprobación de lección

Ha personalizado los resultados de búsqueda combinando los campos de nombre y apellido en un solo campo de nombre completo y convirtiendo los dos códigos de caracteres del campo de estado en el nombre completo del estado.
En esta lección, ha aprendido a realizar las tareas siguientes:
  • Añadir a la biblioteca una función que personaliza los resultados
  • Añadir un registro al archivo de biblioteca, fuera de la propia biblioteca
  • Añadir la función de resultados personalizados nueva al manejador JSF
  • Colocar la tabla de resultados nueva en la página Web
  • Enlazar la función de resultados nueva a la tabla
< Anterior | Siguiente >

Comentarios