Tips JSF

un par de tips de java server faces (Myfaces, facelets, richfaces, spring webflow a4j)...

Primero, para usar una mascara de entrada en un input text podemos consultar las super sencillas instrucciones de http://ahoehma.wordpress.com/2008/08/19/masked-input-with-richfaces/, solo tenemos que usar un poco de javascript y un control a4j. Ultra sencillo y muy util.

Segundo, trabajando en Spring Webflow 2 con Myfaces (implementacion JSF) necesitamos presentar un cuadro de confirmacion cuando pulsamos un t:commandLink o un t:commandButton, despues de consultar los foros nos encontramos con un par de soluciones que no aplicaban para nuestro caso, asi que aqui va la aproximacion de Alephsa.

<h:form>

  <s:modalDialog dialogId="idDialogo" dialogVar="idDialogo"  

    dialogTitle="titulo" closeButton="true" hiderIds="cancelModal,acceptModal"

    dialogAttr="bgColor='white' bgOpacity='0.4' toggle='fade' toggleDuration='250'">

  

       <t:outputLabel value="Seguro que desea dominar el mundo?"/>

       <t:commandButton id="cancelModal" forceId="true" value="No, mejor no"/>

       <t:commandButton id="acceptModal" forceId="true" value="Yes Sir" onclick="sendForm();"/>



      <script>

      <!-- aqui va el codigo de envio de funcion-->

      </script>

   </s:modalDialog>



   <t:commandLink action="accionSWF" id="btnSendForm" forceId="true" style="visibility: hidden; width: 0px;">

           <f:param name="idMundo" value="Trantor"/>

   </t:commandLink>

   <h:outputLink onclick="idDialogo.show();" value="#">Conquistar Trantor!!!!

   </h:outputLink>

</h:form>


Lo que hacemos es crear un cuadro modal con un mensaje y dos botones que al ser pulsados cierran el modal, sin embargo el boton aceptar llama tambien a la funcion sendForm() para realizar el envio. Luego definimos un commandLink con un id establecido (con la propiedad forceId="true" para que nuestro js lo pueda encontrar facilmente) que contiene un parametro (tambien sirve para un commandButton en caso de no necesitar parametros a la hora de enviar el formulario) y finalmente un outputLink que solo llama a la funcion show() del modalDialog que habiamos definido previamente. Ahora van las funciones js de envio del formulario:



function sendForm(){

  var evt = document.createEvent("MouseEvents");

  evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false,false, false, false, 0, null);



  document.getElementById("btnSendForm").dispatchEvent(evt);

}


Esta funcion sirve para enviar el formulario simulando el click del commandLink (en el commandButton no podemos usar parametros), pero si tenemos un commandButton el js adecuado es mucho mas simple:


function sendForm(){document.getElementById("btnSendForm").click();}


Este codigo ha sido probado en SWF 2.0.3, Myfaces 1.2 y Facelets 1.1.14, claro en alephsa hicimos un control personalizado de facelets, pero eso es harina de otro costal.