JSF - h: panelGrid

Il tag h: panel rende un elemento "table" HTML.

Tag JSF

<h:panelGrid id = "panel" columns = "2" border = "1"
      cellpadding = "10" cellspacing = "1">
   
   <f:facet name = "header">
      <h:outputText value = "Login"/>
   </f:facet>
   <h:outputLabel value = "Username" />
   <h:inputText  />
   <h:outputLabel value = "Password" />
   <h:inputSecret />
   
   <f:facet name = "footer">
      <h:panelGroup style = "display:block; text-align:center">
         <h:commandButton id = "submit" value = "Submit" />
      </h:panelGroup>
   </f:facet>
</h:panelGrid>

Output renderizzato

<table id = "j_idt10:panel" border = "1" cellpadding = "10" cellspacing = "1">
   <thead>
      <tr><th colspan = "2" scope = "colgroup">Login</th></tr>
   </thead>
   
   <tfoot>
      <tr>
         <td colspan = "2">
            <span style = "display:block; text-align:center">
               <input id = "j_idt10:submit" type = "submit"
                  name = "j_idt10:submit" value = "Submit" />
            </span>
         </td>
      </tr>
   </tfoot>
   
   <tbody>
      <tr>
         <td><label>Username</label></td>
         <td><input type = "text" name = "j_idt10:j_idt17" /></td>
      </tr>
      <tr>
         <td><label>Password</label></td>
         <td><input type = "password" name = "j_idt10:j_idt21" value = "" /></td>
      </tr>
   
   </tbody>
</table>

Attributi dei tag

S.No	Attributo e descrizione
1	id Identificatore per un componente
2	binding Riferimento al componente che può essere utilizzato in un backing bean
3	rendered Un booleano; false sopprime il rendering
4	styleClass Nome della classe CSS (Cascading stylesheet)
5	value Il valore di un componente, in genere un'associazione di valori
6	bgcolor Colore di sfondo per il tavolo
7	border Larghezza del bordo della tabella
8	cellpadding Riempimento attorno alle celle della tabella
9	cellspacing Spaziatura tra le celle della tabella
10	columnClasses Elenco separato da virgole di classi CSS per le colonne
11	columns Numero di colonne nella tabella
12	footerClass Classe CSS per il piè di pagina della tabella
13	frame cornice Specifica per i lati del telaio che circondano il tavolo da disegnare; valori validi: nessuno, sopra, sotto, hsides, vsides, lhs, rhs, box, border
14	headerClass Classe CSS per l'intestazione della tabella
15	rowClasses Elenco separato da virgole di classi CSS per le colonne
16	rules Specifica per linee tracciate tra le celle; valori validi: gruppi, righe, colonne, tutto
17	summary Riepilogo dello scopo e della struttura della tabella utilizzata per il feedback non visivo come il parlato
18	dir Direzione per il testo. I valori validi sonoltr (da sinistra a destra) e rtl (da destra a sinistra)
19	lang Lingua di base degli attributi e del testo di un elemento
20	border Valore in pixel per la larghezza del bordo di un elemento
21	title Un titolo, utilizzato per l'accessibilità, che descrive un elemento. I browser visivi in genere creano suggerimenti per il valore del titolo
22	width Larghezza di un elemento
23	onblur L'elemento perde la concentrazione
24	onchange Il valore dell'elemento cambia
25	onclick Si fa clic sul pulsante del mouse sull'elemento
26	ondblclick Si fa doppio clic sul pulsante del mouse sull'elemento
27	onfocus L'elemento riceve il fuoco
28	onkeydown Viene premuto il tasto
29	onkeypress Il tasto viene premuto e successivamente rilasciato
30	onkeyup La chiave viene rilasciata
31	onmousedown Il pulsante del mouse viene premuto sull'elemento
32	onmousemove Il mouse si sposta sull'elemento
33	onmouseout Il mouse lascia l'area dell'elemento
34	onmouseover Il mouse si sposta su un elemento
35	onmouseup Il pulsante del mouse viene rilasciato

Applicazione di esempio

Creiamo un'applicazione JSF di prova per testare il tag precedente.

Passo	Descrizione
1	Creare un progetto con un nome helloworld sotto un pacchetto com.tutorialspoint.test come spiegato nel capitolo JSF - Prima applicazione .
2	Modifica home.xhtml come spiegato di seguito. Mantieni il resto dei file invariato.
3	Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti.
4	Infine, crea l'applicazione sotto forma di file war e distribuiscila nel server Web Apache Tomcat.
5	Avvia la tua applicazione web utilizzando l'URL appropriato come spiegato di seguito nell'ultimo passaggio.

home.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <title>JSF Tutorial!</title>
   </head>
   
   <body>
      <h2>h:panelGrid example</h2>
      <hr />
      
      <h:form>
         <h:panelGrid id = "panel" columns = "2" border = "1"
            cellpadding = "10" cellspacing = "1">
            
            <f:facet name = "header">
               <h:outputText value = "Login"/>
            </f:facet>
            <h:outputLabel value = "Username" />
            <h:inputText  />
            <h:outputLabel value = "Password" />
            <h:inputSecret />
            
            <f:facet name = "footer">
               <h:panelGroup style = "display:block; text-align:center">
                  <h:commandButton id = "submit" value = "Submit" />
               </h:panelGroup>
            </f:facet>
         </h:panelGrid>
      </h:form>
   
   </body>
</html>

Una volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione come abbiamo fatto nel capitolo JSF - Prima applicazione. Se tutto va bene con la tua applicazione, questo produrrà il seguente risultato.