延迟加载由 primefaces tabview 标签管理的选项卡中的输出面板

Question

演示文稿

当面板包含在 Primefaces 管理的选项卡中时，我遇到了在延迟模式下加载输出面板的问题。

这是一个代码示例：

<p:tabview value="#{b.tabs}" var="tab" dynamic="true" cache="false">
  
   <p:tab title="#{tab.name}">
        <p:outputpanel id="reportsDisplayId" >
            <p:outputPanel id="reportsPanel" deferred="true" >
                <h:outputText id="reports" escape="false" value="#{tab.report}" />           
            </p:outputPanel>
        </p:outputpanel>
   </p:tab>
</p:tabView>

“tab.report”由 Jasper 生成。在大多数情况下，生成此报告需要时间。这就是使用延迟模式的原因。

在动态模式下使用 p:tabView 管理选项卡，并且没有缓存，因此每次选项卡更改时都会从服务器重新获取选项卡。

这适用于第一个选项卡：有效地延迟了面板的显示，而不会阻止显示上下文。在选项卡之间切换时，仅当报表准备好时才会显示选项卡的全部内容。

我曾尝试使用 deferredMode="visible"，但此功能似乎旨在提高滚动可见性。我尝试将 h:form 包含在 p:outputPanel 中并更新面板而不是表单。

到目前为止没有成功。

使用 p:RemoteCommand

我使用 p:RemoteCommand 取得了进展，发现其他人一直在走这条路，但是遇到了一些困难。我会发布我的进度。

以下是相关帖子：

• p:remote command not working in asynchronous mode

• The bug reported here seems to have disappeared

JSF 2.1 Wildfly 8.2.1.Final Primefaces 8.0.3 Omnifaces 2.7.7 Java 8

Answer 1

这是一个依赖于 p:remoteCommand 而不是输出面板的 deferred 属性的解决方案。

<h:form id="boardForm">

  <p:tabview id="boardTabs" value="#{b.tabs}" var="tab" dynamic="true" cache="false">

     <p:ajax event="tabChange" listener="#{board.onTabChange}"/>

     <p:tab title="#{tab.name}">

       <!-- First rendering: display a loading gif -->
       <p:graphicImage value="/resources/img/loading.gif" 
                       rendered="#{!board.loading}" alt="loading" />

       <!-- Second rendering: display the report itself -->
       <p:outputPanel id="reportsPanel"  rendered="#{board.loading}" >
           <h:outputText id="reports" escape="false" value="#{board.getJasper(tab)}"/>
       </p:outputPanel>

       <p:remoteCommand name="deferredLoader_#{board.tabIdx}" async="true" autoRun="true"
                       actionListener="#{board.setLoading(true)}" rendered="#{!board.loading}"
                       update=":boardForm:boardTabs:#{board.tabIdx}:jspReportDisplay" />

    </p:tab>

  </p:tabView>

</h:form>

渲染分为两个阶段：

1. 显示一个简单的 gif。
2. 显示整个报告。然而，动图 只要报告尚未准备好，就会显示。

详细的cmets：

• 标签切换时，“tabChange”事件调用 bean 方法“onTabChange”，将“loading”设置为 false 并记录活动标签索引。
• 由于“loading”为false，显示gif，不显示报告，运行远程命令。
• 远程命令是异步的，因此可以在活动选项卡完全显示之前切换到另一个选项卡。
• 在为第二阶段更新选项卡之前，远程命令将“正在加载”设置为 false，以便： (1) 不再显示 gif； (2) 报告现已生成； (3) 自动运行的remoteCommand不会无限次运行。
• remoteCommand 的名称被索引到活动选项卡，以确保各个选项卡中每个 remoteCommand 名称的唯一性。

嗯，我想还有比这个更优雅的解决方案。这是我找到的。