Estoy teniendo un problema en Primefaces 5.3. Este es el código:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:form id="formUsuarios">
<p:panel id="filtro" header="Usuarios"
style="margin: 0.2em 5em 0.2em 5em; padding: 0" toggleable="true">
<p:panelGrid columns="3" layout="grid"
columnClasses="ui-grid-col-4,ui-grid-col-4,ui-grid-col-4"
styleClass="ui-panelgrid-blank">
<p:panelGrid columns="1">
<h:outputLabel for="aeropuerto"
value="#{msg['pantalla.administracion.usuarios.label_aeropuerto']}" />
<p:selectOneMenu id="aeropuerto"
value="#{usuariosManagedBean.criterioBusqueda.aeropuerto}"
effect="fade" filter="true" filterMatchMode="contains"
style="width:20em;">
<f:selectItem itemLabel="" itemValue="" noSelectionOption="true" />
<f:selectItems value="#{usuariosManagedBean.listaAeropuertos}"
var="aeropuerto"
itemLabel="#{aeropuerto.cdAeropuerto} - #{aeropuerto.dsAeropuerto}"
itemValue="#{aeropuerto.cdAeropuerto}" />
</p:selectOneMenu>
</p:panelGrid>
<p:panelGrid columns="1">
<h:outputLabel for="usuario"
value="#{msg['pantalla.administracion.usuarios.label_usuario']}" />
<p:inputText id="usuario"
value="#{usuariosManagedBean.criterioBusqueda.usuario}" size="25"
maxlength="50" />
</p:panelGrid>
<p:panelGrid columns="1">
<h:outputLabel for="dominio"
value="#{msg['pantalla.administracion.usuarios.label_dominio']}" />
<p:inputText id="dominio"
value="#{usuariosManagedBean.criterioBusqueda.usuario}" size="25"
maxlength="50" />
</p:panelGrid>
<p:panelGrid columns="1">
<h:outputLabel for="nombre"
value="#{msg['pantalla.administracion.usuarios.label_nombre']}" />
<p:inputText id="nombre"
value="#{usuariosManagedBean.criterioBusqueda.usuario}" size="25"
maxlength="50" />
</p:panelGrid>
<p:panelGrid columns="1">
<h:outputLabel for="apellido1"
value="#{msg['pantalla.administracion.usuarios.label_apellido_1']}" />
<p:inputText id="apellido1"
value="#{usuariosManagedBean.criterioBusqueda.usuario}" size="25"
maxlength="50" />
</p:panelGrid>
<p:panelGrid columns="1">
<h:outputLabel for="apellido2"
value="#{msg['pantalla.administracion.usuarios.label_apellido_2']}" />
<p:inputText id="apellido2"
value="#{usuariosManagedBean.criterioBusqueda.usuario}" size="25"
maxlength="50" />
</p:panelGrid>
<p:panelGrid columns="2">
<h:outputLabel for="activo"
value="#{msg['pantalla.administracion.usuarios.label_activo']}" />
<p:inputSwitch id="activo" onLabel="#{msg['comun.boton.si']}"
offLabel="#{msg['comun.boton.no']}"
value="#{usuariosManagedBean.criterioBusqueda.usuario}" />
</p:panelGrid>
</p:panelGrid>
<p:toolbar styleClass="toolbar_panel_filtro">
<f:facet name="right">
<p:commandButton id="btnLimpiar"
value="#{msg['comun.boton.limpiar']}"
title="#{msg['comun.boton.limpiar_title']}" icon="fa fa-refresh" />
<p:commandButton id="btnBuscar"
value="#{msg['comun.boton.buscar']}"
title="#{msg['comun.boton.buscar_title']}" icon="fa fa-search" />
</f:facet>
</p:toolbar>
</p:panel>
<p:panel id="panelTabla">
<p:dataTable id="tablaUsuarios" rows="15" paginator="true"
paginatorPosition="bottom" liveScroll="true" scrollWidth="99%"
scrollable="true"
currentPageReportTemplate="#{msg['comun.tabla.paginacion.pagina']} {currentPage} #{msg['comun.tabla.paginacion.de']} {totalPages} - #{msg['comun.tabla.paginacion.total']} {totalRecords} #{msg['comun.tabla.paginacion.registros']}"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
var="usuario" value="#{usuariosManagedBean.usuarios}"
styleClass="own_table"
emptyMessage="#{msg['pantalla.configuracion.usuarios.label_resultado_busqueda_usuarios_vacio']}"
selectionMode="single"
selection="#{usuariosManagedBean.usuarioSeleccionado}"
rowKey="#{usuario.usuarioRed}">
<p:ajax event="rowDblselect"
listener="#{usuariosManagedBean.onRowDblClick}"></p:ajax>
<p:ajax event="rowSelect"
listener="#{usuariosManagedBean.onRowSelect}"></p:ajax>
<p:ajax event="rowUnselect"
listener="#{usuariosManagedBean.onRowUnselect}"></p:ajax>
<f:facet name="header">
#{msg['pantalla.configuracion.usuarios.label_resultado_busqueda_usuarios']}
</f:facet>
<p:column
headerText="#{msg['pantalla.configuracion.usuarios.tabla.columna.usuario_red']}"
width="80" styleClass="truncate">
<h:outputText id="columnUsuarioRed" value="#{usuario.usuarioRed}"
title="#{usuario.usuarioRed}" />
<p:tooltip for="columnUsuarioRed" />
</p:column>
<p:column
headerText="#{msg['pantalla.configuracion.usuarios.tabla.columna.nombre']}"
width="150" styleClass="truncate">
<h:outputText id="columnNombre" value="#{usuario.nombre}"
title="#{usuario.nombre}" />
<p:tooltip for="columnNombre" />
</p:column>
<p:column
headerText="#{msg['pantalla.configuracion.usuarios.tabla.columna.perfil']}"
width="60" styleClass="truncate">
<h:outputText id="columnPerfil" value="#{usuario.perfil}"
title="#{usuario.perfil}" />
<p:tooltip for="columnPerfil" />
</p:column>
<p:column
headerText="#{msg['pantalla.configuracion.usuarios.tabla.columna.aeropuerto']}"
width="70" styleClass="truncate">
<h:outputText id="columnAeropuerto" value="#{usuario.aeropuerto}"
title="#{usuario.aeropuerto}" />
<p:tooltip for="columnAeropuerto" />
</p:column>
<p:column
headerText="#{msg['pantalla.configuracion.usuarios.tabla.columna.correo']}"
width="150" styleClass="truncate">
<h:outputText id="columnCorreo" value="#{usuario.correo}"
title="#{usuario.correo}" />
<p:tooltip for="columnCorreo" />
</p:column>
<p:column
headerText="#{msg['pantalla.configuracion.usuarios.tabla.columna.fecha_alta']}"
width="100" styleClass="truncate">
<h:outputText id="columnFechaAlta" value="#{usuario.fecAlta}">
<f:convertDateTime pattern="dd/MM/yyyy HH:mm" />
</h:outputText>
</p:column>
<p:column
headerText="#{msg['pantalla.configuracion.usuarios.tabla.columna.fecha_baja']}"
width="100" styleClass="truncate">
<h:outputText id="columnFechaBaja" value="#{usuario.fecBaja}">
<f:convertDateTime pattern="dd/MM/yyyy HH:mm" />
</h:outputText>
</p:column>
<p:column
headerText="#{msg['pantalla.configuracion.usuarios.tabla.columna.usuario']}"
width="70" styleClass="truncate">
<h:outputText id="columnUsuario" value="#{usuario.usuario}"
title="#{usuario.usuario}" />
<p:tooltip for="columnUsuario" />
</p:column>
<p:column
headerText="#{msg['pantalla.configuracion.usuarios.tabla.columna.fecha_actualizacion']}"
width="120" styleClass="truncate">
<h:outputText id="columnFechaActualiz"
value="#{usuario.fecActualiz}">
<f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss" />
</h:outputText>
</p:column>
</p:dataTable>
</p:panel>
</h:form>
</ui:composition>
Hay dos paneles, "filtro" y "panelTabla", pero "panelTabla" está anidado dentro de "filtro" y no entiendo por qué, son paneles independientes.
Si borro la propiedad layout="grid" del panelGrid en el que se definen 3 columnas, entonces los paneles se muestran correctamente, pero las columnas se descuadran y el espacio para los campos no se distribuye como debería.
También he visto que si sólo pongo tres campos en el panel, los tres primeros, por ejemplo, "aeropuerto", "usuario" y "dominio", y borro el resto, se ven correctamente, sin anidarse. Es decir, si el número de campos es el mismo que el número de columnas definidas en el panelGrid, funciona, pero claro, necesito poner más campos. Podría alguien echarme una mano, por favor?
Muchas gracias!!!
Un saludo