Visualizzazione delle informazioni dinamiche sulle pagine Web con JavaServer Faces > Modulo 2: Aggiunta di funzioni avanzate >
< Indietro | Avanti >

Lezione 2.2: Utilizzo del componente di aggiornamento file

Utilizzare questa lezione per imparare come dare agli utenti l'abilità di caricare le immagini per gli annunci pubblicitarie classificate. Questa funzione è particolarmente importante nelle pagine new_record.jsp e update_record.jsp. Il componente di caricamento file consente agli utenti di sfogliare il proprio file system, caricare un file nel database e visualizzare immediatamente questo file nel database.

Poiché la procedura per l'utilizzo del componente di caricamento file è simile sia nel caso di creazione che di aggiornamento, questo esercizio consentirà di aggiornare una pagina per modificare l'immagine corrente per qualunque elenco. È possibile eventualmente apportare le stesse modifiche alla nuova pagina di record una volta terminato l'aggiornamento della pagina.

Aggiunta della foto corrente alla pagina

Come si vedrà, il modulo di aggiornamento non è altro che una tabella HTML con testo statico e i componenti di input uniti in colonne nel record relazionale update_record. È possibile aggiungere righe e colonne per modificare il modulo agendo esclusivamente su una qualunque tabella HTML. Nelle seguenti operazioni, verrà aggiunta una nuova riga per visualizzare la foto corrente.

L'aggiunta di righe e colonne è più complessa in una tabella dati che visualizza un elenco di record relazionali. Per informazioni sull'aggiunta di colonne a una tabella dati, fare riferimento a Lezione 1.2: Connessione a un database e visualizzazione dei dati su una pagina Web.

  1. Nella vista Esplora progetti fare doppio clic sulla pagina update_record.jsp.
  2. Collocare il cursore sulla prima cella (in alto a sinistra) della tabella. L'etichetta di questa cella è ID.
  3. Dal menu principale, fare clic su Tabella > Specifica e aggiungi. Viene aperta la finestra Aggiungi righe o colonne. Fare clic su Righe quindi Sopra la cella selezionata. Questo crea una nuova riga nella parte superiore della tabella che contiene la foto corrente per il record. Scegliere OK.
  4. Nella cella sinistra di questa riga, immettere Foto attuale: come etichetta.
  5. Trascinare un componente Immagine dal cassetto dei componenti Faces della tavolozza alla cella più a destra della nuova riga. Diversamente dall'esercizio precedente, all'utente sarà consentito di visualizzare l'intera immagine senza vincolarne le dimensioni, pertanto non modificare la larghezza e l'altezza nella vista Proprietà.
  6. Collegare il componente immagine alla colonna PHOTO di update_record trascinando la colonna PHOTO dalla vista Pagina di dati al nuovo componente immagine. Il componente immagine risulta collegato alla colonna PHOTO del database.
  7. Con l'immagine grafica ancora selezionata, fare clic sulla vista Proprietà e quindi sul pulsante Selezione oggetto dati pagina accanto al campo Tipo. Viene aperta la finestra Selezione oggetto dati pagina.
  8. Fare clic su update_record (Service Data Object) > update_record (ADS) > IMAGETYPE (String).
  9. Fare clic su OK. A questo punto, nella pagina viene visualizzata, se esiste, la foto corrente per l'annuncio pubblicitario classificato. L'aspetto della pagina appare simile al seguente:
    Aspetto della pagina corrente.

Aggiunta del componente di aggiornamento file alla pagina

Aggiungere ora una nuova riga nella parte inferiore della tabella per immettervi il componente di caricamento file.
  1. Collocare il cursore nell'ultima riga facendo clic su questa.
  2. Dalla barra dei menu, fare clic su Tabella > Aggiungi riga sotto.
  3. Nella prima cella della nuova riga immettere Nuova foto: come etichetta.
  4. Trascinare un componente Caricamento file dal cassetto Componenti Faces avanzati della tavolozza all'ultima cella della nuova riga.
  5. Come per il componente immagine, associare il componente di caricamento file alla colonna PHOTO del record relazionale update_record. {PHOTO} viene visualizzato nel campo di testo per indicare che questo componente è associato alla colonna PHOTO e il file caricato verrà collocato in tale colonna. L'aspetto della pagina appare simile al seguente:
    Aspetto della pagina corrente.
  6. Salvare la pagina ed eventualmente verificarla.

Riepilogo di controllo della lezione

La lezione 2.2 è terminata. In questa lezione si è appreso come manipolare la tabella sulla pagina di aggiornamento, aggiungere una foto corrente alla tabella e aggiungere un componente di caricamento file alla tabella.

< Indietro | Avanti >