Lezione 2.1: Formattazione di una tabella dati

Ridenominazione delle intestazioni di colonna

In molti casi, non si desidera che le intestazioni di colonna nella tabella di dati corrispondano esattamente ai nomi di colonna del database. Le seguenti operazioni mostrano come rinominare le intestazioni di colonna di una tabella.

Nella vista Esplora progetti fare doppio clic sulla pagina all_records.jsp
Fare clic sull'intestazione di colonna Maincategory nella tabella dati.
Nella vista Proprietà fare clic sulla scheda h:outputText e modificare il campo di testo Valore da Maincategory in Categoria.
Rinominare anche le altre colonne, se si desidera.
Salvare la pagina.

Formattazione dei componenti di output

È anche possibile formattare i componenti di output. Con questa procedura verrà formattato il componente di output {PRICE} in modo che appaia in valuta corrente invece che in valore numerico ordinario.

Fare clic sul componente di output {PRICE} sulla pagina.
Nella vista Proprietà, individuare l'elenco a discesa Tipo e selezionare Valuta. Il prezzo di ogni elemento verrà visualizzato in stile valuta anziché come valore numerico ordinario. Sono disponibili altri stili e formati per differenti tipi di dati, ad esempio percentuale, data e ora. È anche possibile personalizzare il formato di un componente di output per visualizzare un tipo di dati non elencato nella vista Proprietà, ad esempio un numero telefonico.
Salvare la pagina.

Ordinamento per data

Al momento, i dati non sono elencati in un particolare ordine. Per fornire agli utenti un elenco di annunci pubblicitari più organizzato, ordinare l'elenco di record per categoria in modo da raggruppare elementi simili.

Nella vista Dati di pagina (Finestra > Mostra vista > Dati pagina) fare doppio clic su all_recordlist (ADS) e quindi dal menu contestuale fare clic su Configura. Viene aperta la finestra Configurazione elenco record relazionali. Se viene visualizzato un messaggio di avviso indicante che non può essere stabilita una connessione al database, è stato lasciato il server in esecuzione dopo la verifica del sito Web. In tal caso, fare clic su annulla in tutte le finestre di dialogo e arrestare il server come spiegato nella sezione "Arresto del server" in Verifica del sito Web.
Selezionare Richiama record esistente o elenco di record dall'ambito e Riutilizzare definizione dei metadati da un record esistente o un elenco di record e quindi fare clic su Avanti.
Nella finestra successiva, fare clic per selezionare ADS, quindi fare clic su Avanti.
Sul lato destro della finestra successiva, fare clic su Ordina risultati. Si apre quindi la finestra Ordinamento.
Nel riquadro Colonne disponibili, fare clic su MAINCATEGORY.
Fare clic sul pulsante > per spostare la colonna MAINCATEGORY nel riquadro di ordinamento. La finestra appare simile alla seguente:
Fare clic su Chiudi per chiudere la finestra Ordinamento.
Fare clic su Fine per applicare le modifiche. I dati ora verranno ordinati per categoria. È possibile effettuare un ordinamento in base a qualunque colonna nel database.

Aggiunta di un pager

Invece di visualizzare tutti i record contemporaneamente nella tabella dati, è possibile utilizzare un pager. Un pager divide automaticamente i record in pagine di dimensioni definite creando nuovi file JSP nel progetto.

Fare clic in un punto qualunque nella tabella dati.
Nella vista Proprietà fare clic su h:dataTableEx dall'elenco di tag HTML nella parte sinistra della vista.
Fare clic sulla scheda Opzioni di visualizzazione in h:dataTableEx.
Nel campo Righe per pagina immettere 5.
Fare clic sul pulsante accanto ad Aggiungi un pager di stile Web. Nella parte inferiore della tabella dati viene visualizzata un'immagine di come apparirà il pager. La visualizzazione del pager in Page Designer è un'immagine segnaposto, che in realtà non riflette il numero di pagine che verranno visualizzate, perché ciò può essere stabilito solo quando le pagine vengono caricate in un browser.
Salvare la pagina. È possibile sperimentare diversi stili di pager e componenti di statistiche di pagina per trovare quello più adatto alla pagina.

Disposizione dei componenti in una casella di gruppo come elenco

Anziché avere un solo componente di output in ciascuna colonna della tabella di dati, è possibile raggruppare elementi nelle colonne per ottenere un layout più gradevole. Verrà utilizzata una casella di gruppo per disporre i componenti, come se si utilizzasse una tabella HTML nascosta. In particolare, dopo l'aggiunta del componente immagine per il miglioramento estetico del sito, la maggior parte delle informazioni testuali relative a ciascun annuncio pubblicitario verrà inserita in una sola colonna della tabella dati, che verrà quindi etichettata DETAILS.

Fare clic sul cassetto dei componenti Faces avanzati nella tavolozza per aprirlo. Trascinare un componente Pannello - Casella di gruppo nella colonna TITLE della tabella dati. Viene aperta la finestra Seleziona tipo.
Nella finestra Seleziona tipo scegliere Casella come tipo di casella di gruppo e fare clic su OK. Questa casella di gruppo dispone i componenti in essa collocati in una singola riga o colonna e può essere orientata orizzontalmente o verticalmente.
Fare clic sulla casella di gruppo per selezionarla.
Utilizzando la vista Proprietà, modificare l'Ordinamento in Verticale.
Trascinare il componente {TITLE} nella casella di gruppo elenco. Una volta aggiunto un componente, il testo delle istruzioni nella casella di gruppo scompare.
Trascinare un componente Immagine dal cassetto dei componenti Faces avanzati alla casella di gruppo elenco. Tale procedura facilita il rilascio del componente immagine nel lato inferiore della casella di gruppo, in modo da accertarsi che l'immagine sia collocata al di sotto del titolo.
Fare clic sul componente immagine appena aggiunto.
Utilizzare l'area Dimensione della vista Proprietà per impostare una Larghezza di 60 pixel e un'Altezza di 50 pixel. Ciò garantisce che a prescindere dalle dimensioni reali di un'immagine, sulla pagina essa apparirà in formato 60x50.
Collegare il componente immagine alla colonna PHOTO di all_recordlist trascinando la colonna PHOTO dalla vista Pagina di dati al componente immagine. In tal modo il componente immagine visualizzerà i dati immagine trovati nella colonna PHOTO di ciascun record. Se la colonna PHOTO (ByteArray) non viene elencata, nella vista Dati di pagina fare clic con il pulsante destro del mouse su all_recordlist (ADS) e selezionare Configura dal menu. Fare clic su OK per chiudere la finestra URL, se è stata aperta. Nella finestra Configurazione elenco record relazionali fare clic su Avanti. Selezionare ADS e fare clic su Avanti. Fare clic per selezionare la casella accanto a PHOTO (ByteArray) e quindi su Fine.
Fare clic sul grafico inserito. Nella scheda hx:graphicImageEx della vista Proprietà, fare clic sul pulsante Selezione oggetto dei dati pagina accanto al campo Tipo. Viene aperta la finestra Selezione oggetto dati pagina.
Fare clic per espandere all_recordlist (SDO) > all_recordlist (ADS).
Fare clic su IMAGETYPE (String).
Fare clic su OK, quindi salvare la pagina.

Il nuovo aspetto della pagina sarà simile al seguente:

Perfezionamento dell'aspetto con una griglia di caselle di gruppo

Con una casella di gruppo è possibile organizzare i componenti in formato simile a una tabella. Una casella di gruppo di tipo elenco può avere una sola riga o colonna; una casella di gruppo di tipo griglia può avere qualunque numero di righe e colonne. Con questa procedura si sposteranno i componenti {PRICE} e {PHONE} nella colonna DESCRIPTION della tabella di dati e verranno incluse delle etichette.

Trascinare un componente Pannello - Casella di gruppo dal cassetto Componenti Faces avanzati della tavolozza alla colonna DESCRIPTION della tabella dati. Viene aperta la finestra Seleziona tipo.
Fare clic su Griglia come tipo di componente da aggiungere, quindi fare clic su OK.
Fare clic sulla nuova casella di gruppo della griglia.
Utilizzare la vista Proprietà per impostare 2 come numero di Colonne per questa casella di gruppo.
Rilasciare un componente di Output del cassetto dei componenti Faces della tavolozza nella casella di gruppo della griglia. Tale componente di output sarà l'etichetta della descrizione dell'articolo in vendita. Ogni componente di output avrà un'etichetta come questa nella cella sinistra della tabella.
Fare clic sul componente di Output (che in Page Designer viene visualizzato come outputText) e utilizzare la vista Proprietà per assegnare ad esso un Valore per Descrizione:
Trascinare il componente esistente {DESCRIPTION} sul lato inferiore della casella di gruppo della griglia. In caso di problemi nel trascinamento dei componenti nella posizione giusta della casella di gruppo, tenere premuto il tasto del mouse e osservare il cursore. La posizione del cursore nella casella di gruppo indica il punto in cui il componente verrà visualizzato quando si rilascia il pulsante del mouse. In questo esercizio, occorre rilasciare il pulsante del mouse quando il cursore si trova sulla destra del componente precedente.
Trascinare un altro componente di Output dalla tavolozza e rilasciarlo sul lato destro della casella di gruppo.
Utilizzare la vista Proprietà per assegnare un Valore per Prezzo:.
Trascinare il componente di output esistente {PRICE} sulla destra del testo di output del prezzo.
Allo stesso modo, trascinare un nuovo componente di Output per l'etichetta del componente {PHONE} e assegnare ad esso l'etichetta Telefono:.
Trascinare il componente esistente {PHONE} nella casella di gruppo della griglia sulla destra del testo di output Telefono. Il nuovo aspetto della pagina sarà simile al seguente:
Eliminare le colonne PRICE e PHONE vuote della tabella dati. Per eliminare una colonna, fare clic sulla colonna e aprire la vista Proprietà. Fare quindi clic su h:dataTable dall'elenco di tag HTML nella parte sinistra della vista, selezionare la colonna da eliminare dall'elenco nella parte destra della vista e fare clic su Rimuovi.
Fare clic sull'intestazione della colonna della descrizione e utilizzare la vista Proprietà per modificare il campo Valore in Dettagli. L'aspetto della pagina appare simile al seguente:
Salvare la pagina e verificarla. Se non si ha familiarità con l'esecuzione di applicazioni sul server, far riferimento a Lezione 1.3: Verifica del sito Web.

In fase di verifica, la pagina ha l'aspetto seguente:

Aspetto della pagina corrente durante la verifica.

Tutti gli annunci pubblicitari che non hanno un'immagine associata visualizzano un link danneggiato. Nella lezione successiva si apprenderà come aggiungere un componente di caricamento file alla pagina, o come aggiungere un'immagine all'annuncio pubblicitario.

Riepilogo di controllo della lezione

La lezione 2.1 è terminata. In questa lezione si è appreso come formattare una tabella dati in vari modi.

Sono stati appresi i seguenti concetti:

Modifica delle intestazioni di colonna.
Ordinamento dei dati in una tabella.
Aggiunta di un pager per dividere i dati in più pagine Web di minori dimensioni.
Utilizzo di caselle di gruppo in vari modi per modificare l'aspetto della tabella nella pagina Web.

< Indietro | Avanti >