Mostrar/ocultar formulario JSF2 usando selectBooleanCheckbox

Question

Estoy usando JSF2 y Java para crear una aplicación web. Quiero construir una forma como la de la imagen siguiente:

Cuando alguien desactiva la casilla de verificación de la forma debe desaparecer:

Here es un ejemplo con GWT.

---

Hasta ahora, He intentado algunas cosas con la etiqueta <f:ajax> y un PropertyActionListener en el managedBean pero no funcionó. ¿Alguien puede darme un ejemplo o al menos algunos consejos para lograr mi objetivo? Realmente agradecería

Answer 1

Uso <f:ajax event="click" render="@form"> en la casilla y dar el componente que contiene los elementos del formulario un atributo rendered que depende de la casilla de verificación de estado. No es necesario otro desorden de código JS.

<h:form> 
    <fieldset> 
     <legend> 
      <h:selectBooleanCheckbox binding="#{showUserInfo}"> 
       <f:ajax event="click" render="@form" /> 
      </h:selectBooleanCheckbox> 
      <h:outputText value="User information" /> 
     </legend> 
     <h:panelGroup rendered="#{not empty showUserInfo.value and showUserInfo.value}"> 
      <p> 
       <h:outputLabel for="firstName" value="First name:" /> 
       <h:inputText id="firstName" value="#{bean.user.firstName}" /> 
      </p> 
     </h:panelGroup> 
    </fieldset> 
</h:form> 

El ejemplo anterior se une la casilla de verificación a la vista, puede, por supuesto, también se unen a una propiedad boolean haba, a continuación, puede retirar el cheque not empty del atributo rendered.

  <h:selectBooleanCheckbox value="#{bean.showUserInfo}"> 

... 

     <h:panelGroup rendered="#{bean.showUserInfo}"> 

Answer 2

Podrías hacerlo mediante jQuery u otro JavaScript. También es posible por <f:ajax>, pero se conecta al servidor, que no necesita aquí.

Por jQuery simplemente puede ocultar el formulario, sin cambiar el DOM. Por lo que yo entiendo, debería ser suficiente.

publicar algunos .xhtml si quieres más :)

Answer 3

Como sugiere amorfis, la idea de usar Ajax aquí no es la mejor solución, ya que va a hacer una llamada a su servidor para una manipulación del lado del cliente .

La mejor solución es utilizar Javascript para ocultar su (s) componente (s). Por ejemplo, si todas las etiquetas y los textos de entrada se anidan en un componente <h:panelGrid>, se puede hacer eso:

<script type="text/javascript"> 
    function hideOrShow(show) { 
     // Get the panel using its ID 
     var obj = document.getElementById("myForm:myPanel"); 
     if (show) { 
      obj.style.display = "block"; 
     } else { 
      obj.style.display = "none"; 
     } 
    } 
</script> 

<h:form id="myForm"> 
    <h:selectBooleanCheckbox id="myCheckbox" onclick="hideOrShow(this.checked);"/> 

    <h:panelGrid id="myPanel" columns="2"> 
     ... 
    </h:panelGrid> 
</h:form>