< Indietro | Avanti >

Lezione 2.2: Utilizzo del componente di caricamento file

Questa lezione illustra come fornire agli utenti la capacità di caricare immagini per gli annunci pubblicitari. 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 questo file nel database immediatamente.

Poiché la procedura per l'utilizzo di un componente di caricamento file è simile nei casi di creazione e aggiornamento, questo esercizio consente di modificare, mediante la pagina di aggiornamento, l'immagine corrente di qualsiasi elenco. Se si desidera, è possibile apportare le stesse modifiche alla pagina del nuovo record una volta completata la procedura con la pagina di aggiornamento.

Aggiunta della foto corrente alla pagina

Il modulo di aggiornamento non è altro che una tabella HTML con testo statico e componenti di input collegati alle colonne del record relazionale update_record. Con questo presupposto, è possibile aggiungere righe e colonne per modificare il modulo, come se si modificasse una tabella HTML. Nella procedura di seguito riportata, verrà aggiunta una nuova riga per visualizzare la foto corrente.

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

  1. Fare doppio clic sulla pagina update_record.jsp nella vista Esplora enterprise.
  2. Posizionare il cursore nella prima cella (in alto a sinistra) della tabella. Questa cella è etichettata Id.
  3. Dal menu principale, fare clic su Tabella > Specifica e aggiungi. Viene visualizzata la finestra di dialogo Aggiunta di righe o colonne. Fare clic su Righe, quindi su Sopra la cella selezionata. Nella parte superiore della tabella verrà creata una nuova riga, contenente la foto corrente del record. Fare clic su OK.
  4. Nella cella a sinistra della nuova riga, immettere Foto corrente: per utilizzare la foto come un'etichetta.
  5. Trascinare un componente Immagine dal cassetto Componenti Faces della Tavolozza nella cella all'estrema destra della nuova riga. A differenza dell'esercizio precedente, verrà consentito all'utente di visualizzare l'immagine completa senza limitare le dimensioni, quindi non modificare la larghezza e l'altezza nella vista Proprietà.
  6. Eseguire il bind del componente immagine alla colonna PHOTO di update_record, trascinando la colonna PHOTO dalla vista Dati di pagina al nuovo componente immagine. Il componente immagine viene ora collegato alla colonna PHOTO del database.
  7. Con l'immagine grafica ancora selezionata, andare alla vista Proprietà e fare clic sul pulsante Seleziona oggetto dati di pagina accanto al campo Tipo. Viene visualizzata la finestra Selezione oggetto dati di pagina.
  8. Fare clic su update_record (Service Data Object) > update_record (ADS) > IMAGETYPE (String).
  9. Fare clic su OK. Nella pagina viene ora visualizzata la foto corrente per l'annuncio pubblicitario, se esistente. La pagina dovrebbe essere simile alla seguente:
    Aspetto della pagina corrente.

Aggiunta del componente di aggiornamento file alla pagina

Aggiungere una nuova riga nella parte inferiore della tabella per inserire il componente di aggiornamento file.
  1. Inserire il cursore nell'ultima riga, facendo clic sulla riga stessa.
  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 nell'ultima cella della nuova riga.
  5. Nello stesso modo in cui è stato eseguito il bind del componente immagine, eseguire il bind del componente di aggiornamento file alla colonna PHOTO del record relazionale update_record. {PHOTO} viene visualizzato nel campo di testo, il che dimostra che è stato eseguito il bind di questo componente alla colonna PHOTO e che il file aggiornato verrà inserito in quella colonna. La pagina dovrebbe essere simile alla seguente:
    Aspetto della pagina corrente.
  6. Salvare la pagina e testarla, se si desidera.

Punto di controllo della lezione

La lezione 2.2 è stata completata. In questa lezione è stato illustrato come modificare la tabella nella pagina di aggiornamento, aggiungere alla tabella una foto corrente e aggiungere alla tabella un componente di caricamento file.
Feedback
< Indietro | Avanti >