使用selectBooleanCheckbox显示/隐藏JSF2表单

Question

我正在使用JSF2和Java来构建Web应用程序。我想构建一个如下图所示的表单：

当有人取消选中该复选框时，表单应该会消失：

Here是gwt的一个例子。

---

到目前为止， 我在managedBean中尝试了<f:ajax>标记和PropertyActionListener的一些内容，但它不起作用。有人可以给我一个例子或至少一些提示来实现我的目标。我真的很感激

Answer 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}">

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

Answer 3

你可以通过jQuery或其他JavaScript来实现。它也可以由<f:ajax>，但它连接到服务器，这里你不需要。

通过jQuery，您可以隐藏表单，而不是更改DOM。据我了解，这应该足够了。

如果您想要更多，请发布一些.xhtml：）