Mostra/nascondi modulo JSF2 utilizzando selectBooleanCheckbox

Question

Sto utilizzando JSF2 e Java per creare un'applicazione web. Voglio costruire una forma come quella l'immagine qui sotto:

Quando qualcuno deseleziona la casella di controllo sotto forma dovrebbe scomparire:

Here è un esempio con GWT.

---

Finora, ho provato alcune cose con il tag <f:ajax> ed un PropertyActionListener nel managedBean ma non ha funzionato. Qualcuno può darmi un esempio o almeno alcuni suggerimenti per raggiungere il mio obiettivo. Sarei davvero grato

Answer 1

Usa <f:ajax event="click" render="@form"> nella casella di controllo e dare il componente che contiene gli elementi del modulo un attributo rendered che dipende dalla casella di controllo del stato. Non c'è bisogno di un'altra confusione di codice 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'esempio precedente si lega la casella di controllo per la vista, si può ovviamente legarsi anche a una proprietà boolean di fagioli, è possibile rimuovere il controllo not empty dall'attributo rendered.

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

... 

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

Answer 2

Si potrebbe fare da jQuery, o un altro JavaScript. È anche possibile da <f:ajax>, ma si collega al server, che non è necessario qui.

Con jQuery puoi semplicemente nascondere il modulo, non cambiando il DOM. Per quanto ho capito, dovrebbe essere abbastanza.

Messaggio alcuni .xhtml se si vuole di più :)

Answer 3

Come suggerito dal amorfis, l'idea di usare Ajax qui non è la soluzione migliore, come si farà una chiamata al server per una manipolazione lato client .

La soluzione migliore è utilizzare Javascript per nascondere i componenti. Ad esempio, se tutte le etichette ed i testi di input sono annidati in un componente <h:panelGrid>, si può fare:

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