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.