如何显示/隐藏 jsf 组件

Posted

技术标签:

【中文标题】如何显示/隐藏 jsf 组件【英文标题】:How to Display / Hide jsf components 【发布时间】:2011-06-12 13:23:27 【问题描述】:

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

Filter组件有CommandButton,用户填写Filter信息。单击按钮后,过滤器被批准,应用程序应加载另一个组件 - Report.xhtml 代替过滤器组件。即过滤器组件应替换为底部内容部分的报告。

单击 selectOneMenu 项应重复该过程。即显示过滤画面等。

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

我不确定设计是否准确,如果这不能按预期工作,请提出建议,我们将不胜感激。我想保持基于 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>

【问题讨论】:

【参考方案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有一个新的boolean属性accepted

@ManagedBean
@ViewScoped
public class Counties 

    private boolean accepted;

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

    public boolean isAccepted() 
        return accepted;
    


【讨论】:

您好 BalusC,非常感谢。它真的解决了我的问题。我真的很感谢你的快速反应。 (在内容上显示 report.xhtml 后,单击 selectOneMenu 项目应再次显示 Filter。 中的方法 action="" 没有解决问题,因为它没有在方法中将“接受”重置为 false .所以我在selectOneMenu组件旁边引入了一个按钮。这个方法服务的目的)GDK 您好 BalusC,此代码(您的)适用于第一次迭代。单击 Selectmenu 项将显示 inputText 和 OK 按钮。第二次点击 OK 按钮将不会调用 #counties.viewReport 函数。再次单击确定按钮将调用#counties.viewReport 函数。这意味着它需要双击确定按钮才能激活。你能解释一下这种行为吗? GDK 当按钮按下失败时,可能意味着在特定请求期间stateName 为空或acceptedfalse。当按钮的rendered 属性或其父属性之一在应用请求值阶段评估false 时,不会调用该操作。但是,只要您的 bean 是视图范围的,这应该可以正常工作。之后您不是以编程方式重置其中任何一个吗? 稍微重新排列了代码。然后它起作用了。更改为
.....
。你的基本想法对我帮助很大!!!谢谢。

以上是关于如何显示/隐藏 jsf 组件的主要内容,如果未能解决你的问题,请参考以下文章

JSF 隐藏和显示

在 JSF 1.2 中显示或隐藏 HTML DIV

如何在 JSF 组件中显示预览文本?

JSF / PrimeFaces - 如何显示自定义验证器的消息,但不显示同一组件上的必需验证

显示和隐藏功能在 JSF 中不起作用

在 JSF 中动态显示和隐藏 <h1> [重复]