我想使用 Richfaces a4j 支持在页面上异步渲染 6 个块。为此,我定义了 6 个 a4j:region 组件和一个 a4j:commandLink 用于手动刷新组件。
以下是相关代码:
<ui:define name="body">
<h:form id="dashboardform">
<div class="table_container" style="width:99%">
<h:panelGrid id="dashboadPanel" columns="3">
<a4j:region id="resourceGraphRegion">
<h:panelGroup>
<div class="rounded_box dashboard_box">
<ui:include src="dashboard_resourceGraph.xhtml"/>
</div>
</h:panelGroup>
</a4j:region>
<a4j:region id="profileGraphRegion">
<h:panelGroup>
<div class="rounded_box dashboard_box" >
<ui:include src="dashboad_profileGraph.xhtml"/>
</div>
</h:panelGroup>
</a4j:region>
<a4j:region id="reportGraphRegion">
<h:panelGroup>
<div class="rounded_box dashboard_box" >
<ui:include src="dashboard_reportGraph.xhtml"/>
</div>
</h:panelGroup>
</a4j:region>
<a4j:region id="installedBaseGraphRegion">
<h:panelGroup>
<div class="rounded_box dashboard_box" >
<ui:include src="dashboard_installedBaseGraph.xhtml"/>
</div>
</h:panelGroup>
</a4j:region>
<a4j:region id="simcardGraphRegion">
<h:panelGroup>
<div class="rounded_box dashboard_box">
<ui:include src="dashboard_simcardGraph.xhtml"/>
</div>
</h:panelGroup>
</a4j:region>
<a4j:region id="orderOverviewGraphRegion">
<h:panelGroup>
<div class="rounded_box dashboard_box" id="order">
<ui:include src="dashboard_orderOverviewGraph.xhtml"/>
</div>
</h:panelGroup>
</a4j:region>
</h:panelGrid>
<h:panelGrid id="dashboadRefreshPanel" columns="1" width="100%">
<a4j:commandButton value="#{I18n.messages['dashboard.btn.refresh']}"
action="#{dashboardBean.doRefresh}" reRender="resourceGraphRegion, profileGraphRegion, reportGraphRegion, installedBaseGraphRegion, simcardGraphRegion, orderOverviewGraphRegion"
image="/static/images/refresh.png" style="border:0px; margin-right: 20px; padding: 0px; float: right;" />
</h:panelGrid>
</div>
但是,当手动触发 a4j:commandLink 时,整个页面将变为非活动状态(灰显)并出现加载图标。我想要的是页面打开非常顺利,并且所有 6 个区域都呈现异步,因此用户可以获得流畅的体验,而不必等待所有区域完成。