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.
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.
È 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.
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.
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.
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.
La pagina dovrebbe essere simile a quella riportata nella seguente immagine:
I dati verranno ordinati per categoria. È possibile ordinarli in base a una qualsiasi colonna all'interno del database.
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.
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.
È possibile provare stili di pager e il componente statistiche di pagina per trovare la soluzione più adatta per la pagina.
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.
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.
La pagina dovrebbe essere simile a quella riportata di seguito:
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.
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.
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.
Il modo migliore per eseguire questa operazione, è fare clic sull'icona del collegamento , tenere premuto il pulsante, 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.
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.
La pagina dovrebbe essere simile a quella riportata nella seguente immagine:
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.
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.
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:
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.