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.