Esercizio 2.2: Formattazione di una tabella dati

Prima di procedere con la formattazione di una tabella dati, è necessario completare il Modulo 1: Creazione di pagine Web con connessioni di dati o Esercizio 2.1: Importazione delle risorse necessarie.

La tabella dati nella pagina all_records.jsp presenta un aspetto molto pratico. Visualizza tutti i record del database e i collegamenti alle altre pagine così come dovrebbe, ma da un punto di vista estetico non è molto gradevole. In questo esercizio verranno apportati miglioramenti alla tabella dati aggiungendo elementi come il pager, le regole di stile e le immagini degli articoli in vendita.

Ridenominazione delle intestazioni di colonna

Mostra

In molti casi, non si desidera che le intestazioni di colonna della tabella dati corrispondano esattamente al nome delle colonne nel database. La procedura riportata di seguito illustra come ridenominare le intestazioni di colonne della tabella dati.

  1. Fare doppio clic sulla pagina all_records.jsp nella vista Esplora progetti.
  2. Fare clic sull'intestazione di colonna Maincategory nella tabella dati.
  3. Nella vista Proprietà, modificare il campo di testo Valore da Maincategory a Category.
  4. Se si desidera, ridenominare le altre colonne.
  5. Salvare la pagina.

Formattazione dei componenti output JSF

Mostra

È anche possibile formattare i componenti output. In questa procedura il componente output {PRICE} verrà formattato per essere visualizzato come valore valuta anziché come numero ordinario.

  1. Fare clic sul componente output {PRICE} nella pagina.
  2. Nella vista Proprietà, modificare il Tipo da Decimale a Valuta.
  3. A questo punto, il prezzo di ciascun articolo verrà visualizzato con la valuta, anziché come numero ordinario.

    Altri stili e formati sono disponibili per i vari tipi di dati come, ad esempio, le percentuali, le date e le ore. È anche possibile personalizzare il formato di un componente output perché visualizzi un tipo di dati non elencato nella vista Proprietà come, ad esempio, un numero di telefono.

  4. Salvare la pagina.

Ordinamento dei dati

Mostra

I dati visualizzati non hanno alcun ordine. Per fornire agli utenti un elenco di annunci più organizzato, ordinare l'elenco per categoria, così da raggruppare articoli simili.

  1. Fare clic con il tasto destro del mouse su all_recordlist (ADS) nella vista Dati di pagina e fare clic su Configura dal menu di scelta rapida. Si apre la finestra Configurazione elenco dati.

    Se viene visualizzato un messaggio di avviso in cui si comunica che non è possibile stabilire una connessione al database, è possibile che il server di verifica non sia stato arrestato dopo aver eseguito la verifica del sito Web. In tal caso, fare clic su annulla in ciascuna finestra di dialogo e arrestare il server come descritto nella sezione Arresto del server nell'Esercizio 1.3: Verifica del sito Web.

  2. Nella scheda Condizioni di questa finestra, fare clic sul Ordina per.
  3. Nel riquadro Colonne disponibili, fare clic su MAINCATEGORY.
  4. Fare clic sul pulsante > per spostare la colonna MAINCATEGORY nel riquadro Ordina per.

    La pagina dovrebbe essere simile a quella riportata nella seguente immagine:

    Finestra Configurazione elenco dati

  5. Fare clic su Chiudi per applicare le modifiche apportate.

    I dati verranno ordinati per categoria. È possibile ordinarli in base a una qualsiasi colonna all'interno del database.

Aggiunta di un pager

Mostra

Anziché visualizzare ciascun record contemporaneamente nella tabella dati, è possibile utilizzare un pager. Un pager suddivide automaticamente i record in pagine dalle dimensioni impostate senza creare nuovi file JSP nel progetto.

  1. Fare clic in un punto qualsiasi all'interno della tabella dati.
  2. Nella vista Proprietà, fare clic su h:dataTable dall'elenco dei tag HTML sulla sinistra della vista.
  3. Nella vista Proprietà, fare clic su Opzioni di visualizzazione dall'elenco di tag sulla sinistra.
  4. Nel campo Righe per pagina, immettere 5.
  5. Fare clic su Aggiungi su un pager Stile Web. Un'immagine del pager viene visualizzata nella parte inferiore della tabella dati.

    La visualizzazione del pager in Page Designer è un'immagine di segnaposto e non riflette il numero di pagine effettivo che verrà visualizzato, in quanto questo potrà essere determinato solo quando la pagina viene caricata in un browser.

  6. Salvare la pagina.

    È possibile provare stili di pager e il componente statistiche di pagina per trovare la soluzione più adatta per la pagina.

Layout dei componenti in una casella di gruppo sotto forma di elenco

Mostra

Anziché disporre di esattamente un solo componente output in ciascuna colonna della tabella dati, è possibile combinare gli elementi all'interno delle colonne per produrre un layout migliore. Verrà utilizzata una casella di gruppo per organizzare i componenti come se si utilizzasse una tabella HTML nascosta. In particolare, dopo aver aggiunto il componente immagine per migliorare il sito da un punto visivo, tutte le informazioni di testo e inserirle in una singola colonna di tabella dati, che successivamente verrà chiamata DETAILS.

  1. Trascinare un componente Pannello - casella di gruppo dal cassetto dei componenti Faces della Tavolozza nella colonna TITLE della tabella dati. Si apre la finestra Selezione tipo.
  2. Scegliere Elenco come tipo di casella di controllo nella finestra Selezione tipo e fare clic su OK.

    Una casella di gruppo elenco dispone i componenti che si trovano al suo interno in un'unica colonna o riga, che può essere orientate in senso verticale od orizzontale.

  3. Fare clic sulla casella di gruppo per selezionarlo.
  4. Utilizzando la vista Proprietà, modificare l'orientamento in Verticale.
  5. Trascinare il componente {TITLE} nella casella di gruppo elenco. Il testo di istruzioni nella casella di gruppo scompare subito dopo aver aggiunto il componente.
  6. Trascinare un componente Immagine dal cassetto dei componenti Faces della Tavolozza nella casella di gruppo elenco. Rilasciare il componente immagine sul bordo inferiore della casella di gruppo per assicurarsi che l'immagine verrà posizionata sotto il titolo.
  7. Fare clic sul componente immagine appena aggiunto.
  8. Utilizzare l'area Dimensione della vista Proprietà per impostare la larghezza su 60 pixel e l'altezza su 50 pixel. In tal modo, indipendentemente dalle dimensioni delle immagini specificate nel database, nella pagina verranno visualizzate sempre con dimensioni 60x50.
  9. Associare il componente immagine alla colonna PHOTO di all_recordlist trascinando la colonna PHOTO dalla vista Dati di pagina nel componente immagine. In tal modo, il componente immagine visualizzerà i dati immagine che si trovano nella colonna PHOTO di ciascun record.
  10. Nella scheda Di base della vista Proprietà, fare clic sul pulsante Seleziona oggetto dati pagina Select Page Data Object button accanto al campo Tipo. Si apre la finestra Selezione oggetto dati pagina.
  11. Fare clic sul simbolo + per espandere l'elenco record relazionali all_recordlist.
  12. Fare clic su IMAGETYPE (String).
  13. Fare clic su OK.
  14. Salvare la pagina.

    La pagina dovrebbe essere simile a quella riportata di seguito:

    Aspetto corrente della pagina

Layout dei componenti in casella di gruppo sotto forma di griglia

Mostra

Una casella di gruppo può organizzare i componenti anche nel formato di una tabella. Una casella di gruppo di tipo elenco può solo avere una riga oppure una colonna, mentre una di tipo griglia può contenere numerose righe e colonne. Nella procedura riportata di seguito, i componenti {PRICE} e {PHONE} verranno spostati nella colonna DESCRIPTION della tabella dati e verranno assegnate loro delle etichette.

  1. Trascinare un componente Pannello - casella di gruppo dal cassetto dei componenti Faces della Tavolozza Palette nella colonna DESCRIPTION della tabella dati. Si apre la finestra Selezione tipo.
  2. Fare clic su Griglia come tipo di componente da aggiungere e fare clic su OK.
  3. Fare clic sulla nuova casella di gruppo griglia.
  4. Utilizzare la vista Proprietà per impostare il numero di colonne della casella di gruppo su 2.
  5. Rilasciare un componente di Output dal cassetto dei componenti Faces della Tavolozza nella casella di gruppo griglia.

    Questo componente output sarà l'etichetta per la descrizione dell'articolo in vendita. Ciascun componente output avrà un'etichetta come questa nella cella di sinistra della tabella.

  6. Fare clic sul componente Output (viene visualizzato in Page Designer come outputText) e utilizzare la vista Proprietà per assegnargli un Valore di Description:.
  7. Trascinare il componente {DESCRIPTION} esistente della pagina sul bordo inferiore della casella di gruppo griglia.

    In caso di difficoltà nel trascinare i componenti nel punto giusto all'interno della casella di gruppo, provare a tenere premuto il tasto del mouse e a controllare il cursore. La posizione del cursore all'interno della casella di gruppo indica il punto in cui verrà visualizzato i componente quando si rilascerà il tasto del mouse. Per questo esercizio, rilasciare il tasto del mouse quando il cursore si trova alla destra del componente precedente.

  8. Trascinare un altro componente Output dalla Tavolozza e rilasciarlo alla destra della casella di gruppo.
  9. Utilizzare la vista Proprietà per assegnargli un Valore di Price:.
  10. Trascinare il componente output esistente {PRICE} alla destra del testo di output Price.
  11. Allo stesso modo, trascinare un nuovo componente Output per l'etichetta per il componente {PHONE} e assegnargli l'etichetta Phone:.
  12. Trascinare il componente {PHONE} esistente nella casella di gruppo griglia alla destra del testo di output Phone. La pagina dovrebbe essere simile a quella riportata nella seguente immagine:

    Aspetto corrente della pagina

  13. Trascinare il collegamento esistente Update Listing e trascinarlo nella colonna DESCRIPTION, ma non all'interno della casella di gruppo griglia.

    Il modo migliore per eseguire questa operazione, è fare clic sull'icona del collegamento Icona collegamento quindi trascinarla direttamente nella casella di gruppo griglia. In tal modo, sia l'etichetta di testo che l'icona si sposteranno, mantenendo funzionale il collegamento. Se solo il collegamento o il testo si sposta, il collegamento non funzionerà più. In tal caso, fare clic su Modifica > Annulla dalla barra dei menu e provare di nuovo.

  14. Eliminare le colonne vuote PRICE, PHONE e UPDATE dalla tabella dati.

    Per eliminare una colonna, fare clic sulla colonna e aprire la vista Proprietà. Quindi, fare clic su h:dataTable dall'elenco dei tag HTML sulla sinistra della vista, selezionare la colonna che si desidera eliminare dall'elenco sulla destra della vista e fare clic su Rimuovi.

  15. Fare clic sull'intestazione della colonna Description e utilizzare la vista Proprietà per modificarne il campo Valore in Details.

    La pagina dovrebbe essere simile a quella riportata nella seguente immagine:

    Aspetto corrente della pagina

  16. Salvare la pagina.

Applicazione delle regole foglio di stile

Mostra

I fogli di stile CSS (Cascading Style Sheets) non solo rappresentano il modo migliore per controllare l'aspetto di un sito Web, ma sono utili anche per gestire l'aspetto dei singoli componenti JavaServer Faces. Nella sezione successiva, verrà utilizzato il file CSS fornito nel progetto per modificare l'aspetto di questa pagina. In particolare, verrà applicata una regola alle intestazioni di colonna e verranno applicate due regole alle righe per creare un effetto colore alternato che distinguerà ogni singola riga nella tabella dati.

  1. Selezionare la tabella dati facendo clic su una delle intestazioni di colonna.
  2. Nella vista Proprietà, fare clic su h:dataTable.
  3. Fare clic sul pulsante Tutti gli attributi in alto a destra nella vista Proprietà.
  4. In Nome attributo, fare clic sulla voce headerClass. Questa impostazione controlla l'aspetto della riga intestazione della tabella dati.
  5. Quindi, fare clic sul pulsante Seleziona classe visualizzato nel campo Valore da headerClass.

    Si apre la finestra Selezione classe, che visualizza tutti gli stili disponibili nei fogli di stile presenti nel progetto. Al momento, in questo progetto c'è solo un foglio di stile.

  6. Espandere il foglio di stile e fare clic su.columnHeaderClass.
  7. Fare clic su OK.

    Finestra Selezione classe

  8. Successivamente, fare clic sulla voce rowClasses in Nome attributo, quindi sul pulsante Seleziona classi nel campo Valore per aprire di nuovo la finestra Selezione classi. L'opzione rowClasses controlla in modo in cui le righe della tabella dati verranno visualizzate.
  9. Espandere il foglio di stile e, questa volta, scegliere entrambe le regole .rowClass1 e .rowClass2 tenendo premuto il tasto Ctrl durante la selezione. Queste due regole presentano schemi di colori differenti e selezionandole entrambe si otterrà i colori delle righe alternati.
  10. Fare clic su OK.
  11. Infine, salvare la pagina ed eseguirla sul server di verifica.

    Se non si ha familiarità con le applicazioni in esecuzione sul server, fare riferimento all'Esercizio 1.3: Verifica del sito Web.

    Quando si esegue la verifica della pagina, quest'ultima dovrebbe apparire come riportato nella seguente immagine:

    Aspetto corrente della pagina

In questo esercizio sono stati svelati alcuni trucchi che è possibile utilizzare per rendere più complessa una semplice tabella dati.

A questo punto è possibile iniziare l'Esercizio 2.3: Utilizzo del componente per il caricamento dei file.

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