— PEDRO DELGADO YARZA 2014/03/11 13:01
A la hora de crear el formulario del maestro debemos tener en cuenta que no sólo debemos crear la pantalla en sí, sino la lógica necesaria para la navegación a un elemento del detalle.
En la parte íntegra del Maestro añadiremos los campos necesarios para la edición de los valores del mismo y una tabla que cargará el detalle cuya estructura será la siguiente:
| Bloque de código | ||
|---|---|---|
| ||
.... <p:dataTable id="listaAnuncios" var="_anuncio" value="#{manejadorAnuncios.buscadorAnuncios}" paginator="true" rows="10" paginatorPosition="bottom" sortBy="fechaPublicacion" sortOrder="DESCENDING" paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}" rowsPerPageTemplate="5,10,15,30" lazy="true" emptyMessage="#{messages['datatable.sinresultados']}"> <p:column sortBy="id"> <f:facet name="header"> <h:outputText value="#{messages['madet.num.head']}" /> </f: |
...
facet> <h:outputText value="#{_anuncio.id}" /> </p: |
...
column> <p:column sortBy="nombre"> <f:facet name="header"> <h:outputText value="#{messages['madet.nombre.head']}" /> </f: |
...
facet> <h:outputText value="#{_anuncio.nombre}" /> </p: |
...
column> <p:column sortBy="descripcion"> <f:facet name="header"> <h:outputText value="#{messages['madet.desc.head']}" /> </f: |
...
facet> <h:outputText value="#{_anuncio.descripcion}" /> </p: |
...
column> <p:column sortBy="fechaPublicacion"> <f:facet name="header"> <h:outputText value="#{messages['madet.fecha.head']}" /> </f: |
...
facet> <h:outputText value="#{_anuncio.fechaPublicacion}" /> </p: |
...
column> <p:column headerText="#{messages['madet.head.acciones']}" exportable="false"> <div style="text-align:center;"> <p:commandButton id="btnEditar" icon="ui-icon-clipboard" title="Detalle del anuncio" action="#{manejadorAnuncios.editarDetalleAnuncio(_anuncio)}" /> </ |
...
div> </p: |
...
column> </p: |
...
dataTable> .... |
Las propiedades a destacar de ta tabla son las siguientes:
...
El componente exportador quedaría así:
| Bloque de código | ||
|---|---|---|
| ||
<h:panelGrid columns="3" style="width:100%;"> <!-- Exportador XML --> <h:commandLink style="float:right;"> <p:graphicImage value="/resources/img/xml.png" width="32" height="32" /> <p:dataExporter type="xml" target="listaAnuncios" fileName="listado" pageOnly="true" /> </h: |
...
commandLink> <!-- Exportador XLS --> <h:commandLink style="float:right;margin-right:10px;"> <p:graphicImage value="/resources/img/xls.png" width="32" height="32" /> <p:dataExporter type="xls" target="listaAnuncios" fileName="listado" pageOnly="true" /> </h: |
...
commandLink> <!-- Exportador PDF --> <h:commandLink style="float:right;margin-right:10px;"> <p:graphicImage value="/resources/img/pdf.png" width="32" height="32" /> <p:dataExporter type="pdf" target="listaAnuncios" fileName="listado" pageOnly="true" /> </h: |
...
commandLink> </h: |
...
panelGrid> |
Las propiedades más importantes de <p:dataExporter> son:
...
Una vez tenemos listo el formulario que define la vista del maestro, debemos preparar la navegación hacia el formulario del detalle. Para ello debemos definir una manera de navegar en la pantalla del maestro, en nuestro caso hemos dispuesto un <p:commandButton que nos lanzará la acción que desencadene la navegación.
| Bloque de código | ||
|---|---|---|
| ||
<p:commandButton id="btnEditar" icon="ui-icon-clipboard" title="Detalle del anuncio" action="#{manejadorAnuncios.editarDetalleAnuncio(_anuncio)}" /> |
Esta acción lanzará el siguiente proceso Java:
| Bloque de código | ||
|---|---|---|
| ||
public String editarDetalleAnuncio(Anuncio anuncio) { this.anuncioSeleccionado = anuncio; this.modoEdicion = true; log.debug("Obteniendo comentarios del anuncio: #0", anuncio.getId()); |
...
HashMap<String, |
...
Object> parametros = new |
...
HashMap<String, |
...
Object>(); parametros.put("anuncioId", anuncio.getId()); buscadorComentarios.setParametros(parametros); return "crearEditarAnuncio"; } |
Este código asigna del listado el elemento que hemos seleccionado al bean de respaldo, al mismo tiempo inicializa el buscador de su detalle para cargarlo y devuelve un string que desencandenará la navegación.
Por último para que este proceso se realice correctamente debemos crear un fichero: *.page.xml donde definiremos la navegación
| Bloque de código |
|---|
<?xml version="1.0" encoding="ISO-8859-1"?> <page xmlns="http://jboss.org/schema/seam/pages" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://jboss.org/schema/seam/pages http://jboss.org/schema/seam/pages-2.3.xsd"> |
...
<begin-conversation join="true" flush-mode="MANUAL" /> |
...
<navigation> <rule if-outcome="crearEditarAnuncio"> <redirect view-id="/paginas/crearEditarAnuncio.xhtml" /> </ |
...
rule> </ |
...
navigation> </ |
...
page> |
Tras estos pasos el flujo de aplicación irá a la pantalla de detalle (en modo edición), donde podremos editar nuestro bean y acceder al listado de elementos que contiene.
...
.
...