如何顯示/隱藏jsf組件

Question

在我的一個JSF應用程序中，我頂部的標題部分包含selectOneMenu，底部的內容部分顯示為“過濾器組件”。 默認情況下，應用程序首先在頂部顯示selectOneMenu數據，在底部顯示相應的Filter信息。 如果用戶選擇不同的selectOneMenu數據，則應在底部內容部分上加載相應的過濾器信息。

Filter組件具有CommandButton，用戶填充Filter信息。 單擊該按鈕，並且過濾器被批准，應用程序應加載另一個組件 - Report.xhtml代替Filter組件。 那就是Filter組件應該由底部內容部分的Report替換。

單擊selectOneMenu項應該重復該過程。 那就是顯示過濾器屏幕等。

問題區域1.無法顯示過濾器表單並隱藏內容部分2上的報表。過濾器的后台bean - commandButton確定應該返回值。 根據結果​​，應顯示報告以代替過濾器。

我不確定設計是否准確，如果這不能按預期工作，請提出建議，我們將非常感謝您的寶貴答案。 我想保持應用程序基於ajax，我不想在按鈕事件上重新加載整個頁面。

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>

Answer 1

這是一個最低限度的例子（我也非常友好地對命名進行消毒以符合標准）：

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

其中Counties托管bean accepted了一個新的boolean屬性：

@ManagedBean
@ViewScoped
public class Counties {

    private boolean accepted;

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

    public boolean isAccepted() {
        return accepted;
    }

}