< Anterior | Siguiente >

Lección 6: Añadir datos a la página

En este ejercicio añadirá datos de la base de datos incluida con esta guía de aprendizaje a la página web creada en el ejercicio anterior.
Esta tarea tiene varias partes:

En esta lección, también utilizará la característica de asistencia de contenido de EGL, una herramienta que permite completar sentencias de programación sin necesidad de escribir toda la sentencia.

Añadir una matriz de registros a la vista Datos de página y al manejador de JSF

  1. Si el archivo allcustomers.jsp no está abierto, ábralo efectuando una doble pulsación sobre él en la vista Explorador de empresa.
  2. Busque la vista Datos de página que normalmente está en la parte inferior izquierda del entorno de trabajo. Puede acceder a la vista Datos de página utilizando las pestañas, pero si no la encuentra, pulse Ventana > Mostrar vista > Datos de página.
  3. Busque la vista Paleta que normalmente está en el lado derecho del entorno de trabajo. Si no puede encontrar esa vista, pulse Ventana > Mostrar vista > Básica > Paleta.
  4. En la vista Paleta, pulse la bandeja EGL para abrirla.
  5. Arrastre el icono Variable nueva de la vista Paleta a la página allcustomers.jsp del editor. Se abre la ventana Crear una variable de datos EGL.
  6. Bajo Selección de tipo, pulse Registro.
  7. Bajo Tipo de registro, pulse Customer. De esta forma, selecciona el componente Record en el que se basará cada uno de los elementos de matriz.
  8. En el campo Especifique el nombre del campo, escriba lo siguiente:
    customers
  9. Bajo Propiedades de matriz, marque el recuadro de selección Matriz. Deje el campo Tamaño en blanco.
  10. Quite la marca del recuadro de selección Añadir controles para visualizar el elemento EGL en la página web.

    La ventana Crear una variable de datos EGL nueva tiene este aspecto:

    Ventana Crear un variable de datos EGL nueva

  11. Pulse Aceptar. En la JSP a la que ha arrastrado la variable, no aparece nada. La razón es que EGL ha creado la variable en un archivo separado, denominado Manejador de JSF, que contiene código correspondiente a los sucesos de la JSP. En la vista Datos de página, aparece un elemento que representa la nueva variable, bajo Manejador JSF > Datos.
  12. Expanda Manejador JSF > Datos y, después, customers - Customer[]. Bajo customers hay 12 iconos que representan los 12 campos de este registro de base de datos.

La vista Datos de página tiene el aspecto siguiente:

Vista Datos de página con la variable de matriz customers visible

Al añadir entradas a la vista Datos de página, también ha añadido una matriz de registros al manejador JSF. En la acción siguiente, creará los campos relacionados en la página web.

Visualizar los datos en la página web

Los datos listados en la vista Datos de página pueden añadirse a la página web.
  1. Desde la vista Datos de página, arrastre la variable de matriz customers - Customer[] al archivo allcustomers.jsp, soltándola bajo el texto List of All Customers, en las líneas en blanco añadidas en el ejercicio anterior.

    Se abre la ventana Insertar control de lista. Esta ventana lista todos los campos del registro de base de datos. Puede utilizar esta ventana para elegir qué campos se mostrarán en la página.

  2. En Control de datos a crear, deje el valor predeterminado, Tabla de datos multicolumna.
  3. En Crear controles para, pulse Visualizar un registro existente (sólo lectura).

    Con esta opción seleccionada, los datos de la página se visualiza en campos de salida de solo lectura. Si elige Actualizar un registro existente, los campos de la página son campos de entrada en los que puede teclear y bajo los campos habrá botones a los que enlazar acciones. Creará este tipo de campo en otra página. Para nuestros propósitos, la opción Crear un registro nuevo es equivalente a la opción Actualizar un registro existente excepto en que los botones predeterminados son diferentes.

  4. En Columnas a visualizar, pulse el botón Ninguno. Ha deseleccionado todos los campos.
  5. Marque los recuadros de selección situados junto a estos campos:
    • CUSTOMERID
    • FIRSTNAME
    • LASTNAME

    La ventana Insertar control de lista tiene el aspecto siguiente:

    Ventana Insertar control de lista

  6. Pulse Finalizar. Se crea una tabla de datos en la página con tres columnas para los tres campos seleccionados en la ventana Insertar control de lista.
  7. Guarde la página.

La página tiene el aspecto de la de este ejemplo:

Aspecto actual de la página

Las columnas de la tabla de datos tienen cabeceras basadas en los nombres de los campos en la base de datos. Puede cambiar estas cabeceras pulsando sobre ellas, abriendo la vista Propiedades y cambiando el campo Valor.

Los tres campos de texto de la tabla de datos que aparecen como {CUSTOMERID}, {FIRSTNAME} y {LASTNAME}, representan los lugares en los que la información de base de datos aparecerá en la página.

Llamar a una función desde la biblioteca EGL

El paso siguiente consiste en añadir a esta página código que llame a la función de la biblioteca CustomerLibrary.egl. Esta función lee los datos de la base de datos y los pone a disposición de la página.

  1. Pulse con el botón derecho del ratón en el área de formato libre del archivo allcustomers.jsp.
  2. En el menú emergente, pulse Editar código de página.

    El archivo allcustomers.egl se abre en el editor. Este archivo contiene un componente de manejador JSF. En los pasos siguientes se añade a este manejador JSF código que recupera datos de la base de datos y los coloca en la página.

  3. En el archivo allcustomers.egl, busque la línea customers Customer[0];

    Esta es la línea de código que define la variable de registro creada para visualizarla en la página. También necesita definir un registro para almacenar el código de satisfacción o anomalía de la llamada SQL.

  4. En una línea en blanco situada inmediatamente después de la línea customers Customer[0];, añada el código siguiente, tal como se ha escrito:
    status StatusRec;
    Fíjese en la línea roja ondulada bajo StatusRec que indica que el manejador no conoce el tipo. Debe añadir una sentencia import que indique al manejador dónde encontrar la definición de registro StatusRec. Puede hacerlo automáticamente pulsando con el botón derecho sobre el espacio en blanco en la ventana del editor y pulsando Organizar importaciones.
    La línea roja ondulada bajo StatusRec y el menú desplegable mostrando la opción Organizar importaciones.

    El atajo de teclado para esta característica es Control+Mayús+O. EGL comprueba todos los archivos que puede ver, busca la información necesaria y añade una sentencia import en la parte superior del archivo.

    Ahora tiene el registro a recuperar de la base de datos y el registro de estado SQL. El paso final para añadir los datos a la página consiste en pasar estas dos variables a la función que accede a la base de datos. Esta función, llamada GetCustomerListAll(), la creó el asistente Aplicación de acceso a datos en una lección anterior.

    Observe las líneas entre corchetes que siguen a la declaración handler. Estas líneas asignan valores a propiedades del manejador de JSF. En EGL, las propiedades son pares nombre-valor que modifican el comportamiento de un componente. La mayoría de tipos de componentes EGL pueden tener una o varias propiedades y cada tipo de componente puede tener diferentes propiedades. En este caso, el Manejador JSF tiene cuatro propiedades definidas:

    onConstructionFunction = onConstruction
    La propiedad onConstructionFunction especifica una función en el Manejador JSF que se ejecuta la primera vez que la página web (JSP) asociada con el Manejador JSF se visualiza en un navegador. En este caso, la propiedad especifica una función llamada onConstruction, que se crea de forma predeterminada en el Manejador JSF. En esta guía de aprendizaje no trabajará con esta función.
    onPreRenderFunction = onPreRender
    La propiedad onPreRenderFunction especifica una función del manejador JSF que se ejecuta cada vez que se muestra la JSP asociada en el navegador, incluyendo cuando el usuario renueva la página o vuelve a ella después de visualizar otra página. En este caso, la propiedad especifica una función llamada onConstruction, que se crea de forma predeterminada en el Manejador JSF. En los próximos pasos, añadirá código a esta función para recuperar datos actuales de la base de datos cada vez que se cargue la página.
    view = "allcustomers.jsp"
    La propiedad view especifica la página web asociada al Manejador JSF. De forma predeterminada, la página web y el Manejador JSF tienen el mismo nombre exceptuando las extensiones de archivo.
    viewRootVar = viewRoot
    La variable viewRoot se utiliza para obtener acceso al árbol de componentes de JSF. En esta guía de aprendizaje no utilizará la variable viewRoot. Para obtener más información acerca de los componentes JSF y la variable viewRoot, consulte la sección Acceso al árbol de componentes.
  5. Añada el código para llamar a la función de biblioteca GetCustomerListAll() para la función onPreRender(). Esta función recupera los datos de cliente de la base de datos. En este caso, intente utilizar la herramienta de asistencia de contenido del editor de EGL:
    1. Sitúe el cursor en una línea en blanco entre function onPreRender() y end.
    2. Teclee el código siguiente:
      cust
    3. Pulse Control+Barra espaciadora. La ventana de conclusión de código se abre con todos los mandatos y recursos EGL disponibles que empiezan por cust.
    4. En la ventana de asistencia de contenido, seleccione la biblioteca CustomerLib, ya sea resaltándola con el teclado y pulsando Intro o efectuando una doble pulsación sobre ella con el ratón.

      Ahora la línea de código es CustomerLib.

    5. Teclee un punto tras CustomerLib.
    6. Vuelva a pulsar Control+Barra espaciadora. La ventana de conclusión de código vuelve a abrirse.
    7. En la ventana de conclusión de código, seleccione la función GetCustomerListAll(customerArray Customer[], status StatusRec), ya sea resaltándola y pulsando Intro o efectuando una doble pulsación sobre ella con el ratón. Tenga cuidado de no seleccionar la función GetCustomerList(listSpec ListSpecification, listOut Customer[], status StatusRec).

      Ahora, la nueva línea de código indica CustomerLib.GetCustomerListAll(customerArray, status); y el argumento customerArray está resaltado.

    8. Cambie el argumento customerArray predeterminado de la línea de código nueva por el nombre de la variable de registro: customers.
    9. Termine la línea de código con un signo de punto y coma.
    Finalmente, la línea de código nueva es:
    CustomerLib.GetCustomerListAll(customers, status);
    Además, tenga en cuenta que hay una sentencia import nueva junto a la parte superior del archivo que indica import eglderbydb.access.CustomerLib; Esta línea importa la biblioteca por lo que no necesita escribir la vía de acceso completa de la biblioteca en el código y en su lugar puede hacer referencia a esta directamente.

    La asistencia de contenido ha añadido esta sentencia import automáticamente. Si no hubiera utilizado la asistencia de contenido o la característica Organizar importaciones para crear esta sentencia import, debería especificar la ubicación explícita de la biblioteca, calificando el nombre de biblioteca con los nombres siguientes: eglderbydb.access.CustomerLib.

  6. Guarde el archivo.
Ahora, el archivo allcustomers.egl tiene el aspecto al del ejemplo siguiente:
Código para el archivo allcustomers.egl

Si ve errores marcados con símbolos X rojos en el editor, asegúrese de que el código coincide con el código de este archivo: Archivo allcustomers.egl finalizado después de la lección 6.

Probar la página

Ahora la página está lista para ejecutarse en el servidor. Siga estos pasos para probarla y ver cómo los datos de la base de datos aparecen en la página.

Antes de continuar, tome las precauciones siguientes:
  1. Guarde los archivos allcustomers.egl y allcustomers.jsp si todavía no lo ha hecho y, a continuación, cierre ambos archivos.
  2. Asegúrese de que el servidor de aplicaciones se ha iniciado y está sincronizado.
  1. En la vista Explorador de empresa, pulse con el botón derecho del ratón sobre el proyecto EGLWeb y a continuación, pulse Generar.
  2. En la vista Explorador de empresa, pulse el archivo allcustomers.jsp, no el archivo allcustomers.egl.
  3. En el menú emergente, pulse Ejecutar como > Ejecutar en servidor.

    Al igual que en la lección anterior, la página web se abre en un navegador web dentro del entorno de trabajo. Esta vez, los datos dinámicos aparecen en la página. Si no ve los datos dinámicos, pulse el icono de renovación situado junto a la barra de direcciones. La página tiene el aspecto siguiente:

    Aspecto actual de la página allcustomers.jsp

En la lección siguiente, creará una página detallada para mostrar todos los campos de un registro de cliente individual.
< Anterior | Siguiente >

Comentarios