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

Je suis en utilisant JSF2 et Java pour construire une application web. Je veux créer un formulaire comme celui de la photo ci-dessous:

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

Quand quelqu'un décoche la case du formulaire doit disparaître:
Afficher /masquer le formulaire JSF2 à l'aide de selectBooleanCheckbox

Ici est un exemple avec gwt.

Jusqu'à présent,
J'ai essayé quelques trucs avec le <f:ajax> balise et une PropertyActionListener dans le managedBean mais il ne fonctionne pas. Quelqu'un peut-il me donner un exemple ou au moins quelques astuces pour accomplir mon objectif. Je serais vraiment reconnaissants

source d'informationauteur Sven

  1. 12

    Utilisation <f:ajax event="click" render="@form"> dans la case et de donner le composant contenant les éléments de formulaire un rendered attribut qui dépend de la case de l'état. Aucun besoin d'un autre code JS encombrement.

    <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 lie la case à cocher à la vue, bien sûr, vous pouvez également l'attacher à un boolean bean propriété, vous pouvez alors retirer le not empty vérifier à partir de la rendered attribut.

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

...

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

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

    La meilleure solution est d'utiliser Javascript pour cacher votre composante(s). Par exemple, si tous vos étiquettes et de saisie de textes sont imbriquées dans une <h:panelGrid> composant, 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>
  3. 0

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

    Par jQuery, vous pouvez simplement masquer le formulaire, en ne changeant pas les DOM. Comme je le comprends, il devrait être suffisant.

    Poster quelques .xhtml si vous souhaitez plus d'informations 🙂