如何显示/隐藏jsf组件 [英] How to Display / Hide jsf components

问题描述

在我的一个JSF应用程序中，我顶部的标题部分包含selectOneMenu，底部的内容部分显示为：Filter组件。默认情况下，应用程序首先在顶部显示selectOneMenu数据，在底部显示相应的Filter信息。如果用户选择不同的selectOneMenu数据，则应在底部内容部分上加载相应的过滤器信息。

In one of my JSF application, I have header part at the top contains selectOneMenu, and the content part at the bottom which display say, Filter components. By default the application display first selectOneMenu data at the top and corresponding Filter information at the bottom. If the user selects different selectOneMenu data, corresponding Filter information should be loaded on bottom content part.

过滤器组件具有CommandButton，用户填充过滤器信息。单击该按钮，并且过滤器已获批准，应用程序应加载另一个组件 - Report.xhtml以代替过滤器组件。那就是Filter组件应该由底部内容部分的Report替换。

Filter component has CommandButton and user fills Filter information. On click of the button, and the Filter is approved, the application should load another component - Report.xhtml in place of Filter component. That is Filter component should be replaced by Report on bottom content part.

点击selectOneMenu项目应重复此过程。即显示过滤器屏幕等。

Click on selectOneMenu item should repeat the process. That is display Filter screen and so on.

问题区域
1.无法显示过滤器表单并隐藏内容部分上的报告表单
2支持Filter的bean - commandButton OK应该返回值。根据结果​​，应显示报告以代替过滤器。

Problem area 1. Not able to display Filter form and hide Report form on content part 2. Backing bean of Filter - commandButton OK should return value. Depending on outcome, Report should be displayed in place of Filter.

我不确定设计是否准确，如果这不能按预期工作，请建议和您的宝贵答案将不胜感激。我想保持应用程序基于ajax，我不想在按钮事件上重新加载整个页面。

I am not sure the design is accurate, if this is not going to work as intended, please suggest and your valuable answers will be appreciated. I would like to keep the application ajax based and I do not want to reload entire page on button event.

GDK

<h:form id="form1">    
<h:selectOneMenu value="#{states.stateName}">
  <f:selectItems value="#{states.stateChoices}"/>
  <f:ajax render=":Filter"/>
</h:selectOneMenu>
</h:form>
  <h:form id="Filter">
      <div id="content">            
       <h:panelGroup id="one" rendered="Need a condition from form1 to display this">
            #{states.stateName}
            <br/>Report
            <h:inputText id="report" value="#{Counties.report}" style="width:150px"/>
            <h:commandButton id="OK" value="OK" actionListener="#{Counties.getReports}">
            <f:param name="CatName" value="Dekalb" />               
            </h:commandButton>                 
        </h:panelGroup>           
      </div>
  </h:form>
  <h:form id="Report">
      <div id="content">
        <h:panelGroup id="two" rendered="#{should be rendered on acceptance from OK command button}">
             <ui:include src="Report.xhtml"/>
        </h:panelGroup>
          </div>
  </h:form>

推荐答案

这是最小示例（我也非常友好地对命名进行消毒以符合标准）：

Here's a minimum example (I was also so kind to sanitize the naming to comply the standards):

<h:form>
  <h:selectOneMenu value="#{states.stateName}">
    <f:selectItems value="#{states.stateChoices}" />
    <f:ajax render=":filter" />
  </h:selectOneMenu>
</h:form>
<h:panelGroup id="filter">
  <h:panelGroup rendered="#{not empty states.stateName}">
    <h:form rendered="#{not counties.accepted}">
      <h:inputText value="#{counties.report}" />
      <h:commandButton value="OK" action="#{counties.viewReport}">
        <f:ajax execute="@form" render=":filter" />
      </h:commandButton>
    </h:form>
    <h:form rendered="#{counties.accepted}">
      <ui:include src="report.xhtml"/>
    </h:form>
  </h:panelGroup>
</h:panelGroup>

其中县托管bean有一个新的布尔值属性已接受：

Where Counties managed bean has a new boolean property accepted:

@ManagedBean
@ViewScoped
public class Counties {

    private boolean accepted;

    public void viewReport() {
        if (some condition) {
            accepted = true;
        }
    }

    public boolean isAccepted() {
        return accepted;
    }

}

这篇关于如何显示/隐藏jsf组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！