Elementos de agrupación de componentes en RichFaces
- Área: Catálogo de componentes de interfaz en JSF RichFaces
- Tipo de pauta: Directriz
- Carácter de la pauta: Obligatoria
Se describen las pautas para la utilización de los componentes de JSF RichFaces que realizan la implementación enriquecida de los elementos de agrupación identificados en el subárea de Componentes de Interfaz.
Pautas
| Título | Carácter |
|---|---|
| Pestaña | Obligatoria |
| Tabla de datos | Obligatoria |
| Separador | Obligatoria |
| Panel | Obligatoria |
Pestaña
La implementación en RichFace de la pestaña para agrupar componentes dentro de un formulario web se realizará utilizando el componente "Tab Panel".
El componente Tab Panel de RichFaces realizar una implementación del componente pestaña con varias posibilidades de comportamiento. Permite activar y desactivar pestañas en cliente, mediante AJAX, o realizandola petición al servidor.
En el siguiente código de ejemplo, se configura un TabPanel con tres pestañas que realiza las operaciones de activación en el cliente:
<p>Ejemplo del componente TabPanel por defecto con 3 pestañas.
<rich:tabPanel headerAlignment="left" switchType="client">
<rich:tab label="Primera">
Esta es la pestaña #1
</rich:tab>
<rich:tab label="Segunda">
Esta es la pestaña #2
</rich:tab>
<rich:tab label="Tercera">
Esta es la pestaña #3
</rich:tab>
</rich:tabPanel>
</p>
La imagen resultante es la siguiente:
Tabla de datos
Para realizar la implementación de la tabla de datos se utilizará el componente "Data Table" de RichFaces.
RichFaces dispone del componente Data Table para implementar una tabla de datos con una gran flexibilidad y capacidades de configuración en su visualización.
En la siguiente imagen puede verse un ejemplo de tabla de datos haciendo uso de este componente:
El código asociado a esta table sería el siguiente:
<rich:dataTable onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
cellpadding="0" cellspacing="0"
width="700" border="0" var="record" value="#{report.expReport.records}">
<f:facet name="header">
<rich:columnGroup>
<rich:column rowspan="2">
<rich:spacer />
</rich:column>
<rich:column colspan="3">
<h:outputText value="Gastos" />
</rich:column>
<rich:column rowspan="2">
<h:outputText value="Totales" />
</rich:column>
<rich:column breakBefore="true">
<h:outputText value="Comidas" />
</rich:column>
<rich:column>
<h:outputText value="Hoteles" />
</rich:column>
<rich:column>
<h:outputText value="Transporte" />
</rich:column>
</rich:columnGroup>
</f:facet>
....
</rich:dataTable>
Separador
Para realizar la implementación de un separador haciendo uso de RichFaces se utilizará el componente "Separator".
El componente Separator de RichFace permite configurar distintos modos de visualización en combinación con la utilización de estilos. Un ejemplo de uso puede ser el siguiente:
<rich:separator lineType="beveled" height="8" width="75%"
align="center"/>
Que daría como resultado la siguiente imagen con el elemento de separación renderizado:
Panel
Para implementar mediante RichFaces un Panel se utilizará el componente disponible del mismo nombre.
El componente básico Panel de RichFace permite organizar los elementos de un formulario mostrando diferentes estilos de visualización configurables mediante el atributo bodyClass.
Un ejemplo de utilización podría ser el siguiente:
El panel, puede visualizarse con o sin cabecera y admitir distintos estilos mediante la configuración de sus atributos.
