Esercizio 2.3: Utilizzo del componente per il caricamento dei file

Prima di iniziare, è necessario completare l'Esercizio 2.2: Formattazione di una tabella dati.

Ora che si sta visualizzando la colonna PHOTO, è necessario fornire all'utente gli strumenti per caricare le immagini per gli annunci. Questa funzione è particolarmente importante per le pagine new_record.jsp e update_record.jsp. Il componente per il caricamento dei file consente agli utenti di esaminare il loro file system, di caricare un file nel database e di visualizzarlo immediatamente nel database.

Poiché la procedura di utilizzo di questo componente è simile sia per quanto concerne la creazione che l'aggiornamento, in questo esercizio la pagina di aggiornamento modificherà l'immagine corrente per ciascun articolo. Se si desidera, è possibile apportare le medesime modifiche anche alla pagina del nuovo record.

Aggiunta della foto corrente alla pagina

Mostra

Si noterà che il modulo di aggiornamento non è altro che una tabella HTML che contiene del testo statico e alcuni componenti di input associati alle colonne nel record relazionale update_record. Pertanto, è possibile aggiungere righe e colonne per modificare il modulo, proprio come se fosse una normale tabella HTML. Nella procedura riportata di seguito, verrà aggiunta una nuova riga per visualizzare la foto corrente.

L'aggiunta di righe e colonne risulta più complicata in una tabella dati che visualizza un elenco record relazionali. Per informazioni sull'aggiunta di colonne a una tabella dati, fare riferimento alla sezione Modifica della tabella predefinita nell'Esercizio 1.2: Utilizzo dei componenti elenco record relazionali e tabella dati.

  1. Fare doppio clic sulla pagina update_record.jsp nella vista Esplora progetti.
  2. Posizionare il cursore nella prima cella della tabella (in alto a sinistra). Questa cella presenta l'etichetta ID.
  3. Dalla barra dei menu, fare clic su Tabella > Aggiungi riga > Aggiungi sopra per creare una nuova riga nella parte alta della tabella, che conterrà la foto corrente per il record.
  4. Nella cella all'estrema sinistra di questa nuova riga, immettere Current photo: come etichetta.
  5. Trascinare un componente Immagine dal cassetto dei componenti Faces della Tavolozza nella cella all'estrema destra della nuova riga.

    A differenza dell'esercizio precedente, si farà in modo che l'utente possa visualizzare l'intera foto, quindi non modificare la larghezza e l'altezza nella vista Proprietà.

  6. Associare il componente immagine alla colonna PHOTO di update_record trascinando la colonna PHOTO dalla vista Dati di pagina nel nuovo componente immagine. Il componente immagine è ora associato alla colonna PHOTO del database.
  7. Nella vista Proprietà, fare clic sul pulsante Seleziona oggetto dati pagina accanto al campo Tipo. Si apre la finestra Selezione oggetto dati pagina.
  8. Fare clic sul simbolo + per espandere il record relazionale update_record.
  9. Fare clic su IMAGETYPE (String).
  10. Fare clic su OK.

    A questo punto, la pagina visualizza, se presente, la foto corrente per l'annuncio economico. La pagina dovrebbe essere simile a quella riportata nell'immagine seguente:

    Aspetto corrente della pagina

Aggiunta del componente per il caricamento dei file alla pagina

Mostra

Successivamente, occorre aggiungere alla tabella una nuova riga che contenga il componente per il caricamento dei file.

  1. Posizionare il cursore nell'ultima riga facendo clic all'interno della cella che contiene il testo Phone:.
  2. Dalla barra dei menu, fare clic su Tabella > Aggiungi riga > Aggiungi sopra.
  3. Nella prima cella della nuova riga, immettere New photo: come etichetta.
  4. Trascinare un componente Caricamento file dal cassetto dei componenti Faces della Tavolozza nell'ultima cella della nuova riga.
  5. Allo stesso modo del componente immagine, associare il componente per il caricamento dei file alla colonna PHOTO del record relazionale update_record. {PHOTO} viene visualizzato nel campo di testo per confermare che questo componente è associato alla colonna PHOTO e che il file caricato verrà inserito in questa colonna.

    La pagina dovrebbe essere simile a quella riportata nell'immagine seguente:

    Aspetto corrente della pagina

  6. Salvare la pagina e, se si desidera, verificarne il funzionamento.

A questo punto è possibile iniziare l'Esercizio 2.4: Utilizzo delle regole di navigazione.

Feedback
(C) Copyright IBM Corporation 2000, 2005. Tutti i diritti riservati.