JSF - h: panelGrid

La etiqueta h: panel representa un elemento "tabla" HTML.

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

Salida renderizada

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

Atributos de etiqueta

S. No	Atributo y descripción
1	id Identificador de un componente
2	binding Referencia al componente que se puede utilizar en un bean de respaldo
3	rendered Un booleano; falso suprime la representación
4	styleClass Nombre de clase de hoja de estilo en cascada (CSS)
5	value El valor de un componente, normalmente un valor vinculante
6	bgcolor Color de fondo de la mesa
7	border Ancho del borde de la mesa
8	cellpadding Acolchado alrededor de las celdas de la mesa
9	cellspacing Espaciado entre celdas de la tabla
10	columnClasses Lista separada por comas de clases CSS para columnas
11	columns Número de columnas en la tabla
12	footerClass Clase CSS para el pie de la tabla
13	frame marco Especificación de los lados del marco que rodean la mesa que se van a dibujar; valores válidos: none, above, below, hsides, vsides, lhs, rhs, box, border
14	headerClass Clase CSS para el encabezado de la tabla
15	rowClasses Lista separada por comas de clases CSS para columnas
dieciséis	rules Especificación de líneas dibujadas entre celdas; valores válidos: grupos, filas, columnas, todos
17	summary Resumen del propósito y la estructura de la tabla utilizada para comentarios no visuales, como el habla
18	dir Dirección del texto. Los valores válidos sonltr (de izquierda a derecha) y rtl (De derecha a izquierda)
19	lang Idioma base de los atributos y el texto de un elemento
20	border Valor de píxel para el ancho del borde de un elemento
21	title Un título, usado para accesibilidad, que describe un elemento. Los navegadores visuales suelen crear información sobre herramientas para el valor del título
22	width Ancho de un elemento
23	onblur El elemento pierde el foco
24	onchange Cambios en el valor del elemento
25	onclick Se hace clic en el botón del mouse sobre el elemento
26	ondblclick El botón del mouse se hace doble clic sobre el elemento
27	onfocus El elemento recibe atención
28	onkeydown Se presiona la tecla
29	onkeypress Se presiona la tecla y luego se suelta
30	onkeyup Se suelta la llave
31	onmousedown Se presiona el botón del mouse sobre el elemento
32	onmousemove El mouse se mueve sobre el elemento
33	onmouseout El mouse sale del área del elemento
34	onmouseover El mouse se mueve sobre un elemento
35	onmouseup Se suelta el botón del mouse

Aplicación de ejemplo

Creemos una aplicación JSF de prueba para probar la etiqueta anterior.

Paso	Descripción
1	Cree un proyecto con un nombre helloworld en un paquete com.tutorialspoint.test como se explica en el capítulo JSF - Primera aplicación .
2	Modifique home.xhtml como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3	Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos.
4	Finalmente, compile la aplicación en forma de archivo war e impleméntela en Apache Tomcat Webserver.
5	Inicie su aplicación web utilizando la URL adecuada como se explica a continuación en el último paso.

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 vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación como lo hicimos en JSF - Capítulo Primera aplicación. Si todo está bien con su aplicación, esto producirá el siguiente resultado.

↰ Previous page