miércoles, 21 de octubre de 2015

Primefaces JSF Bootstrap: Como cerrar una ventana modal con actionlistener

Cuando tienes una ventana modal abierta y requieres que al cerrar realice alguna acción en el backbean, con bootstrap de por medio la tarea no es directa debes de realizar un truco.

Intenté de varias maneras el cerrar la ventana pero no resultó, el método que se expone abajo es de realizar un llamado a otro botón.

si en el backbean se tiene

...
       private String message = "Lorem Ipsum is simply dummy text ...";  

public void  holamundo(){
message = "La hora es : " + new Date();
}

public String getMessage() {
return message;
}

public void setMessage(String message) {
this.message = message;
}

...

Requerimos el ejemplo de la entrada anterior sobre como llamar a una ventana modal y lo modificamos para efectos didácticos

El archivo donde mostraremos la vista y en el cual estará el modal será


<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" template="/view/template.xhtml">
<ui:define name="head">
<h:outputScript name="bootstrap/js/modal.js" />
</ui:define>

<ui:define name="implementation">
<h:form id="form">
<p:messages id="messages" closable="true" autoUpdate="true" />
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<p:commandButton value="Generar Saludo modal con JSF" oncomplete="$('#myModal').modal('show');">
</p:commandButton>
</div>
<div class="row">
<h:panelGrid columns="2" id="datos">
<h:outputLabel value="Mensaje del Modal:  " />
<h:outputText value="#{swfLoteController.message}" />
</h:panelGrid>


</div>
</div>

<p:outputPanel autoUpdate="true">
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">Cerrar</button>
<h4 class="modal-title">Hola mundo</h4>
</div>
<div class="modal-body">
<p>Cuerpito del modal coloca lo que deseas acá</p>
</div>

<div class="modal-footer centered">
<button id="cerrarModal" data-dismiss="modal" class="btn btn-theme04" type="button">Cerrar</button>
<p:commandButton onclick="$('#cerrarModal').trigger('click');" value="Llamar al backbean" actionListener="#{swfLoteController.holamundo}"
update=":form:datos">
</p:commandButton>
</div>
</div>
</div>
</div>
</p:outputPanel>
</h:form>
</ui:define>
</ui:composition> 


El detalle de la página anterior esta en que se hace un "artificio" de llamar al botón de cerrar de bootstrap ejecutando $('#cerrarModal').trigger('click'); mediante un botón de primefaces el cual a su vez llama a un método del backbean,




No hay comentarios:

Publicar un comentario