Ejercicio 2.3: Uso del componente subida de archivos

Antes de comenzar, debe haber completado el Ejercicio 2.2: Dar formato a una tabla de datos.

Ahora que se visualiza la columna PHOTO, debe proporcionar a los usuarios la posibilidad de subir archivos de imagen 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 fotografía actual a la página

Mostrar

Se habrá fijado que el formulario de actualizaciones no es más que una tabla HTML con texto estático y algunos 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. Hallará información sobre la adición de columnas a tablas de datos en Ajuste de la tabla de datos por omisión en el Ejercicio 1.2: Trabajar con los componentes Lista de registros relacionales y Tabla de datos.

  1. Realice una doble pulsación sobre la página update_record.jsp en la vista Explorador de proyectos.
  2. Coloque el cursor en la primera celda de la tabla (arriba a la izquierda). La etiqueta de esta celda es ID.
  3. En la barra de menús, pulse Tabla > Añadir fila > Añadir arriba para crear una nueva fila en la primera posición de la tabla que contendrá la fotografía del registro.
  4. En la celda más a la izquierda de esta fila nueva, entre Fotografía actual: a modo de etiqueta.
  5. Arrastre un componente Imagen de la bandeja 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. En la vista Propiedades, pulse el botón Seleccionar objeto de datos de página que está junto al campo Type. Se abrirá la ventana Seleccionar objeto de datos de página.
  8. Pulse el símbolo + para expandir el registro relacional update_record.
  9. Pulse IMAGETYPE (String).
  10. Pulse Aceptar.

    Ahora, la página muestra la fotografía actual para el anuncio clasificado, si la tuviera. La página debería ser algo como:

    Aspecto de la página actual

Añadir el componente Subir archivo a la página

Mostrar

A continuación, añada una fila nueva al final de la tabla para incorporar ahí el componente para Subida de archivo

  1. Coloque el cursor en la última fila, pulsando en la celda que contiene el texto Teléfono: (Phone:).
  2. En la barra de menús, pulse Tabla > Añadir fila > Añadir después.
  3. En la primera celda del fila nueva, entre Fotografía nueva: como etiqueta.
  4. Arrastre un componente Subir archivo de la bandeja Componentes Faces 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 ser algo como:

    Aspecto de la página actual

  6. Guarde la página y, si quiere ver el resultado, pruébela.

Puede comenzar el Ejercicio 2.4: Uso de reglas de navegación.

Comentarios
(C) Copyright IBM Corporation 2000, 2005. Reservados todos los derechos.