JSF - h: panelGrid

La balise h: panel rend un élément HTML "table".

Balise 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>

Sortie rendue

<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>

Attributs de balise

S. Non	Attribut et description
1	id Identifiant d'un composant
2	binding Référence au composant qui peut être utilisé dans un backing bean
3	rendered Un booléen; false supprime le rendu
4	styleClass Nom de classe de feuille de style en cascade (CSS)
5	value La valeur d'un composant, généralement une liaison de valeur
6	bgcolor Couleur d'arrière-plan du tableau
sept	border Largeur de la bordure du tableau
8	cellpadding Rembourrage autour des cellules du tableau
9	cellspacing Espacement entre les cellules du tableau
dix	columnClasses Liste des classes CSS séparées par des virgules pour les colonnes
11	columns Nombre de colonnes dans le tableau
12	footerClass Classe CSS pour le pied de tableau
13	frame frame Spécification pour les côtés du cadre entourant la table à dessiner; valeurs valides: aucune, ci-dessus, ci-dessous, hsides, vsides, lhs, rhs, box, border
14	headerClass Classe CSS pour l'en-tête du tableau
15	rowClasses Liste des classes CSS séparées par des virgules pour les colonnes
16	rules Spécification des lignes tracées entre les cellules; valeurs valides: groupes, lignes, colonnes, tout
17	summary Résumé de l'objectif et de la structure du tableau utilisé pour les commentaires non visuels tels que la parole
18	dir Direction du texte. Les valeurs valides sontltr (de gauche à droite) et rtl (de droite à gauche)
19	lang Langue de base des attributs et du texte d'un élément
20	border Valeur de pixel pour la largeur de bordure d'un élément
21	title Un titre, utilisé pour l'accessibilité, qui décrit un élément. Les navigateurs visuels créent généralement des info-bulles pour la valeur du titre
22	width Largeur d'un élément
23	onblur L'élément perd le focus
24	onchange Changements de valeur de l'élément
25	onclick Le bouton de la souris est cliqué sur l'élément
26	ondblclick Le bouton de la souris est double-cliqué sur l'élément
27	onfocus L'élément reçoit le focus
28	onkeydown La touche est enfoncée
29	onkeypress La touche est enfoncée puis relâchée
30	onkeyup La clé est libérée
31	onmousedown Le bouton de la souris est enfoncé sur l'élément
32	onmousemove La souris se déplace sur l'élément
33	onmouseout La souris quitte la zone de l'élément
34	onmouseover La souris se déplace sur un élément
35	onmouseup Le bouton de la souris est relâché

Exemple d'application

Créons une application JSF de test pour tester la balise ci-dessus.

Étape	La description
1	Créez un projet avec un nom helloworld sous un package com.tutorialspoint.test comme expliqué dans le chapitre JSF - Première application .
2	Modifiez home.xhtml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3	Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.
4	Enfin, créez l'application sous la forme d'un fichier war et déployez-la dans Apache Tomcat Webserver.
5	Lancez votre application Web en utilisant l'URL appropriée, comme expliqué ci-dessous à la dernière étape.

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>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application comme nous l'avons fait dans le chapitre JSF - Première application. Si tout va bien avec votre application, cela produira le résultat suivant.