推迟在由primefaces tabview标记管理的选项卡中加载输出面板

问题描述

演示文稿

当面板包含在由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。最终版 Primefaces 8.0.3 Omnifaces 2.7.7 Java 8

解决方法

这是一个依赖于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. 将显示整个报告。但是，gif 只要报告尚未准备好，就会显示。

详细评论：

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

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