Creación del formulario del Maestro

— 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:

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

1. value: Hace referencia a la clase Java creada junto al maestro (LazyAnuncioDataModel) que gestionará los datos de la tabla.
2. paginator: Habilita la paginación.
3. rows: Filas mostradas por defecto
4. paginatorPosition: Posición donde queremos que aparezcan los elementos de paginación: top, bottom, both.
5. paginatorTemplate: Plantilla que define qué elementos de paginación utilizaremos.
6. rowsPerPageTemplate: Selector de filas que queremos ver. Se selecciona inicialmente las indicadas en la propiedad rows pero cambiando el selector veremos más o menos.
7. lazy: Esencial para que la carga de la tabla sea dinámica.
8. emptyMessage: Mensaje que queremos mostrar si no hay resultados.

Adicionalmente a la tabla le hemos incorporado un elemento llamado exportador que permite exportar a PDF, XML, XLS, CSV los valores mostrados en la tabla. Podemos decidir si todos los registros o sólo los que estamos viendo en pantalla. Al mismo tiempo podemos indicar si no queremos que alguna columna se vea, como es el caso de la última, para ello hacemos uso de la propiedad de <p:column> exportable=“false”.

El componente exportador quedaría así:

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

1. type: Indica a qué formato exportaremos: XML, XSL, PDF, CSV.
2. target: Tabla de la cual cogeremos los datos.
3. fileName: Nombre del fichero que se generará.
4. pageOnly: Exportar sólo los datos visibles (la página actual) o todos.

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.

<p:commandButton id="btnEditar" icon="ui-icon-clipboard" title="Detalle del anuncio"
	action="#{manejadorAnuncios.editarDetalleAnuncio(_anuncio)}" />

Esta acción lanzará el siguiente proceso Java:

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

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