Показать/скрыть форму JSF2 с помощью selectBooleanCheckbox

Я использую JSF2 и Java для создания веб-приложения. Я хочу создать такую форму, как на рисунке ниже:

Когда кто-то убирает флажок, форма должна исчезнуть:

Здесь приведен пример с gwt.

До сих пор, Я попробовал некоторые вещи с тегом <f:ajax> и PropertyActionListener в managedBean, но это не сработало. Может ли кто-нибудь дать мне пример или хотя бы некоторые намеки на достижение моей цели. Я был бы очень благодарен

Ответ 1

Используйте флажок <f:ajax event="click" render="@form"> и укажите компонент, содержащий элементы формы, атрибут rendered, который зависит от состояния флажка. Нет необходимости в другом беспорядке 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>

В приведенном выше примере привязывается флажок к представлению, вы также можете привязать его к свойству boolean bean, затем вы можете удалить проверку not empty из атрибута rendered.

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

...

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

Ответ 2

Как было предложено amorfis, идея использования Ajax здесь не является лучшим решением, так как вы будете звонить на ваш сервер для обработки на стороне клиента.

Лучшим решением является использование Javascript для скрытия ваших компонентов. Например, если все ваши метки и входные тексты вложены в компонент <h:panelGrid>, вы можете сделать это:

<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

Вы можете сделать это с помощью jQuery или другого JavaScript. Это также возможно с помощью <f:ajax>, но он подключается к серверу, который вам здесь не нужен.

По jQuery вы можете просто скрыть форму, не меняя DOM. Насколько я понимаю, этого должно быть достаточно.

Поместите некоторый .xhtml, если вы хотите больше:)