< Anterior | Siguiente >

Lección 1: Creación de una página de búsqueda sencilla

En esta lección configurará una página de búsqueda sencilla. En la próxima lección añadirá código EGL para que la página de búsqueda funcione.
Los pasos básicos para la construcción de esta página son esencialmente los mismos que para cualquier otra página web EGL-JSF:
  1. Crear la página web.
  2. Crear las variables EGL.
  3. Enlazar los datos EGL con componentes JSF.
  4. Añadir funciones EGL para gestionar las variables EGL.
Esta lección cubre los tres primeros pasos, y la próxima cubre el cuarto paso. Todas las lecciones se han creado a partir de los archivos y la experiencia que proporciona la guía de aprendizaje de Introducing EGL.

Creación de la página web

  1. En la vista Explorador de proyectos, pulse con el botón derecho del ratón la carpeta WebContent del proyecto EGLWeb y, a continuación, pulse Nuevo > Página web.
  2. En el campo Nombre de archivo escriba este texto como el nombre del archivo nuevo, incluida la extensión:
    customersearch.jsp
  3. Asegúrese de que en el campo Carpeta aparezca la carpeta /EGLWeb/WebContent.
  4. En la lista Plantilla, pulse Mis plantillas.
  5. En el recuadro Vista previa, pulse la plantilla A_gray.htpl.
  6. Pulse Finalizar. La página nueva se crea y se abre en el editor.
  7. En el lugar del texto predeterminado, escriba Búsqueda de clientes:
  8. Pulse Intro tres veces para insertar tres líneas en blanco.

Crear los registros

En estos pasos, creará dos registros EGL. El registro searchTerms representa la entrada de la búsqueda, o los términos de la misma. En este caso, el registro searchTerms contiene el nombre y el estado de los clientes que se buscan. La matriz de registros searchResults[] representa los resultados de la búsqueda, o los registros de la base de datos que coinciden con la entrada de la búsqueda.
  1. Desde el cajón EGL de la vista Paleta, arrastre una Variable nueva a la página, debajo del texto Búsqueda de clientes. Se abre la ventana Crear una variable de datos EGL nueva.
  2. Bajo Selección de tipo, pulse Registro.
  3. Bajo Tipo de registro, pulse Cliente.
  4. En el campo Especificar el nombre del campo, escriba lo siguiente:
    searchTerms
  5. Quite la marca del recuadro de selección Matriz.
  6. Quite la marca del recuadro de selección Añadir controles para visualizar el elemento EGL en la página web.
  7. Pulse Aceptar.
  8. Arrastre otra Variable nueva desde la vista Paleta a la página, debajo de Búsqueda de clientes. Se abrirá de nuevo la ventana Crear una variable de datos EGL nueva.
  9. Bajo Selección de tipo, pulse Registro.
  10. Bajo Tipo de registro, pulse Cliente.
  11. Bajo Especifique el nombre del campo, escriba este nombre para el campo:
    searchResults
  12. Marque el recuadro de selección Matriz.
  13. Quite la marca del recuadro de selección Añadir controles para visualizar el elemento EGL en la página web.
  14. Pulse Aceptar.
Ahora, estas dos variables nuevas aparecerán en la vista Datos de página.

Añadir los registros a la página

  1. En la vista Datos de página, expanda Manejador JSF y Datos.
  2. En la vista Datos de página, arrastre el registro searchTerms - Cliente a la página, debajo del texto Búsqueda de clientes. Se abre la ventana Insertar control.
  3. En la ventana Insertar control, bajo Crear controles para, pulse Actualizar un registro existente.
  4. Bajo Campos a visualizar, pulse el botón Ninguno bajo la lista de campos. Con ello quitará la marca de todos los recuadros de selección.
  5. Marque los recuadros de selección situados junto a los campos Apellido y Estado.
  6. Pulse en el botón Opciones.
  7. En la ventana Opciones, marque el recuadro de selección Botón Someter.
  8. En el campo Etiqueta de botón Someter, escriba Someter.
  9. Quite la marca del botón de selección Botón Suprimir.
  10. Pulse Aceptar.
  11. Pulse Finalizar. Aparecerá un formulario en la página, con campos para el apellido y el estado del cliente. Escribirá los términos de búsqueda en estos campos de entrada para buscar un cliente. La página tiene el aspecto siguiente:

    Aspecto de la página de búsqueda

  12. Añada una línea en blanco debajo del botón Someter situando el cursor a la derecha del campo {Mensajes de error} del botón Someter y pulse Intro.
  13. Desde la Paleta, abra el cajón Componentes Faces mejorados.
  14. Arrastre dos componentes Salida del cajón Componentes Faces mejorados a la página, en la línea nueva situada debajo del botón Someter. Estos campos de salida visualizarán el número de resultados devueltos y un mensaje, como por ejemplo 5 Clientes encontrados. ¿Buscar de nuevo?
  15. Añada otra línea en blanco después de los campos de salida. En la vista Datos de página, arrastre searchResults - Customer[] a la línea en blanco nueva, debajo del botón Someter y de los dos campos de salida nuevos. Se abre la ventana Insertar control de lista.
  16. En la ventana Insertar control de lista, pulse el botón de selección situado junto a Visualizar un registro existente (sólo lectura).
  17. Bajo Columnas a visualizar, pulse el botón Ninguna bajo la lista. Con ello quitará la marca de los recuadros de selección.
  18. Marque los recuadros de selección situados junto a los campos Apellido, Dirección de correo electrónico y Estado. La ventana Insertar control de lista tiene el aspecto siguiente:

    Ventana Insertar control de lista

  19. Pulse Finalizar.
  20. Guarde la página.
Ahora, la página de búsqueda contiene dos campos de entrada para que el usuario escriba los términos de búsqueda, así como una tabla de datos para visualizar los resultados de la búsqueda. La página de búsqueda tiene este aspecto:

Aspecto de la página de búsqueda

Punto de comprobación de lección

Acaba de crear una página de búsqueda sencilla.
En esta lección, ha aprendido a realizar las tareas siguientes:
  • Crear una página web EGL
  • Crear registros EGL
  • Añadir registros EGL a la página web
Ahora está preparado para empezar la lección 2: Añadir código para la función de búsqueda.
< Anterior | Siguiente >

Comentarios