如何解决推迟在由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进行了开发,发现其他人一直在遵循该路径,但是有一些困难。我将发布进度。
以下是相关帖子:
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>
渲染分为两个阶段:
- 显示一个简单的gif。
- 将显示整个报告。但是,gif 只要报告尚未准备好,就会显示。
详细评论:
- 在选项卡开关上,事件“ tabChange”调用bean方法“ onTabChange”,该方法将“ loading ”设置为false并记录活动的选项卡索引。
- 由于“ loading ”为假,因此显示gif,不显示报告,并且运行远程命令。
- 远程命令是异步的,因此可以在活动选项卡完全显示之前切换到另一个选项卡。
- 在更新第二阶段的选项卡之前,远程命令将“ loading ”设置为false,以便:(1)不再显示gif; (2)现在已生成报告; (3)自动运行的remoteCommand不会无限次运行。
- 将remoteCommand的名称索引到活动选项卡中,以确保各个选项卡中每个remoteCommand的名称唯一。
嗯,我想有比这更优雅的解决方案了。这是我找到的那个。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。