Deseamos crear una pagina con la siguiente vista, donde se muestren todos los registros, podamos crearlos,imprimirlos, buscarlos e invocar las paginas para su edición.
En el paquete tipovehiculo seleccionar File-> New
en File Name: indicar list
Indicar el template
Copy <ui:composition template="./../../WEB-INF/template.xhtml"> Colocar el titulo en la sección top
Copy <ui:define name="top">
<h1>
#{msg['tipovehiculo.list']}
<small> </small>
</h1>
</ui:define> El contenido se define en la sección content
Copy <ui:define name="content"> Agregar un <h:form> con rendered
Copy <h:form id="form" rendered="#{loginController.loggedIn}"> Agregar un panel group (como contenedor general) y messages (para desplegar los mensajes)
Copy <h:panelGroup id="content" layout="block">
<p:messages id="msgs"/> Botones del formulario los creamos en la sección form-header
<p:link para invocar la pagina create
<p:commandButton para habilitar un botón de impresión
Copy <!--
header del formulario
-->
<div class="row form-header-2" style="padding-top: 5px;">
<div class="col-md-12 record-status-buttons">
<p:link class="btnn btnn-primary" value="#{msg['boton.new']}" outcome="/pages/tipovehiculo/create"/>
<p:commandButton class="btnn btnn-primary" value="#{msg['boton.print']}" process=":form:content" action="#{tipovehiculoController.printAll()}"
ajax="false"
update=":form:content" />
</div>
</div> El cuerpo de contenido lo agregamos en la sección form-body
Copy <!--
body
-->
<div class="row form-body"> Crear un datatable
Asignación de atributos:
Agregar un datatable asociado a tipovehiculoList, indicamos selection a selectedTipovehiculo, el filteredValue con tipovehiculoFiltered
Copy <p:dataTable id="tipovehiculoDataTable"
var="item"
value="#{tipovehiculoController.tipovehiculoDataModel}"
selectionMode="single"
widgetVar="tipovehiculoDataTable"
selection="#{tipovehiculoController.tipovehiculoSelected}"
filteredValue="#{tipovehiculoController.tipovehiculoFiltered}"
rowKey="#{item.idtipovehiculo}"
rows="10" paginator="true" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15"
emptyMessage="#{msg.nohayregistrosconesecriterio}" reflow="true"> Agregamos un filtro para buscar en el datatable
Copy <f:facet name="header">
<p:outputPanel>
<div class="searchLoader">
<p:graphicImage name="/img/search-loader.gif"/>
</div>
<input type="text" jsf:id="globalFilter" jsf:onkeyup="PF('tipovehiculoDataTable').filter()"
class="search" placeholder="#{msg['boton.search']}"/>
</p:outputPanel>
</f:facet> Controlamos el evento rowSelect que se activa al seleccionar una fila, mostrando el dialogo tipovehiculoDialog
Copy <p:ajax event="rowSelect" update=":form:tipovehiculoDetaill"
oncomplete="PF('tipovehiculoDialog').show()" /> Las columnas que deseamos hacer búsquedas especificamos el filterBy, filterMatchMode.
Copy <p:column headerText="#{msg.idtipovehiculo}" filterBy="#{item.idtipovehiculo}"
sortBy="#{item.idtipovehiculo}" filterMatchMode="contains" >
<h:outputText value="#{item.idtipovehiculo}" />
</p:column> Crear un diálogo, para mostrar el elemento seleccionado
El dialogo usados el widgetVar para que pueda ser identificado en la pagina por otros componentes.
Dentro del dialogo agregamos un <p:outPanel y un <p:panelGrid.
Copy <p:dialog header="#{msg['tipovehiculo.list']}" widgetVar="tipovehiculoDialog"
width="250" height="250" modal="true" showEffect="fade" hideEffect="fade"
resizable="false" responsive="true">
<p:outputPanel id="tipovehiculoDetaill" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty tipovehiculoController.tipovehiculoSelected}"
layout="grid" styleClass="ui-panelgrid-blank"> Elementos que se muestran son en base a selectedTipovehiculo
Copy <p:outputLabel value="#{msg.idtipovehiculo}" style="font-weight: bold"/>
<p:outputLabel value="#{tipovehiculoController.tipovehiculoSelected.idtipovehiculo}" /> Agregar un <p:commandButton ,
El método oncomplete oculta el dialogo, en el action invocar el método prepareEdit(), y agregamos <f:param para asignar el valor del idtipovehiculo a una parametro que guardaremos en el FacesContext y que sera usado en el controller para identificar el id del tipo de vehiculo seleccionado.
Copy <p:commandButton id="btn2" value="#{msg['boton.edit']}"
class="btnn btnn-primary"
icon="fa fa-edit Fs14 White" style="max-width:150px;"
oncomplete="PF('historialDialog').hide()"
title="#{msg['boton.edit']}"
update=":form:msgs"
action="#{tipovehiculoController.prepareEdit()}"
b>
<f:param name="idtipovehiculo" value="#{tipovehiculoController.tipovehiculoSelected.idtipovehiculo}"/>
</p:commandButton> Codigo Completo
Copy <?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">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:b="http://bootsfaces.net/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:jsf="http://xmlns.jcp.org/jsf">
<body>
<ui:composition template="./../../WEB-INF/template.xhtml">
<ui:define name="top">
<h1>
#{msg['tipovehiculo.list']}
<small> </small>
</h1>
</ui:define>
<!--
Contenido
-->
<ui:define name="content">
<h:form id="form" rendered="#{loginController.loggedIn}">
<h:panelGroup id="content" layout="block">
<p:messages id="msgs"/>
<!--
header del formulario
-->
<div class="row form-header-2" style="padding-top: 5px;">
<div class="col-md-12 record-status-buttons">
<p:link class="btnn btnn-primary" value="#{msg['boton.new']}" outcome="/pages/tipovehiculo/create"/>
<p:commandButton class="btnn btnn-primary" value="#{msg['boton.print']}" process=":form:content" action="#{tipovehiculoController.printAll()}"
ajax="false"
update=":form:content" />
</div>
</div>
<!--
body
-->
<div class="row form-body">
<!--
los elementos en filas
-->
<p:dataTable id="tipovehiculoDataTable" var="item"
value="#{tipovehiculoController.tipovehiculoDataModel}"
selectionMode="single"
widgetVar="tipovehiculoDataTable"
selection="#{tipovehiculoController.tipovehiculoSelected}"
filteredValue="#{tipovehiculoController.tipovehiculoFiltered}"
rowKey="#{item.idtipovehiculo}"
rows="10" paginator="true" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15" emptyMessage="#{msg.nohayregistrosconesecriterio}" reflow="true">
<f:facet name="header">
<p:outputPanel>
<div class="searchLoader">
<p:graphicImage name="/img/search-loader.gif"/>
</div>
<input type="text" jsf:id="globalFilter" jsf:onkeyup="PF('tipovehiculoDataTable').filter()" class="search" placeholder="#{msg['boton.search']}"/>
</p:outputPanel>
</f:facet>
<p:ajax event="rowSelect" update=":form:tipovehiculoDetaill" oncomplete="PF('tipovehiculoDialog').show()" />
<p:column headerText="#{msg.idtipovehiculo}" filterBy="#{item.idtipovehiculo}" sortBy="#{item.idtipovehiculo}" filterMatchMode="contains" >
<h:outputText value="#{item.idtipovehiculo}" />
</p:column>
<p:column headerText="#{msg.tipo}" filterBy="#{item.tipo}" sortBy="#{item.tipo}" filterMatchMode="contains">
<h:outputText value="#{item.tipo}" />
</p:column>
<p:column headerText="#{msg.fecha}" filterBy="#{item.fecha}" sortBy="#{item.fecha}" >
<h:outputText value="#{item.fecha}" >
<f:convertDateTime pattern="dd/MM/yyyy" />
</h:outputText>
</p:column>
</p:dataTable>
<p:dialog header="#{msg['tipovehiculo.list']}" widgetVar="tipovehiculoDialog" width="250" height="250"
modal="true" showEffect="fade" hideEffect="fade" resizable="false" responsive="true">
<p:outputPanel id="tipovehiculoDetaill" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty tipovehiculoController.tipovehiculoSelected}" layout="grid" styleClass="ui-panelgrid-blank">
<p:outputLabel value="#{msg.idtipovehiculo}" style="font-weight: bold"/>
<p:outputLabel value="#{tipovehiculoController.tipovehiculoSelected.idtipovehiculo}" />
<p:outputLabel value="#{msg.tipo}" style="font-weight: bold"/>
<p:outputLabel value="#{tipovehiculoController.tipovehiculoSelected.tipo}" />
<p:commandButton id="btn2" value="#{msg['boton.edit']}"
class="btnn btnn-primary"
icon="fa fa-edit Fs14 White" style="max-width:150px;"
oncomplete="PF('historialDialog').hide()"
title="#{msg['boton.edit']}"
update=":form:msgs"
action="#{tipovehiculoController.prepareEdit()}"
>
<f:param name="idtipovehiculo" value="#{tipovehiculoController.tipovehiculoSelected.idtipovehiculo}"/>
</p:commandButton>
</p:panelGrid>
</p:outputPanel>
</p:dialog>
</div>
</h:panelGroup>
</h:form>
</ui:define>
</ui:composition>
</body>
</html> Cuando se muestra el listado, al dar click se invoca el diálogo donde se muestra el registro seleccionado y el botón Editar llamara al formulario view.
Búsquedas en el List.
Podemos realizar búsquedas por cualquier atributo que hayamos especificado en las columnas del datatable.
