< Anterior | Siguiente >

Lección 2.2: Utilizar el componente de subida de archivos

Utilice esta lección para aprender a otorgar a los usuarios la capacidad de subir imágenes para los anuncios clasificados. Esta función es particularmente importante en las páginas new_record.jsp y update_record.jsp. El componente Subir archivos permite a los usuarios examinar su sistema de archivos, subir un archivo a la base de datos y hacer que este archivo se muestre inmediatamente en la base de datos.

Como el procedimiento para el uso del componente Subir archivos es parecido en los casos de creación y actualización, en este ejercicio haremos que la página Actualizar cambie la imagen actual para los listados. Si quiere, puede hacer los mismos cambios en la página Registro nuevo, cuando haya terminado con la página de actualización.

Añadir la foto actual a la página

Se habrá fijado que el formulario de actualizaciones no es más que una tabla HTML con texto estático y componentes de entrada que enlazan a columnas del registro relacional update_record. Teniendo esto en cuenta, puede añadir filas y columnas para modificar el formulario como modificaría cualquier tabla HTML. En los pasos siguientes añadiremos una fila nueva para mostrar la fotografía actual.

Añadir filas y columnas es más complicado en una tabla de datos que muestra una lista de registros relacionales. Para obtener información acerca de la adición de columnas a una tabla de datos, consulte la Lección 1.2: Conectarse a una base de datos y visualizar datos en una página Web.

  1. Realice una doble pulsación sobre la página update_record.jsp en la vista Explorador de empresas.
  2. Coloque el cursor en la primera celda de la tabla (arriba a la izquierda). La etiqueta de esta celda es Id.
  3. Desde el menú principal, pulse Tabla > Especificar y añadir. Se abre el diálogo Añadir filas o columnas. Pulse Filas y Más arriba de la celda seleccionada. Esto creará una fila nueva en la parte superior de la tabla que contendrá la foto actual del registro. Pulse Aceptar.
  4. En la celda de la izquierda de esta fila nueva, entre Fotografía actual: a modo de etiqueta.
  5. Arrastre un componente Imagen del cajón Componentes Faces de la paleta a la celda más a la derecha de la fila nueva. Al contrario que en el ejercicio anterior, se permitirá al usuario ver la imagen completa, sin restricción de tamaño, por lo que no debe cambiar el ancho y alto en la vista Propiedades.
  6. Enlace el componente imagen a la columna PHOTO de update_record arrastrando la columna PHOTO de la vista Datos de página sobre el componente imagen nuevo. El componente Imagen está ahora enlazado a la columna PHOTO de la base de datos.
  7. Con la imagen gráfica seleccionada, vaya a la vista Propiedades y pulse el botón Seleccionar objeto de datos de página situado junto al campo Tipo. Se abrirá la ventana Seleccionar objeto de datos de página.
  8. Pulse update_record (Service Data Object) > update_record (ADS) > IMAGETYPE (String).
  9. Pulse Aceptar ahora, la página muestra la fotografía actual para el anuncio clasificado, si la tuviera. La página debería tener el aspecto siguiente:
    Aspecto actual de la página.

Añada el componente de subida de archivos a la página

A continuación, añada una fila nueva al final de la tabla para incorporar ahí el componente para Subida de archivo
  1. Pulse la última fila para situar el cursor en ella.
  2. En la barra de menús, pulse Tabla > Añadir fila debajo.
  3. En la primera celda del fila nueva, entre Fotografía nueva: como etiqueta.
  4. Arrastre un componente Subir archivo del cajón Componentes Faces ampliados de la paleta a la última celda de la fila nueva.
  5. De la misma forma que enlazamos el componente imagen, enlace el componente Subir archivo a la columna PHOTO del registro relacional update_record. En el campo de texto se muestra {PHOTO} para indicar que este componente está enlazado a la columna PHOTO y que el archivo subido se colocará en dicha columna. La página debería tener el aspecto siguiente:
    Aspecto actual de la página.
  6. Guarde la página y, si quiere ver el resultado, pruébela.

Punto de comprobación de lección

Ha terminado la Lección 2.2. En esta lección ha aprendido a manipular la tabla de la página de actualización, a añadir una foto actual a la tabla y a añadir un componente de subida a la tabla.
< Anterior | Siguiente >
Comentarios