In una casella di gruppo i componenti possono essere organizzati anche in un formato di tipo tabella.
Una casella di gruppo di tipo elenco può avere una sola riga o colonna, mentre una casella di gruppo di tipo griglia può avere un numero qualsiasi di righe e colonne. In questa procedura, i componenti
{PRICE} e {PHONE} verranno spostati nella colonna DESCRIPTION della tabella dati e per i componenti verranno incluse delle etichette.
- Trascinare un componente Pannello - Casella di gruppo dal cassetto Componenti Faces avanzati della tavolozza nella colonna DESCRIPTION della tabella dati. Viene visualizzata la finestra Selezione tipo.
- Fare clic su Griglia come tipo di componente da aggiungere e fare clic su
OK.
- Fare clic sulla nuova casella di gruppo griglia.
- Utilizzare la vista Proprietà per impostare il numero di Colonne per questa casella di gruppo su 2.
- Trascinare un componente Output dal cassetto Componenti Faces della Tavolozza alla casella di gruppo griglia. Il componente di output avrà un'etichetta per la descrizione dell'articolo in vendita.
Ciascun componente di output presenterà un'etichetta come questa nella cella a sinistra della tabella.
- Fare clic sul componente Output (viene visualizzato in
Page Designer come outputText) e utilizzare la vista Proprietà per assegnare al componente un
Valore di Descrizione:
- Trascinare il componente {DESCRIPTION} esistente sul bordo inferiore della casella di gruppo griglia. Se non si riesce a trascinare i componenti nel punto esatto della casella di gruppo, rilasciare il pulsante del mouse e guardare il cursore. La posizione del cursore nella casella di gruppo indica il punto in cui il componente verrà visualizzato quando si sposta il pulsante del mouse. Per questo esercizio, si consiglia di rilasciare il pulsante del mouse quando il cursore si trova a destra del componente precedente.
- Trascinare un altro componente Output dalla Tavolozza e rilasciarlo a destra della casella di gruppo.
- Utilizzare la vista Proprietà per assegnare al componente un Valore di Prezzo:.
- Trascinare il componente di output {PRICE} esistente a destra del testo di output Prezzo.
- Allo stesso modo, trascinare un nuovo componente Output per l'etichetta relativa al componente {PHONE} ed etichettarlo Telefono:.
- Trascinare il componente {PHONE} esistente nella casella di gruppo griglia a destra del tasto di output Telefono. La pagina dovrebbe ora essere simile alla seguente:
- Eliminare le colonne PRICE e PHONE vuote della tabella dati. Per eliminare una colonna, fare clic sulla colonna e aprire la vista Proprietà. Quindi, fare clic su h:dataTableEx
dall'elenco di tag HTML a sinistra della vista, selezionare la colonna da eliminare dall'elenco a destra della vista e fare clic su Rimuovi.
- Fare clic sull'intestazione della colonna Descrizione e utilizzare la vista Proprietà per modificare il campo
Valore su Dettagli. La pagina dovrebbe essere simile alla seguente:
- Salvare la pagina e testarla. Se non si ha familiarità con l'esecuzione delle applicazioni sul server, fare riferimento a Lezione 1.3: Test del sito Web.
Quando si testa la pagina, la pagina dovrebbe essere simile alla seguente:
Per qualsiasi annuncio a cui non è associata un'immagine viene visualizzato un link interrotto. Nella lezione successiva, verrà illustrato come aggiungere un componente di caricamento file alla pagina, per aggiungere o modificare l'immagine di un annuncio.
accanto al campo
