Afficher/masquer le formulaire JSF2 à l'aide de selectBooleanCheckbox

Question

J'utilise JSF2 et Java pour créer une application Web. Je veux construire une forme comme celle de l'image ci-dessous:

Quand quelqu'un désélectionne la case du formulaire doit disparaître:

Here est un exemple avec GWT.

---

Jusqu'à présent, j'ai essayé quelques trucs avec le tag <f:ajax> et un PropertyActionListener dans le managedBean, mais cela n'a pas fonctionné. Quelqu'un peut-il me donner un exemple ou au moins quelques conseils pour atteindre mon objectif? Je serais vraiment reconnaissant

Answer 1

Utilisation <f:ajax event="click" render="@form"> dans la case à cocher et donner le composant contenant les éléments forment un attribut rendered qui dépend de la case de Etat. Pas besoin d'un autre fouillis de code 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> 

L'exemple ci-dessus se fixe la case à la vue, vous pouvez bien sûr lier également à une propriété de haricot boolean, vous pouvez supprimer l'attribut de l'rendered contrôle not empty.

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

... 

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

Answer 2

Vous pourriez le faire par jQuery, ou un autre JavaScript. Il est également possible par <f:ajax>, mais il se connecte au serveur, dont vous n'avez pas besoin ici.

Par jQuery vous pouvez simplement cacher le formulaire, ne pas changer le DOM. Pour autant que je comprenne, cela devrait suffire.

Poster quelques .xhtml si vous voulez plus :)

Answer 3

Comme suggéré par amorfis, l'idée d'utiliser Ajax ici est pas la meilleure solution, que vous ferez un appel à votre serveur pour une manipulation côté client .

La meilleure solution est d'utiliser Javascript pour cacher votre (vos) composant (s). Par exemple, si toutes les étiquettes et les textes d'entrée sont imbriqués dans un composant <h:panelGrid>, vous pouvez le faire:

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