Captulo4.

DataTable

Paraelmanejodetablasusaremoselcomponente<p:datatable>
UtilizaremoselCDIBeansEstatusDataController.java,quecrearemosparaelmanejode
lalistadeestatusqueserndesplegadosmedianteelcomponentedatatable.
UsaremosMtodo@PostConstructor
FILTRARYORDENARREGISTROS
DATATABLECONFORMULARIODEINSERCIN
DatatableconSeleccin,EdicinyEliminacindeRegistros

Paraelmanejodetablasusaremoselcomponente<p:datatable>

Utilizaremos el CDI Beans EstatusDataController.java , que crearemos para el

manejo de la lista de estatus que sern desplegados mediante el componente
datatable.

Usaremos Mtodo @PostConstructor

Seutilizaparainvocarmtodosalinicio,lopodemosusarparainvocarmedianteparmetros
deunCDIBeansodeSession.

Pasos:
1. CreamosunList<Estatus>
List<Estatus>estatusList

2. enelconstructorinicializamoselestatusList.

publicEstatusDataController(){
estatusList=newArrayList<>()
}

3. AjustarmtodogetEstatusList()

CambiamoselmtodogetEstatusList()

por

publicList<Estatus>getEstatusList(){
returnestatusFacade.getEstatusList()
}

publicList<Estatus>getEstatusList(){
returnestatusList
}

4. crearlosmtodossetparaestatusList,podemosutilizarelasistenteclicderecho
Insertcode>GetterandSetterseleccionarestatusList

publicvoidsetEstatusList(List<Estatus>estatusList){
this.estatusList=estatusList
}

Creamoselmtodoinitconlaanotacin@PostConstruct,queserainvocadolaprimeravez
quesecargaelCDIBeans.Seusaraotrometodoiniciar(),paraelcasoquedebaserinvocado
nuevamente.
@PostConstruct
2

publicvoidinit(){
iniciar()
}
corregimoslosimport

Crearelmtodoiniciar()paracargarregistros.
publicvoidiniciar(){
estatusList=estatusFacade.getEstatusList()
}

CrearotromtodoiniciarconparmetroString,esterecibirunparmetroparaestablecerel
filtrodelasentidadesamostrareneldatatable.
publicvoidiniciar(Stringvalue){
estatusList=estatusFacade.findByEsinicial(value)
}

Editarelmtododelete()yagregarlainvocacinalmtodoiniciar()demaneraquecargeel
listactualizado.
publicStringdelete(){
try{
estatusFacade.remove(selected)
iniciar()
JSFUtil.addSuccessMessage(rf.getMensajeArb("info.delete"))
}catch(Exceptione){
JSFUtil.addErrorMessage(e.getLocalizedMessage())
}
returnnull
}

Sideseamosfiltrarlosregistrosiniciales

paraobtenerlosfiltradosporelatributoesinicial=no
Enelmtodoinit()der,invocamoselmtodoiniciar(conelparmetrono),paraque
devuelvalosregistrosquecumplanesacondicin.
@PostConstruct
publicvoidinit(){
//iniciar()
iniciar("no")

}
Solosemuestranlosregistrosconesincial=no

Otraformaseriaparainvocarelmtodoantesdecargarlapgina,enelcdigoxhtml,enla
seccinmetadata,indicamoselparmetro,yelviewAction.
<f:metadata>
<f:viewParamname="id"value="#{estatusDataController.estatus.idestatus}"/>
<f:viewActionaction="#{estatusDataController.iniciar}"/>
</f:metadata>

FILTRARYORDENARREGISTROS

AgregamosunlistdelEntityEstatus
privateList<Estatus>filtered

ycreamoslosmtodosset/get

publicList<Estatus>getFiltered(){
returnfiltered
}

publicvoidsetFiltered(List<Estatus>filtered){
this.filtered=filtered
}
EnelcomponentedataTableagregarfilteredValue="#{estatusDataController.filtered}"
<p:dataTableid="datatable"paginator="true"rows="7"
value="#{estatusDataController.estatusList}"
var="item"
rowKey="#{item.idestatus}"
selectionMode="single"
selection="#{estatusDataController.selected}"
filteredValue="#{estatusDataController.filtered}"
>

EnlascolumnascolocamosparafiltrarporcadaatributofilterBy="#{item.idestatus}"ypara
ordenarsortBy="#{item.idestatus}"

<p:columnstyle="width:5%"filterBy="#{item.idestatus}"sortBy="#{item.idestatus}">
<f:facetname="header">
<h:outputTextvalue="#{msg.idestatus}"/>
</f:facet>
<h:outputTextvalue="#{item.idestatus}"/>
</p:column>

enelbrowser,semuestraelcomponenteparafiltraryordenar

Agregaremosundialogoconlapropiedadesvisible=true
<p:dialogvisible="true"header="#{app['form.estatuslist']}"closable="false"
showEffect="clip"hideEffect="fade"widgetVar="estatuslistDialog">

DATATABLE CON FORMULARIO DE INSERCIN

PrimeFacesofreceelcomponente<p:datatable>quepermitegenerarunatablaenla
pgina,conopcionescomobsquedas,filtros,seleccindefilas.
UsaremosNamedQueries,paraobtenerlalistadeEntitysquecumplanloscriterios
deseados,demaneraquepodamosrealizaroperacionesdeedicinoeliminacinsobrelos
mismos.

SiobservamosenelentityEstatus,podemosverlasdefinicionesyBeanValidationcomo
mostramosacontinuacin.

Formulariodeestatusinsert.xthml
6

Ubicarseenelformularioestatusinsert.xhtmlantesde</h:form>y

darclicderechoyseleccionarinsertcode

seleccionarJSFDataTableFromEntity

EnelcuadrodedilogoquesepresentaseleccionamosEstatuscomoEntityycomo
ManagedBeanPropertyestatusDataControllerestatusList

Elidegeneraelsiguientecdigo
<h:form>
<h1><h:outputTextvalue="List"/></h1>
<h:dataTablevalue="#{estatusDataController.estatusList}"var="item">
7

<h:column>
<f:facetname="header">
<h:outputTextvalue="Idestatus"/>
</f:facet>
<h:outputTextvalue="#{item.idestatus}"/>
</h:column>
<h:column>
<f:facetname="header">
<h:outputTextvalue="Estatus"/>
</f:facet>
<h:outputTextvalue="#{item.estatus}"/>
</h:column>
<h:column>
<f:facetname="header">
<h:outputTextvalue="Esinicial"/>
</f:facet>
<h:outputTextvalue="#{item.esinicial}"/>
</h:column>
</h:dataTable>
</h:form>

Quitamoselcomponente<h:form>y</h:form>deldatatabledemaneraquenicamente
existaelformprincipal.Comosemuestraacontinuacinenelbrowser,tendremoslos
registrosdeestatus

Cambiaremoslasetiquetas<h:datatable>por<p:datatable>y<h:column>por<p:column>
parausarloscomponentesprimefacesyseusarnlasetiquetasdelosarchivosde
propiedadesenlosheaderdecadacolumna.

Estopermitirquealcambiarelidiomaelencabezadodecadacolumnacambie
automticamente.

<f:facetname="header">
<h:outputTextvalue="Idestatus"/>
</f:facet>
por
<f:facetname="header">
<h:outputTextvalue="#{msg.idestatus}"/>
</f:facet>

Colocamoselid=datatable,paginacindelatablayelnmerodefilas
<p:dataTableid="datatable"paginator="true"rows="7"
value="#{estatusDataController.estatusList}"var="item">

Despuesdeloscambiosquedariadelasiguientemanera.

Paraactualizareldatatablealagregarunregistro,enelcommandButtonqueutilizamospara
guardar,agregamosalupdateelcomponentedatatable,deestamanerasemostrarenel
datatableloscambiossinrenderizarelformulariocompleto.
<p:commandButtonvalue="#{app['boton.save']}"update="panel,growl,datatable"
action="#{estatusDataController.save()}"/>


Alcrearunnuevoestatusesteautomticamenteactualizalatabla

Removemoselcdigoqueutilizamosdeldatatabledelformularioestatusinsert.xhtml,
yaquecrearemosunapginaxhtmlqueseencargarademostrar,editaryeliminarlos
registros.
Yeliminamosdel<p:commandButtonenelmtodoupdatelaactualizacindatatable.

10

Datatable con Seleccin, Edicin y Eliminacin de

Registros
Aqumostraremoscomocrearunapginaquepermitemostrarlosregistros,realizar
bsquedaseinvocarundilogopararealizarlaedicindelosregistros.

Creamosunapginanuevallamadaestatuslist.xhtmleneldirectorio/page/estatus
AhoracreamosunFaceletsTemplateClient
DesdemenFile,seleccioneNew
enCategories,seleccioneJavaServerFaces
enFileTypes,seleccioneFaceletsTemplateClient
EnFileName:estatuslist
Foldercolocamos/page/estatus/
Templateseleccionamostemplate.xhtml

Segeneraelcdigodelapginaycolocamosencomentariotop,bottom,left<!>para
queestetomeelqueesteutiliceelqueestaeneltemplate,yencenterescribimos

Editamosestatuslist.xhtml,nosubicamosenlaseccincentery

darclicderechoyseleccionarinsertcode,seleccionarJSFDataTableFromEntity

SeleccionarEntityEstatusyelCDIPropertyestatusDataControllerpropiedadestatusList

11

Colocarelidparaelform

<h:formid="form">

Enelcdigogenerado,nosubicamosen<h:datatable>y<h:column>ylosreemplazamos
por<p:datatable>y<p:column>parautilizarloscomponentesprimefaces.
Seleccionarp=http://primefaces.org/uilibrarydeclaration

ModificamoselcomponentedataTableoriginal,indicandoelnmerodefilas(rows),value
indicamosellistdeobjetos,vardefinelavariableparaindicarloselementos,selectionMode
defineelmododeseleccinyselectionasociaalentitylafilaseleccionada.

<p:dataTableid="datatable"paginator="true"
rows="7"value="#{estatusDataController.estatusList}"var="item"
rowKey="#{item.idestatus}"
selectionMode="single"
selection="#{estatusDataController.selected}"
>

Ejecutamoselproyecto,podemosverlosregistroseneldatatable

12

Agregamoseleventoajaxoncomplete()paramostrarundilogoconlafilaseleccionada,
yactualizaremosmedianteupdateelgrowlyelpanelquecontendrelentityseleccionado
delafila.
Paramostrareldialogousamosoncomplete="PF('editwidgetVar').show()"/>.

Sideseamosocultarlousamosoncomplete="PF('editwidgetVar').hide()"/>

Codigodeldatatable
<h1><h:outputTextvalue="#{app['form.estatuslist']}"/></h1>
<p:dataTableid="datatable"paginator="true"
rows="7"value="#{estatusDataController.estatusList}"var="item"
rowKey="#{item.idestatus}"
selectionMode="single"
selection="#{estatusDataController.selected}"
>
<p:ajaxevent="rowSelect"
oncomplete="PF('editwidgetVar').show()"
update=":form:growl,:form:displayEdit"/>

Nosubicamosdebajode</p:dataTable>,colocamoselcomponentedialogyunpanelGrid.
LapropiedadwidgetVarseusarparaasignarunnombrealcomponentequeserlocalizado
mediantePrimefacesFrameworkPF().

<p:dialogid="editDialog"header="#{app['dialog.edit']}"widgetVar="editwidgetVar"
resizable="false"height="235"width="550"showEffect="clip"hideEffect="fold">

<h:panelGridid="displayEdit"columns="2"title="#{app['dialog.edit']}">
13

</h:panelGrid>
</p:dialog>

Ubicarsedentrodelpanelgrid<h:panelGridid="displayEdit"ydarclicderechoInsertCode
seleccionarJSFFormFromEntity

AhoraseleccionarelEntityEstatusyelManagedBeanPropertyselecionarselected

segeneraelcdigo,ydebemoseliminarlasetiquetas<h:form>y</h:form>yaquetenemos
unformularioprincipal.

Eliminar<h1><h:outputTextvalue="Create/Edit"/></h1>
Ycolocamoslasetiquetasdelosproperties,eltitleyrequiredMessageparaloscomponentes
utilizados.

Cambiamosel<h:inputTextid="esinicial"/>,porelselectOneMenusimilaralqueusamos
enelformularioinsert.

<p:selectOneMenuid="esinicial"value="#{estatusDataController.selected.esinicial}"
required="true"requiredMessage="#{msg.esinicial}#{app['info.notnull']}">
<f:selectItemitemLabel="#{app['boton.yes']}"itemValue="si"/>
<f:selectItemitemLabel="#{app['boton.no']}"itemValue="no"/>
</p:selectOneMenu>

14

Creamoslaseccin<f:facetname="footer">delpanelGridycolocamoslosbotonespara
editar,eliminar,cerrar.Elbotneliminarmostrarundilogosolicitandolaconfirmacindesi
eliminamosonoelregistro.
<f:facetname="footer">
<p:commandButtonid="editButton"value="#{app['boton.update']}"
update=":form:growl,:form:datatable,:form:displayEdit"
actionListener="#{estatusDataController.edit()}"
oncomplete="PF('editwidgetVar').hide()"/>
<p:commandButtonid="deleteButton"value="#{app['boton.delete']}"
title="#{app['boton.delete']}"onclick="PF('confirmationwidgetVar').show()"type="button"
icon="uiicontrash"/>
<p:commandButtonid="declineButton"value="#{app['boton.cerrar']}"
onclick="PF('editwidgetVar').hide()"type="button"/>
</f:facet>

Agregarantesdel</h:form>elgrowlyelcomponenteparamensajes
<p:growlid="growl"/>
<p:messagesautoUpdate="true"/>

Enelbrowseraldarclicenlafilasemuestraelregistroconlasopcionesde
editar/eliminar

Alpresionarelbotoneliminarsemuestraeldilogoparaconfirmar

15

Paraajustareltamaodelascolumnaspodemoshacerlodedosmaneras
<p:columnstyle="width:20%">
o
<p:columnstyle="width:5%textalign:center">silodeseamoscentrado.

16

Cdigocompletoestatuslist.xhtml

<?xmlversion='1.0'encoding='UTF8'?>
<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">

<body>

<ui:compositiontemplate="./../../template.xhtml">
<!
<ui:definename="top">
top
</ui:define>

<ui:definename="bottom">
bottom
</ui:define>

<ui:definename="left">
left
</ui:define>
>
17

<ui:definename="center">
<f:view>
<h:formid="form">
<p:dialogvisible="true"header="#{app['form.estatuslist']}"closable="false"
showEffect="clip"hideEffect="fade"widgetVar="estatuslistDialog">

<h1><h:outputTextvalue="List"/></h1>
<p:dataTableid="datatable"paginator="true"
rows="7"value="#{estatusDataController.estatusList}"var="item"
rowKey="#{item.idestatus}"
selectionMode="single"
selection="#{estatusDataController.selected}"
filteredValue="#{estatusDataController.filtered}"
>
<p:ajaxevent="rowSelect"
oncomplete="PF('editwidgetVar').show()"
update=":form:growl,:form:displayEdit"/>
<p:columnstyle="width:20%"filterBy="#{item.idestatus}"
sortBy="#{item.idestatus}">
<f:facetname="header">
<h:outputTextvalue="#{msg.idestatus}"/>
</f:facet>
<h:outputTextvalue="#{item.idestatus}"/>
</p:column>
<p:columnfilterBy="#{item.estatus}"sortBy="#{item.estatus}">
<f:facetname="header">
<h:outputTextvalue="#{msg.estatus}"/>
</f:facet>
<h:outputTextvalue="#{item.estatus}"/>
</p:column>
<p:columnfilterBy="#{item.esinicial}"sortBy="#{item.esinicial}">
<f:facetname="header">
<h:outputTextvalue="#{msg.esinicial}"/>
</f:facet>
<h:outputTextvalue="#{item.esinicial}"/>
</p:column>

</p:dataTable>
</p:dialog>

<p:dialogid="editDialog"header="#{app['dialog.edit']}"
widgetVar="editwidgetVar"
resizable="false"height="235"width="550"showEffect="clip"
18

hideEffect="fold">
<h:panelGridid="displayEdit"columns="2"title="#{app['dialog.edit']}">

<h1><h:outputTextvalue="Create/Edit"/></h1>
<h:panelGridcolumns="2">
<h:outputLabelvalue="Idestatus:"for="idestatus"/>
<h:inputTextid="idestatus"
value="#{estatusDataController.selected.idestatus}"title="Idestatus"required="true"
requiredMessage="TheIdestatusfieldisrequired."/>
<h:outputLabelvalue="Estatus:"for="estatus"/>
<h:inputTextid="estatus"
value="#{estatusDataController.selected.estatus}"title="Estatus"required="true"
requiredMessage="TheEstatusfieldisrequired."/>
<h:outputLabelvalue="Esinicial:"for="esinicial"/>
<p:selectOneMenuid="esinicial"
value="#{estatusDataController.selected.esinicial}"
required="true"
requiredMessage="#{msg.esinicial}#{app['info.notnull']}">
<f:selectItemitemLabel="#{app['boton.yes']}"itemValue="si"/>
<f:selectItemitemLabel="#{app['boton.no']}"itemValue="no"/>
</p:selectOneMenu>
<f:facetname="footer">
<p:commandButtonid="editButton"value="#{app['boton.update']}"
update=":form:growl,:form:datatable,:form:displayEdit"
actionListener="#{estatusDataController.edit()}"
oncomplete="PF('editwidgetVar').hide()"/>
<p:commandButtonid="deleteButton"value="#{app['boton.delete']}"
title="#{app['boton.delete']}"
onclick="PF('confirmationwidgetVar').show()"type="button"
icon="ui
icon
trash"/>
<p:commandButtonid="declineButton"value="#{app['boton.cerrar']}"
onclick="PF('editwidgetVar').hide()"type="button"/>
</f:facet>

</h:panelGrid>

</h:panelGrid>
</p:dialog>
<p:dialogid="confirmDialog"modal="false"header="#{app['boton.delete']}"
widgetVar="confirmationwidgetVar">
<p:commandButtonid="removeButton"value="#{app['boton.yes']}"
19

update=":form:displayEdit,:form:growl,:form:datatable"
oncomplete="PF('confirmationwidgetVar').hide(),
PF('editwidgetVar').hide()"
actionListener="#{estatusDataController.delete()}"/>
<p:commandButtonid="cancelButton"value="#{app['boton.no']}"
onclick="PF('confirmationwidgetVar').hide()"type="button"/>
</p:dialog>
<p:growlid="growl"/>
<p:messagesautoUpdate="true"/>
</h:form>

</f:view>

</ui:define>

</ui:composition>

</body>
</html>

20

CrearunCDIBeansparagestionarlaslistdeentityparamostrarenlaspginas
DesdemenFile,seleccioneNew
enCategories,seleccioneJavaServerFaces
enFileTypes,seleccioneJSFManagedBeans
ClassName:EstatusDataController
Packagecom.avbravo.scrumweb.controller
Scope:View

Cambiar

Reemplazar

@ManagedBeans

@Named

importjavax.faces.bean.ManagedBean

importjavax.inject.Named

importjavax.faces.bean.ViewScoped

importjavax.faces.view.ViewScoped

Implementamosserializable,
inyectamosmediante@InjectEstatusFacade,ResourceFiles.

Agregamosunobjetodetipoestatusqueseutilizarparahacerreferenciaalentity
21

seleccionadodeldatatable.
Estatusselected=newEstatus()
generamoslosmtodosget/set,paraellohacemosclicderechoInsertCodeyseleccionar
GetterandSetter

Seleccionarselected:Estatus,talcomoapareceenlaimagen

elIDEgeneralosmtodos

publicEstatusgetSelected(){
returnselected
}

publicvoidsetSelected(Estatusselected){
this.selected=selected
}

Ademssecrearelmtodoedit()paraactualizarregistrosydelete()paraeliminarlo.

22

CrearmtodogetEstatusList()paraquedevuelvaunlistdeestatus
publicList<Estatus>getEstatusList(){
returnestatusFacade.getEstatusList()
}

CdigodeEstatusDataController.java
/*
*Tochangethislicenseheader,chooseLicenseHeadersinProjectProperties.
*Tochangethistemplatefile,chooseTools|Templates
*andopenthetemplateintheeditor.
*/
packagecom.avbravo.scrumweb.controller

importcom.avbravo.scrumweb.Estatus
importcom.avbravo.scrumweb.ejb.EstatusFacade
importcom.avbravo.scrumweb.generales.JSFUtil
importcom.avbravo.scrumweb.generales.ResourcesFiles
importjava.io.Serializable
importjava.util.List
importjavax.annotation.PostConstruct
importjavax.faces.view.ViewScoped
importjavax.inject.Inject
importjavax.inject.Named

/**
*
*@authoravbravo
*/
@Named
@ViewScoped
publicclassEstatusDataControllerimplementsSerializable{
23


privatestaticfinallongserialVersionUID=1L
@Inject
EstatusFacadeestatusFacade
@Inject
ResourcesFilesrf

Estatusselected=newEstatus()

List<Estatus>filtered
List<Estatus>estatusList

publicList<Estatus>getFiltered(){
returnfiltered
}

publicvoidsetFiltered(List<Estatus>filtered){
this.filtered=filtered
}

publicEstatusgetSelected(){
returnselected
}

publicvoidsetSelected(Estatusselected){
this.selected=selected
}

/**
*CreatesanewinstanceofEstatusDataController
*/
publicEstatusDataController(){
}

publicvoidsetEstatusList(List<Estatus>estatusList){
this.estatusList=estatusList
}

publicList<Estatus>getEstatusList(){
//returnestatusFacade.getEstatusList()
returnestatusList
}

24

@PostConstruct
publicvoidinit(){
iniciar()
}

publicvoidiniciar(){
estatusList=estatusFacade.getEstatusList()
}

publicvoidiniciar(Stringvalue){
estatusList=estatusFacade.findByEsinicial(value)
}

publicStringedit(){
try{
estatusFacade.edit(selected)
JSFUtil.addSuccessMessage(rf.getMensajeArb("info.update"))
}catch(Exceptione){
JSFUtil.addErrorMessage(e.getLocalizedMessage())
}
returnnull
}

publicStringdelete(){
try{
estatusFacade.remove(selected)
JSFUtil.addSuccessMessage(rf.getMensajeArb("info.delete"))
iniciar()

}catch(Exceptione){
JSFUtil.addErrorMessage(e.getLocalizedMessage())
}
returnnull
}

25