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,

Primefaces, BootStrap: Como llamar a una ventana modal

Uno de los elementos que hace que me incline para bootstrap son sus ventanas modales y el uso que le puedo dar son variados, en comparación con las ventanas modales de primefaces(no deseo realizar una comparativa simplemente por ahora bootstrap responde mis requerimientos, posiblemente primefaces lo resuelve pero al momento no lo conozco)

Para el uso de las ventanas modal, requieres un javascript

modal.js


/* ========================================================================
 * Bootstrap: modal.js v3.3.5
 * http://getbootstrap.com/javascript/#modals
 * ========================================================================
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * ======================================================================== */

Para que funcione se requiere el uso outputPanel,  que nos proporciona primefaces, el cual envuelve a nuestra ventana modal para que el mismo lo renderice, ahora si deseas que actualice el valor dentro de la ventana puedes optar por asignar el valor de  autoUpdate="true" u otro método puede ser que optes por "process"

En nuestro backbean tenemos :

...

private String saludo =""; 

public void mensajito(){

saludo = "Saludos bitacoritaswil!!!" + new Date();

}

public String getSaludo() {

return saludo;

}

public void setSaludo(String saludo) {

this.saludo = saludo;

}

...

el diseño de nuestro formulario 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="/WEB-INF/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-heading">

<i class="fa fa-angle-right"></i> Criterios de búsqueda

</div>

<div class="panel-body">

<div class="row">

<div class="form-group has-success col-md-4">

<p:commandButton value="Generar Saludo modal con JSF" oncomplete="$('#myModal').modal('show');" title="Ver campos" 

actionListener="#{backbeanController.mensajito}">

</p:commandButton>

</div>

</div>

</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">Datos Registro</h4>

</div>

<div class="modal-body">

<h:panelGrid columns="2">

<h:outputLabel value="Mensaje:" />

<h:outputText value="#{backbeanController.saludo}" />

</h:panelGrid>

</div>

<div class="modal-footer centered">

<button data-dismiss="modal" class="btn" type="button">Cerrar</button>

</div>

</div>

</div>

</div>

</p:outputPanel>

</h:form>

</ui:define>

</ui:composition>

Puntos que debes tomar atención:

• el template: que fue desarrollado en la entrada anterior template 
• el tag HEAD el mismo que esta definido en la cabecera de nuestro template
• la inclusión de la librería modal.js

Eso es todo amigos ... enjoy!!!

Si te gustó (mejor dicho si te sirvió) la entrada no te olvides de comentar.

Primefaces, JSF y Bootstrap (I): El template

Primefaces ofrece varios objetos que facilitan el manejo de datos, pero creo que ahora le falta algunos detalles que a la hora de desarrollar  se hacen complicados algunos ejemplos son:
* las ventanas emergentes (modales) cuando el contenido es grande ya tienes que pensar en otra solución
* las tablas en su distribución de columnas no se estrechan de manera automática debes asignar un ancho al misma o nuevamente pensar en otra solución adicional (CSS u otros)

bootstrap respecto a los puntos anteriores es más flexible y ofrece una solución más llamativa

Empecemos ...

No te olvides que los recursos de bootstrap, hojas de estilo e imágenes deben de ir en la carpeta "resources"

Archivo Template: WEB-INF/template.xhtml

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="shortcut icon" type="image/png" href="#{request.contextPath}/resources/images/favicon.png" />
<title>MI PAGINITA</title>
</f:facet>
<f:facet name="middle">
<h:outputStylesheet name="bootstrap/css/bootstrap.css" />
// acá va tu hoja de estilos personalizada
<h:outputStylesheet name="assets/css/style.css" />
<h:outputScript name="vendors/jquery-1.9.1.js" />
<h:outputScript name="bootstrap/js/bootstrap.js" />
</f:facet>
<f:facet name="last">
// este tag es para agregar algunos archivos de jquery u hoja de estilos CSS en los contenidos del template (importante)
<ui:insert name="head" />
</f:facet>

</h:head>

<h:body>
<section id="container">
<ui:include src="header.xhtml" />
<ui:include src="content.xhtml" />
</section>
<ui:insert name="status">
<p:ajaxStatus style="width:64px;height:64px;position:fixed;right:5px;bottom:5px">
<f:facet name="start">
<p:graphicImage name="images/ajax-loader.gif" />
</f:facet>

<f:facet name="complete">
<h:outputText value="" />
</f:facet>
</p:ajaxStatus>
</ui:insert>
</h:body>
</html>

algunos detalles que debemos rescatar es sobre lo anterior:
* assets/css/style.css : es tu hoja de estilos que importas para darle mayor detalle a tu vista
* por ahora en tu plantilla principal no cargues demasiados CSS y JS para no recargar el resto de páginas que quizás no requieran, los archivos que importes lo harás en el tag de "head"

Archivo: "WEB-INF/header.xhtml"

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:c3="http://java.sun.com/jsp/jstl/core" xmlns:ui="http://java.sun.com/jsf/facelets">


<header class="header black-bg">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
<a href="#{request.contextPath}/index.xhtml" class="logo"><b>PEJTU</b></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="#{request.contextPath}/view/pagina_dash.xhtml">Principal</a></li>
<li><a href="#{request.contextPath}/view/help.xhtml">Ayuda</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<c3:if test="${request.userPrincipal == null}">
<li><a href="${request.contextPath}/login.xhtml">Login</a></li>
</c3:if>
<c3:if test="${request.userPrincipal != null}">
<li class="dropdown"><a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-user"></i> <h:outputText
value="#{visitBean.usuario.usrLogin}" /><i class="caret"></i>
</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="${request.contextPath}/view/secadmin/cambiar_passw.xhtml">Cambiar Password</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="${request.contextPath}/logout">Logout</a></li>
</ul></li>
</c3:if>
</ul>

</div>
</div>
</header>
</ui:composition>

Del anterior:
* el encabezado es un template básico
* Existen varios templates muy llamativos para decorar el encabezado, el que se muestra es de acuerdo al archivo assets/css/style.css que se declaró en el template principal

Archivo: "WEB-INF/content.xhtml"

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

<section id="main-content" style="margin-left: 0px;">
<section class="wrapper site-min-height">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-12">
<ui:insert name="submenuleft" />
</div>
<div class="col-lg-10 col-md-10 col-sm-12">
<ui:insert name="implementation">
</ui:insert>
</div>
</div>
</section>

</section>
</ui:composition>

El comportamiento que deseaba era que el menú izquierdo se apile a la parte superior del contenido, ahora existen varios que prefieren
En el  <ui:insert name="implementation"> insertarás el contenido de cada página que desarrolles
En el <ui:insert name="submenuleft" /> insertarás el menú que desees a continuación copio un ejemplo del mismo pero ya agregando objetos Primefaces

Archivo: "pages/menuizq.xhmt"

<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="/WEB-INF/template.xhtml">


<ui:define name="submenuleft">
<h:form id="formopt">
<div class="col-lg-12 col-md-12 col-sm-4">
<p:panelMenu>
<p:submenu label="Operaciones">
<p:menuitem value="Operación 1"
actionListener="#" />
...
</p:submenu>
</p:panelMenu>
</div>
<div class="col-lg-12 col-md-12 col-sm-4">
<p:panelMenu>
<p:submenu label="Administración">
<p:menuitem value="Personas"
actionListener="#" />
</p:submenu>
</p:panelMenu>
</div>
<div class="col-lg-12 col-md-12 col-sm-4">
<p:panelMenu>
<p:submenu label="Otros">
<p:menuitem value="Tipos de mensaje"
actionListener="#" />
</p:submenu>
</p:panelMenu>
</div>

</h:form>
</ui:define> 
</ui:composition>