使用selectBooleanCheckbox显示/隐藏JSF2表单

Question

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

当有人取消选中该复选框时,表单应该消失:

这是gwt的一个例子.

---

到目前为止,我尝试了一些<f:ajax>标签和一个PropertyActionListener在managedBean中的东西,但它没有用.有人可以给我一个例子或至少一些提示来实现我的目标.我真的很感激

Answer 1

<f:ajax render="idOfPanelContainingInputFields">在复选框中使用,并为包含表单元素的组件提供一个rendered取决于复选框状态的属性.不需要另一个JS代码混乱.

<h:form>
    <fieldset>
        <legend>
            <h:selectBooleanCheckbox binding="#{showUserInfo}">
                <f:ajax render="idOfPanelContainingTextBox" />
            </h:selectBooleanCheckbox>
            <h:outputText value="User information" />
        </legend>
        <h:panelGroup id="idOfPanelContainingTextBox" layout="block">
            <ui:fragment 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>
            </ui:fragment>
        </h:panelGroup>
    </fieldset>
</h:form>

上面的示例将复选框绑定到视图,您当然也可以将其绑定到booleanbean属性,然后可以not empty从rendered属性中删除检查.

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

...

            <ui:fragment 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>