JSF panelGrid. Guía y EJEMPLOS COMPLETOS.

El componente JSF h: panelGrid se renderizará, una vez procesada la página, como una tabla HTML y es usado generalmente para generar una grilla que nos permita organizar los demás componentes en pantalla.

Estructurar un formulario con panelGrid

1. Establecer el número de columnas

En el siguiente ejemplo utilizaremos el atributo columns de JSF h: panelGrid para indicar que la tabla generada debe tener dos columnas. Esto nos ayudará a organizar los campos de texto (h: inputText) con su correspondiente etiqueta (h: outputLabel). Se debe tener presente que h:panelGrid organizará los componentes automáticamente dentro de la tabla HTML resultante, por lo cual es importante el orden en que ingresamos los componentes contenidos por nuestra tabla.

Como mencionamos anteriormente, queremos que nuestra tabla tenga dos columnas, por lo que h:panelGrid creará una nueva fila cada dos componentes que agreguemos, ubicando el label en la primer columna y el campo de texto en la segunda.

<h:panelGrid border="1" columns="2" styleClass="table-style">

	<h:outputLabel for="it-nombre-1" value="Nombre: " />
	<h:inputText id="it-nombre-1" />

	<h:outputLabel for="it-apellido-1" value="Apellido: " />
	<h:inputText id="it-apellido-1" />

</h:panelGrid>

El código HTML generado es el siguiente:

<table class="table-style" border="1">
    <tbody>
        <tr>
            <td><label for="customerForm:it-nombre-1">Nombre: </label></td>
            <td><input id="customerForm:it-nombre-1" type="text" name="customerForm:it-nombre-1"></td>
        </tr>
        <tr>
            <td><label for="customerForm:it-apellido-1">Apellido: </label></td>
            <td><input id="customerForm:it-apellido-1" type="text" name="customerForm:it-apellido-1"></td>
        </tr>
    </tbody>
</table>

El resultado del ejemplo anterior es una una simple tabla HTML que contiene los componentes declarados en el JSF h: panelGrid. Esto lo podemos ver en la siguiente imagen:

2. Agregar cabecera y pie

En el siguiente ejemplo crearemos la misma tabla pero agregando una cabecera y pie mediante el uso de facets.

Para crear la cabecera de la tabla debemos agregar el facet «header» al componente h:panelGrid, que se renderizará como un elemento thead de HTML.

Para crear el footer de la tabla debemos agregar el facet «footer» al componente h:panelGrid, que en este caso se traducirá como un elemento tfoot de HTML.

<h:panelGrid border="1" columns="2" styleClass="table-style">

    <f:facet name="header">
		<h:outputText value="This is my header" />
	</f:facet>

	<h:outputLabel for="it-nombre-2" value="Nombre: " />
	<h:inputText id="it-nombre-2" />

	<h:outputLabel for="it-apellido-2" value="Apellido: " />
	<h:inputText id="it-apellido-2" />

	<f:facet name="footer">
		<h:outputText value="This is my footer" />
	</f:facet>

</h:panelGrid>

A continuación, en el código HTML generado podemos apreciar los elementos thead y tfoot con sus correspondientes elementos hijos y los textos especificados anteriormente en los facets.

<table class="table-style" border="1">
    <thead>
        <tr><th colspan="2" scope="colgroup">This is my header</th></tr>
    </thead>
    <tfoot>
        <tr><td colspan="2">This is my footer</td></tr>
    </tfoot>
    <tbody>
        <tr>
            <td><label for="customerForm:it-nombre-2">Nombre: </label></td>
            <td><input id="customerForm:it-nombre-2" type="text" name="customerForm:it-nombre-2"></td>
        </tr>
        <tr>
            <td><label for="customerForm:it-apellido-2">Apellido: </label></td>
            <td><input id="customerForm:it-apellido-2" type="text" name="customerForm:it-apellido-2"></td>
        </tr>
    </tbody>
</table>

Como resultado del cambio visualizaremos la correspondiente cabecera y pie en la tabla HTML generada:

3. Agregar estilos

Ya tenemos la tabla terminada, pero nos falta adornarla con estilos que nos permitan ajustar, entre otras cosas, la fuente utilizada en el texto, los bordes, los colores, etc.

En el último ejemplo agregaremos estilos a la cabecera, pie y columnas haciendo uso de los atributos de JSF h: panelGrid destinados a aplicar estilos a secciones específicas de nuestra tabla, que listamos a continuación:

En el siguiente código podemos apreciar cómo se utilizan los atributos explicados anteriormente. El valor asignado a cada uno corresponde al nombre de una clase CSS.

<h:panelGrid border="1" columns="2" headerClass="table-header" footerClass="table-footer" columnClasses="table-col-1,table-col-2" styleClass="table-style">

	<f:facet name="header">
		<h:outputText value="This is my header" />
	</f:facet>

	<h:outputLabel for="it-nombre-3" value="Nombre: " />
	<h:inputText id="it-nombre-3" />

	<h:outputLabel for="it-apellido-3" value="Apellido: " />
	<h:inputText id="it-apellido-3" />

	<f:facet name="footer">
		<h:outputText value="This is my footer" />
	</f:facet>

</h:panelGrid>

Las clases CSS utilizadas estarán incluídas en un archivo que agregaremos al classpath de nuestro proyecto en Eclipse.

.table-style {
	width: 600px;
	margin-bottom: 25px;
	display: inline-table;
}

.table-header {
	background-color: yellow;
	padding-top: 50px;
	padding-bottom: 50px;
}

.table-footer {
	background-color: green;
	padding-top: 10px;
	padding-bottom: 10px;
}

.table-col-1 {
	width: 50%;
}

.table-col-2 {
	width: 50%;
}

Finalmente, podemos ver que en el código HTML generado las clases CSS se han aplicado de acuerdo al atributo (headerClass, footerClass, etc) al que se hayan asignado.

<table class="table-style" border="1">
    <thead>
        <tr><th class="table-header" colspan="2" scope="colgroup">This is my header</th></tr>
    </thead>
    <tfoot>
        <tr><td class="table-footer" colspan="2">This is my footer</td></tr>
    </tfoot>
    <tbody>
        <tr>
            <td class="table-col-1"><label for="customerForm:it-nombre-3">Nombre: </label></td>
            <td class="table-col-2"><input id="customerForm:it-nombre-3" type="text" name="customerForm:it-nombre-3"></td>
        </tr>
        <tr>
            <td class="table-col-1"><label for="customerForm:it-apellido-3">Apellido: </label></td>
            <td class="table-col-2"><input id="customerForm:it-apellido-3" type="text" name="customerForm:it-apellido-3"></td>
        </tr>
    </tbody>
</table>

Como resultado tendremos la tabla vista anteriormente pero con los estilos aplicados:

Atributos de h:panelGrid

Conclusión

El componente JSF panelGrid proporciona una solución simple pero poderosa para crear cuadrículas de componentes en una página web. Mediante el uso de este componente, los desarrolladores pueden disponer fácilmente los componentes en un formato similar a una tabla y personalizar su apariencia y comportamiento de acuerdo con los requisitos de su aplicación. Además, el componente panelGrid se puede ampliar y personalizar mediante el uso de estilos y atributos, que brindan aún más flexibilidad y control sobre su comportamiento. Con su sólido conjunto de funciones, el componente panelGrid es un activo valioso en cualquier proyecto de desarrollo de aplicaciones web basado en JSF y puede mejorar la experiencia del usuario mejorando el diseño y la organización de los componentes en una página.

Te puede interesar