Pagina list

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

 <ui:composition template="./../../WEB-INF/template.xhtml">

Colocar el titulo en la sección top

<ui:define name="top">
                <h1>
                    #{msg['tipovehiculo.list']}
                    <small> </small>
                </h1>

            </ui:define>

El contenido se define en la sección content

<ui:define name="content">

Agregar un <h:form> con rendered

 <h:form id="form" rendered="#{loginController.loggedIn}">

Agregar un panel group (como contenedor general) y messages (para desplegar los mensajes)

      <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

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

  <!--
                        body
                        -->
                        <div class="row form-body">

Crear un datatable

Asignación de atributos:

Propiedad	Descripción
value	asignado al DataModel
var	item
selectionMode	single
selection	tipovehiculoSelected
filteredValue	tipovehiculoFiltered
rowKey	item.idtipovehiculo
id	tipovehiculoDataTable
widgetVar	tipovehiculoDataTable

Agregar un datatable asociado a tipovehiculoList, indicamos selection a selectedTipovehiculo, el filteredValue con tipovehiculoFiltered

 <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

 <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

<p:ajax event="rowSelect" update=":form:tipovehiculoDetaill"
    oncomplete="PF('tipovehiculoDialog').show()" />

Las columnas que deseamos hacer búsquedas especificamos el filterBy, filterMatchMode.

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

 <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

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

 <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

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