Creación del formulario del Detalle

— PEDRO DELGADO YARZA 2014/03/11 13:56

En este formulario tendremos una estructura similar a la expuesta en la guía Creación del formulario del Maestro con la diferencia que deberemos añadir campos de edición que, una vez hecho submit del formulario llamarán a los métodos para persistir los datos en base de datos.

El diseño del mismo quedaría de la siguiente manera:

<ui:define name="body">
		<h:form id="formularioFiltro">
			<p:panel id="homeInfoPanel">
				<f:facet name="header">
					<h:outputText
					value="#{manejadorAnuncios.modoEdicion ? messages['madet.panel.detanuncio'] : messages['madet.panel.nuevoanuncio']}"/>
				</f:facet>
				<h:panelGroup id="divFiltro" layout="block" style="float: left;">
					<h:panelGrid id="panelFiltro" columns="2" cellspacing="10px;">
						<!-- Nombre del anuncio -->
						<h:outputText value="#{messages['madet.nombre.anuncio']}"
							styleClass="nombreLabel" />
						<p:inputText id="nombreAnuncio"
							value="#{manejadorAnuncios.anuncioSeleccionado.nombre}">
							<p:ajax event="blur" listener="#{manejadorAnuncios.guardarAnuncio}" />
						</p:inputText>
						<!-- Descripcion del anuncio -->
						<h:outputText value="#{messages['madet.desc.anuncio']}"
							styleClass="nombreLabel" />
						<p:inputTextarea id="descAnuncio" style="width:400px;"
							autoResize="false"
							value="#{manejadorAnuncios.anuncioSeleccionado.descripcion}" />
						<!-- Fecha del anuncio -->
						<h:outputText value="#{messages['madet.fecha.anuncio']}"
							styleClass="nombreLabel" />
						<p:calendar id="fechaAnuncio" pattern="dd/MM/yyyy"
							value="#{manejadorAnuncios.anuncioSeleccionado.fechaPublicacion}"
							locale="es"
							disabled="#{manejadorAnuncios.anuncioSeleccionado.nombre != null}" />
					</h:panelGrid>
				</h:panelGroup>
				<div>
 
					<p:commandButton id="btnVolver" icon="ui-icon-arrowreturnthick-1-w"
						style="float:right;margin-bottom:10px;"
						action="#{manejadorAnuncios.volver}"
						value="#{messages['value.return']}" />
 
					<p:commandButton id="btnNuevoAnun" icon="ui-icon-document"
						style="float:right;margin-bottom:10px;margin-right:15px;"
						action="#{manejadorAnuncios.guardarAnuncio}"
						value="#{messages['value.save']}" />
				</div>
				<div style="clear: both" />
			</p:panel>
 
			<p:panel id="resultadosPanel"
				rendered="#{manejadorAnuncios.modoEdicion}">
 
				<f:facet name="header">#{messages['det.anun.coment']}</f:facet>
 
				<p:dataTable id="listaComentarios" var="comentario"
					value="#{manejadorAnuncios.buscadorComentarios}" paginator="true"
					rows="10" paginatorPosition="bottom"
					paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
					rowsPerPageTemplate="5,10,15,30"
					selection="#{manejadorAnuncios.comentarioSeleccionado}" lazy="true"
					emptyMessage="#{messages['datatable.sinresultados']}">
					<p:column headerText="#{messages['madet.num.head']}">
						<h:outputText value="#{comentario.numero}" />
					</p:column>
					<p:column headerText="#{messages['label.user']}">
						<h:outputText value="#{comentario.usuario}" />
					</p:column>
					<p:column headerText="#{messages['det.coment.text']}">
						<h:outputText value="#{comentario.texto}" />
					</p:column>
					<p:column headerText="#{messages['label.fecha']}">
						<h:outputText value="#{comentario.fecha}" />
					</p:column>
				</p:dataTable>
 
				<div class="actionButtons" style="padding-top: inherit;">
					<p:commandButton id="btnNuevoCom" icon="ui-icon-document"
						value="#{messages['det.coment.nuevo']}"
						action="#{manejadorAnuncios.creaNuevoComentario}"						
						ajax="true" update=":modalPanelForm"
						oncomplete="panelComentario.show();" />
				</div>					
 
				<div class="clearBoth"/>
			</p:panel>
		</h:form>
 
		<p:dialog id="modalDialog" header="#{messages['det.coment.nuevo']}"
			width="500" position="top" height="350" widgetVar="panelComentario"
			style="position:fixed;margin-top:10%;" modal="true" closable="true"
			appendTo="@(body)" resizable="false">
			<h:form id="modalPanelForm">
				<h:outputText value="#{messages['det.coment.text']}"
					styleClass="nombreLabel"
					style="margin-top:10px;margin-bottom:10px;" />
				<p:editor id="editComentario" width="400"
					value="#{manejadorAnuncios.comentarioSeleccionado.texto}"
					controls="bold italic underline strikethrough size font bullets numbering" />
				<div style="position: absolute; bottom: 10px; width: 95%;">
					<p:commandButton id="btnCancelComent"
						value="#{messages['value.cancel']}" style="float:right;"
						icon="ui-icon-close" ajax="false" onclick="panelComentario.hide();"
						 />
 
					<p:commandButton value="#{messages['value.save']}"
						id="btnGuardarComent" icon="ui-icon-disk" ajax="false"
						action="#{manejadorAnuncios.guardarComentario}"
						oncomplete="panelComentario.hide();"
						style="float:right;margin-right:15px;" update=":formularioFiltro"/>
				</div>
			</h:form>
		</p:dialog>
	</ui:define>

En este formulario tenemos un panel modal que nos permitirá añadir elementos al Detalle, de la misma manera nos permite editar datos del Maestro para posteriormente persistirlos dándole al método guardar que volverá a la pantalla del Maestro.

public String guardarAnuncio() {
	this.modoEdicion = false;
	servicioAnuncios.guardarAnuncio(this.anuncioSeleccionado);
	return "maestroAnuncio";
}

*.page.xml

<?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="maestroAnuncio">
			<redirect view-id="/paginas/maestroAnuncios.xhtml" />
		</rule>		
	</navigation>
 
</page>