Esercizio 1.2: Utilizzo dei componenti elenco record relazionali e tabella dati

Prima di iniziare, è necessario completare l'Esercizio 1.1: Importazione delle risorse necessarie.

Il sito Web di esempio utilizza pagine Web dinamiche per accedere alle origini dati, come i database, e visualizzare informazioni nella pagina da queste origini dati. In questo esercizio la pagina all_records.jsp verrà configurata perché visualizzi tutti gli annunci economici presenti nel database. Negli esercizi successivi, anche le altre pagine verranno collegate al database: in tal modo, sarà possibile creare nuovi annunci economici, modificare quelli vecchi e visualizzare un elenco di annunci filtrato.

In questa esercitazione verranno utilizzati due componenti che collegano le pagine ai database utilizzando Java Server Faces: record relazionali ed elenchi record relazionali. Questi componenti rappresentano i dati di un database: in tal modo, i dati possono essere visualizzati nella pagina sotto forma di tabella dati o di una normale tabella HTML. Questi componenti utilizzano JavaBeans di accesso dati; Learn more about data access beans or Ulteriori informazioni sui componenti JavaServer Faces e Faces.

Creazione di un nuovo elenco record relazionali

Mostra

Verrà creato un elenco record relazionali per rappresentare tutti gli annunci economici presenti nel database. Successivamente, verrà eseguita una connessione al database e verrà selezionata la tabella che contiene le informazioni necessarie nell'elenco record relazionali. Infine, questo elenco record relazionali verrà visualizzato nella pagina di una tabella dati.

  1. Nella vista Esplora progetti, espandere Progetti Web dinamici > ClassifiedsTutorial > WebContent.
  2. Nella cartella WebContent, fare doppio clic su all_records.jsp. Il file all_records.jsp viene aperto nell'editor.
  3. Eliminare il testo predefinito Place content here.
  4. Nella vista Tavolozza, fare clic sul cassetto Dati per espanderlo.
  5. Trascinare il componente Elenco record relazionali dalla vista Tavolozza nell'area di contenuto vuota.

    È anche possibile che venga richiesto di salvare il file all_records.jsp. In tal caso, fare clic su OK.

    Si apre la finestra Aggiunta elenco record relazionali.

  6. Nel campo Nome, immettere all_recordlist.

    I nomi degli elenchi record relazionali e dei record relazionali devono rispettare convenzioni di denominazione standard Java adottate per i nomi delle variabili: ad esempio, non possono contenere spazi.

  7. Assicurarsi che la casella Aggiungi controlli per i dati sia selezionata.

    Se questa casella di controllo è selezionata, la procedura guidata crea una tabella dati per visualizzare l'elenco record nella pagina. In caso contrario, la procedura di controllo crea solo l'elenco di record e nessuna rappresentazione dei dati nella pagina. Per ora, la procedura guidata creerà la tabella di dati predefinita, che verrà personalizzata in un secondo momento. La finestra Aggiunta elenco record relazionali dovrebbe essere simile alla finestra riportata nella seguente immagine:

    Finestra Aggiunta elenco record relazionali

  8. Fare clic su Avanti.
  9. Nel campo Nome connessione, fare clic su Nuovo per creare una nuova connessione di database.

    Viene visualizzata la finestra di dialogo Nuova connessione. Notare che il campo Nome connessione viene automaticamente compilato con il nome ClassifiedsTutorial_Con1.

  10. Fare clic su Crea nuova connessione DB. Viene visualizzata la finestra Nuova connessione al database.
  11. Fare clic su Avanti.

Specifica delle informazioni di connessione al database

Mostra

È necessario indicare al record dove trovare i dati che deve rappresentare. A tale scopo, utilizzare la finestra Nuova connessione al database. In questo caso, verrà specificato il database Cloudscape che si trovava nel file importato nel corso dell'Esercizio 1.1. Una volta creata, questa connessione verrà utilizzata per l'intero sito Web: pertanto, verrà creata solo una volta, in questo esercizio.

  1. Nella finestra Nuova connessione al database, sotto Selezionare un gestore database, espandere Cloudscape e fare clic su V5.1.
  2. Fare clic sul pulsante Sfoglia. Si tratta del pulsante Sfoglia che si trova accanto a Percorso del database. Si apre la finestra Ricerca cartelle.
  3. Sotto Selezionare una directory del database, selezionare la seguente directory: <cartella-spazio di lavoro>\ClassifiedsTutorial\WebContent\cloudscapesampledata\database, dove <cartella-spazio di lavoro> è la cartella in cui si trova la directory contenente lo spazio di lavoro utilizzato al momento.
  4. Fare clic sulla cartella database, quindi su OK.
  5. Non è necessario aggiungere un ID o una password utente per accedere al database. La finestra Nuova connessione al database dovrebbe essere simile a quella riportata nella seguente immagine:

    Finestra Nuova connessione al database
  6. Fare clic su Fine. Si ritornerà alla finestra Nuova connessione.
  7. Nella finestra Nuova connessione, fare clic su Fine. Si ritornerà alla finestra Aggiunta elenco record relazionali.
  8. Dopo aver creato una connessione al database Cloudscape, occorre scegliere una tabella oppure un elenco di record da rappresentare. La finestra Aggiunta elenco record relazionali visualizza le tabelle del database. In massima parte, in questa esercitazione verrà utilizzata la tabella W5SAMPLE.ADS.

  9. Fare clic sulla tabella W5SAMPLE.ADS nel campo Tabella.

    Finestra Aggiunta elenco record relazionali

    Le restanti pagine della procedura guidata consentono di escludere le colonne dagli elenchi di record e di eseguire opzioni avanzate quali la definizione della chiave primaria, l'aggiunta di relazioni ad altre tabelle e la specifica dei filtri e delle condizioni di ordinamento. Ulteriori informazioni su queste pagine verranno fornite negli esercizi successivi.
  10. Fare clic su Fine.

Modifica della tabella dati predefinita

Mostra

La vista Dati di pagina visualizza un elenco di colonne della tabella ADS e il file all_records.jsp contiene la visualizzazione di questi dati all'interno di una tabella dati. Al momento, la tabella dati predefinita contiene troppe informazioni. Per questa esercitazione, è sufficiente visualizzare solo il titolo, la descrizione, la categoria, il prezzo e il numero di telefono per ciascun annuncio economico. Per modificare e riorganizzare la tabella dati, completare la seguente procedura:

  1. Fare clic in un punto qualsiasi all'interno della tabella dati.
  2. Aprire la vista Proprietà.

    Di solito, la vista Proprietà si trova in basso al centro del workbench. Se non è possibile trovare la vista Proprietà, dalla barra dei menu fare clic su Finestra > Mostra vista > Proprietà.

  3. Nella vista Proprietà, fare clic su h:dataTable dall'elenco dei tag HTML sulla sinistra.
  4. Sulla destra, fare clic sulla colonna ID sotto Etichetta, quindi fare clic su Rimuovi. La colonna ID viene rimossa dalla tabella dati.
  5. Ripetere questo processo per rimuovere dalla tabella tutte le colonne, ad eccezione di quelle elencate di seguito: TITLE, DESCRIPTION, MAINCATEGORY, PRICE e PHONE. La vista Proprietà dovrebbe essere simile a quella riportata di seguito:

    Vista Proprietà

    La pagina dovrebbe essere simile a quella riportata di seguito:

    Aspetto corrente della pagina

    L'ordine delle colonne non è quello appropriato per un annuncio economico. Il seguente ordine è quello più corretto:

    1. TITLE
    2. DESCRIPTION
    3. MAINCATEGORY
    4. PRICE
    5. PHONE
  6. Per riordinare le colonne, ritornare all'elenco delle colonne nella vista Proprietà. Fare clic sull'etichetta TITLE e fare clic su Sposta su fino a quando TITLE non compare all'inizio dell'elenco. La colonna TITLE è ora la prima colonna della tabella dati.
  7. Nello stesso modo, selezionare le altre colonne una per volta e riposizionarle. La sezione Colonne della vista Proprietà dovrebbe essere simile a quella riportata nella seguente immagine:

    Colonne nella vista Proprietà

  8. Salvare la pagina.

    Nel prossimo esercizio, Esercizio 1.3: Verifica del sito Web, sarà possibile verificare l'aspetto di questa pagina su un server Web vero e proprio.

    Ci sono molte opzioni per la formattazione delle tabelle dati e dei componenti JavaServer Faces. Alcune di queste opzioni vengono descritte nel modulo successivo, Modulo 2: Aggiunta di funzioni avanzate. È anche possibile esaminare nella vista Proprietà i vari componenti JavaServer Faces nella pagina (ad esempio, la tabella dati e i singoli componenti output).

A questo punto è possibile iniziare l'Esercizio 1.3: Verifica del sito Web.

Termini di utilizzo | Feedback
(C) Copyright IBM Corporation 2000, 2004. Tutti i diritti riservati.