< Anterior | Siguiente >

Lección 4: Llenado de un recuadro combinado dinámicamente

En esta lección, mejorará la página de búsqueda listando las opciones posibles para el estado del cliente en un recuadro combinado.
Para facilitar la búsqueda a los usuarios, debe evitar los errores de los mismos y simplificar las decisiones que éstos deben tomar siempre que sea posible. En esta lección, aprenderá a facilitar el uso de la página de búsqueda sustituyendo el campo de entrada Estado por un recuadro combinado. Este recuadro combinado sólo lista los estados que están representados por un registro cliente como mínimo en la base de datos, evitando que el usuario tenga que adivinar el estado que debe utilizar.

Añadir el código a la biblioteca

En primer lugar, debe añadir a la biblioteca una función que recupere todos los estados representados en la base de datos. Esta función es más sencilla que las demás funciones de la biblioteca, ya que sólo necesita recuperar una columna de la base de datos y no existen parámetros de entrada para la búsqueda, sino sólo una matriz de salida que contenga la lista de estados. Podría utilizar una matriz de registros de cliente para la información de estado, pero es más fácil trabajar con una matriz de series, ya que no necesita el resto de los campos del registro.
  1. Abra SearchLibrary.egl.
  2. Añada la función siguiente a la biblioteca:
    	function getAllCustomerStates(listOfStates STRING[])
    customers Customer[0];
    		counter INT;
    
    get customers with
    			#sql{
    				select "STATE"
    				from EGL.CUSTOMER
    				order by "STATE" asc
     			};
    
    listOfStates.removeAll();
    for (counter from 1 to customers.getSize() by 1)
    listOfStates.appendElement(customers[counter].State);
    		end
    
    	end
  3. Guarde el archivo.
  4. Genere la biblioteca.
A continuación figuran algunas notas técnicas acerca de la función getAllCustomerStates que acaba de añadir:
  • Esta función accede a los registros de cliente de la base de datos de la misma forma que la función getAllCustomers(). La principal diferencia consiste en que la función getAllCustomerStates() selecciona sólo los campos STATE en lugar de todos los campos de la tabla Clientes.
  • El mandato SQL "group by" agrupa los resultados por estado, de forma que cada estado aparece una sola vez en los resultados.
  • El mandato SQL "order by" coloca los resultados en orden alfabético; la palabra clave asc indica orden ascendente.
  • El bucle for mueve sólo el campo de estado de los registros a una matriz de series.

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

Añadir el código al manejador JSF

  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. Después de la línea de código andOr CHAR(3);, añada esta otra:
    customerStates STRING[0];
    Esta variable contiene la lista de estados devueltos por la función de la biblioteca.
  4. Añada una línea en blanco después de function onPreRender(). A continuación, añada esta línea de código en la línea en blanco:
    SearchLibrary.getAllCustomerStates(customerStates);
  5. Guarde el archivo.

Cuando haya terminado, el archivo customersearch.egl tiene un aspecto parecido al siguiente (algunas funciones se comprimen, lo que se indica mediante un signo más en el margen izquierdo de la página):

Código en el archivo customersearch.egl

A continuación encontrará algunas notas técnicas sobre el código que acaba de añadir:

  • La matriz customerStates contiene la lista de estados representados por un cliente como mínimo en la base de datos.
  • La línea que ha añadido a la función onPreRender envía la matriz customerStates a la función getAllCustomerStates de la biblioteca, llenando la matriz con la lista de estados.

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 4

Añadir el recuadro combinado a la página

Añadir un recuadro combinado que se llene dinámicamente es más complicado que añadir un control JSF que tenga valores predefinidos, como por ejemplo el grupo de botones de selección que ha añadido en la lección anterior. Este recuadro combinado debe enlazarse a dos partes de los datos EGL:
  • La matriz customerStates, que proporciona la lista de opciones para el recuadro combinado.
  • La variable searchTerms.State, que contiene la selección realizada por el usuario en el recuadro combinado.
  1. Vuelva a la página customersearch.jsp.
  2. Pulse el campo de entrada STATE para seleccionarlo y pulse Suprimir. El campo de entrada se eliminará de la página.
  3. Desde la Paleta, abra el cajón Componentes Faces mejorados.
  4. Arrastre un elemento Combo Box a la página y sitúelo donde se encontraba el campo de entrada STATE.
  5. En la vista Datos de página, expanda Manejador JSF > Datos > searchTerms - Customer.
  6. Bajo searchTerms - Customer en la vista Datos de página, arrastre State - State al recuadro combinado.
    En el mensaje del cursor se puede leer, "Soltar aquí para enlazar 'STATE' al 'menu1' de control".
  7. Pulse el recuadro combinado para seleccionarlo.
  8. Abra la ventana Propiedades. En la vista Propiedades, observe que el campo Valor está establecido en #{customersearch.searchTerms.State}, indicando que el valor de la selección en el recuadro combinado se coloca en el campo State del registro searchTerms.
  9. En la vista Propiedades, pulse Añadir conjunto de opciones, que se encuentra en el extremo derecho de la vista, cerca de la tabla de opciones. Un elemento nuevo se añadirá a la lista de opciones, con la etiqueta <selectitems> y un valor predeterminado. La etiqueta <selectitems> es un código JSF que representa varias opciones, en lugar de una sola etiqueta estática. En otras palabras, el recuadro combinado utilizará los valores que especifique en la columna Valor tanto para las etiquetas del recuadro combinado como para los valores representados por las etiquetas.
  10. Junto a la etiqueta <selectitems>, pulse el botón Seleccionar objeto de datos de página en el campo Valor. Se abrirá la ventana Seleccionar objeto de datos de página.
  11. En la ventana Seleccionar objeto de datos de página, expanda Datos y pulse customerStates - string[].

    La ventana Seleccionar objeto de datos de página tiene el aspecto siguiente:

    Aspecto de la ventana Seleccionar objeto de datos de página

  12. Pulse Aceptar. Ahora, las opciones del recuadro combinado proceden de la variable customerStates, mientras que el estado seleccionado en el recuadro combinado se coloca en la variable searchTerms.
  13. Guarde la página.
  14. Pruebe la página.

Punto de comprobación de lección

Ha creado en la página web un recuadro combinado que crea una lista de parámetros de búsqueda.
En esta lección, ha aprendido a realizar las tareas siguientes:
  • Añadir el código para una búsqueda limitada a la biblioteca.
  • Añadir código al manejador JSF para que llame a la función de búsqueda revisada.
  • Añadir un recuadro combinado a la página web.
  • Enlazar la función de búsqueda revisada al recuadro combinado.
Ahora está preparado para empezar la lección 5: Personalizar los resultados de la búsqueda.
< Anterior | Siguiente >

Comentarios