< Anterior | Siguiente >

Lección 8: Crear una página de actualización

En este ejercicio, puede crear la página web que permita a los usuarios actualizar la tabla CUSTOMER. Esta página recibirá el parámetro pasado por la otra página, visualizará sólo el registro indicado por ese parámetro y aceptará información actualizada para el registro.

Crear el archivo updatecustomer.jsp

  1. En la vista Explorador de empresa, pulse la carpeta WebContent del proyecto EGLWeb.
  2. Pulse Nuevo > Página web.
  3. En el campo Nombre de archivo teclee este texto como el nombre del archivo nuevo:
    updatecustomer.jsp
  4. Asegúrese de que en el campo Carpeta aparezca la carpeta /EGLWeb/WebContent.
  5. En la lista Plantilla, pulse Mis plantillas.
  6. En el recuadro Vista previa, pulse la plantilla A_gray.htpl.
  7. Pulse Finalizar. La página nueva se crea y se abre en el editor.
  8. Sustituya el texto predeterminado por este texto:
    Actualizar información de cliente
  9. Pulse Intro tres veces para insertar tres líneas en blanco.
  10. Guarde la página.
La página updatecustomer.jsp nueva tiene el aspecto siguiente:

Aspecto de la página updatecustomer.jsp

Añadir un registro EGL y visualizarlo en la página

El paso siguiente consiste en añadir datos de EGL a esta página. Al crear el archivo allcustomers.jsp, añadió los datos a la página en un paso y después visualizó los datos en la página arrastrándolos de la vista Datos de página en un segundo paso. Esta vez, marcará el recuadro de selección Añadir controles para visualizar el elemento EGL en la página web para añadir los datos a la página y visualizarlos en la página en un paso.
  1. Abra la bandeja EGL en la vista Paleta.
  2. Arrastre el icono Variable nueva a la página, bajo el texto "Actualizar información de cliente." Se abre la ventana Crear una variable de datos EGL nueva.
  3. Bajo Selección de tipo, pulse Registro.
  4. Bajo Tipo de registro, pulse Customer.
  5. En el campo Especifique el nombre del campo, escriba lo siguiente:
    cliente
  6. Bajo Propiedades de matriz, quite la marca del recuadro de selección Matriz.
  7. Marque el recuadro de selección Añadir controles para visualizar el elemento EGL en la página web.
  8. Pulse Aceptar. El registro nuevo aparece en la vista Datos de página y se abre la ventana Insertar control.
  9. En la ventana Insertar control, pulse Actualizar un registro existente.
  10. Pulse Opciones. Se abre la ventana Opciones.
  11. Marque el recuadro de selección Botón Someter.
  12. Quite la marca del botón de selección Botón Suprimir.
  13. Para la Etiqueta del Botón Someter, teclee este texto:
    Update this record
  14. Pulse Aceptar.
  15. Pulse Finalizar.
  16. Guarde la página.

Los controles de datos para actualizar el registro se insertan en la página web. Fíjese en que hay un control {Mensajes de error} en la página. Este control no significa que la página tenga errores; el control {Mensajes de error} marca el lugar en el que se visualizarán mensajes de error de tiempo de ejecución.

La página tiene el aspecto siguiente:

Aspecto de la página updatecustomer.jsp

Recuperar los datos

Ahora que hay campos para los datos de la página, debe añadir el código que recupera los datos desde la base de datos. Recuerde de la lección anterior que añadió un enlace para pasar el número de ID de cliente en un parámetro llamado CID. En estos pasos, configurará el manejador de la nueva página web para que acepte este parámetro y recupere el registro adecuado de la base de datos que debe visualizarse en la página.
  1. Pulse con el botón derecho del ratón en el área de formato libre del archivo updatecustomer.jsp.
  2. En el menú emergente, pulse Editar código de página. El archivo updatecustomer.egl se abre en el editor.
  3. Al igual que en el manejador JSF anterior que ha editado, debe añadir un registro para almacenar el código de éxito o anomalía de la llamada SQL. Inmediatamente después de la línea customer Customer;, añada el código siguiente, tal como se ha escrito:
    status StatusRec;
    El paso siguiente en la adición de los datos a la página consiste en configurar el manejador JSF para aceptar el parámetro CID que le pasará el enlace.
  4. Cambie la línea function onPreRender() por el código siguiente, tal como se ha escrito:
    function onPreRender(CID INT)
    Ahora el manejador JSF se configura para aceptar un parámetro entero llamado CID.
  5. En una línea en blanco, inmediatamente después de function onPreRender(CID INT), añada este código tal como se ha escrito:
    customer.customerId = CID;
    Ahora ha asignado el número de ID al registro de cliente. El paso siguiente consiste en recuperar el registro con este número de ID de la base de datos
  6. En la línea siguiente, añada este código, tal como se ha escrito. Puede utilizar la característica de conclusión de código que ha conocido en el apartado Lección 6: Añadir datos a la página.
    CustomerLib.GetCustomer(customer, status);
    La función GetCustomer funciona como la función GetCustomerAll utilizada anteriormente, pero la función GetCustomer recupera un registro mientras que la función GetCustomerAll recupera una matriz de registros. Ahora el cliente contiene el registro con el ID pasado a este manejador JSF.
    La función nueva tiene el aspecto siguiente:
    	function onPreRender(CID INT)
    customer.CustomerId = CID;
    		CustomerLib.GetCustomer(customer, status);
    	end
  7. Optimice las importaciones y guarde el archivo.
El manejador JSF tiene este aspecto:
Aspecto del archivo updatecustomer.egl

Ahora, cuando pulse un enlace de la página allcustomers.jsp, la página updatecustomer.jsp se carga con detalles acerca del registro del cliente. Ahora puede cambiar la información de los campos en la página web pero no hay función para enviar estas actualizaciones a la base de datos. En la sección siguiente, utilizará la función UpdateCustomer para hacer estas actualizaciones en la base de datos.

Actualizar el registro en la base de datos

En esta sección, añadirá una función EGL nueva en el manejador JSF llamado updateRecord. A continuación, enlazará esta función con el botón creado en la página web. De esta forma, cuando pulse el botón sobre la página web, se ejecutará la función updateRecord y llamará a la función UpdateCustomer para actualizar el registro de base de datos. Finalmente, la función updateRecord reenviará el navegador a la página allcustomers.jsp para que pueda ver los cambios realizados en el registro.
  1. En el archivo updatecustomer.egl, inmediatamente antes de la sentencia End, añada la función siguiente, tal como se muestra. Puede utilizar la conclusión de código o pegar la función de esta página para asegurarse de que sea correcto.
    function updateRecord()
      CustomerLib.UpdateCustomer(customer, status);
      forward to "allcustomers";
    end
  2. Guarde y cierre el archivo.

    El paso siguiente consiste en enlazar esta función al botón de la página web.

  3. Abra la página updatecustomer.jsp en el editor. Todavía puede tener esta página abierta en las pestañas del editor. Si no puede encontrarla allí, efectúe una doble pulsación sobre el archivo updatecustomer.jsp en la vista Explorador de proyectos, en la carpeta EGLWeb/WebContent.
  4. En la vista Datos de página, expanda Manejador JSF > Acciones. En esta carpeta figuran todas las funciones del manejador JSF, salvo las funciones onPreRender() y onConstruction(). En este caso, esta carpeta muestra la función updateRecord() que acaba de crear.
  5. Arrastre la función updateRecord() directamente sobre el botón de la página web llamado "Update this record". El aspecto de esta página no cambia pero ahora esta función está enlazada con el botón y se ejecutará al pulsar el botón.
  6. Guarde la página.

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

Aspecto del archivo updatecustomer.egl

Probar el sitio finalizado

Ahora el sitio está listo para la prueba. Ahora puede actualizar y ver cualquiera de los registros de la tabla Customer de la base de datos.
  1. En la vista Explorador de empresa, pulse con el botón derecho el archivo allcustomers.jsp y pulse Ejecutar como > Ejecutar en servidor. La página relacionada se abre en el navegador web. Ahora cada apellido de cliente de la lista es un hiperenlace a la página web visualizada por updatecustomer.jsp.
  2. Pulse uno de apellidos de cliente. Se le envía a la página web visualizada por updatecustomer.jsp y la página web muestra la información específica de fila.
  3. Escriba un FIRST_NAME nuevo para el registro.
  4. Teclee información nueva para algunos de los otros campos de esta página. No cambie el campo CUSTOMER_ID.
  5. Cuando haya terminado de teclear información nueva, pulse el botón Actualizar este registro.
Cuando pulse el botón Actualizar este registro volverá a la página allcustomers.jsp. Tenga en cuenta que el registro ha cambiado para mostrar el FIRST_NAME nuevo tecleado. Puede pulsar sobre el apellido de ese registro para ver la información nueva guardada en la base de datos.

Ha completado la guía de aprendizaje

En esta guía de aprendizaje ha construido un programa de utilidad de mantenimiento funcional para un archivo de clientes utilizando un base de datos Derby de ejemplo. Ahora puede ir más allá completando la guía de aprendizaje Construir una página de búsqueda JSF con EGL.
< Anterior | Siguiente >

Comentarios