如何显示 f:viewAction 的等待指示器？答案

【问题标题】：How to display a wait indicator for f:viewAction?如何显示 f:viewAction 的等待指示器？
【发布时间】：2019-10-23 00:18:53
【问题描述】：

我有一个加载对象属性的 JSF 页面（其 id 在 URL 中传递）。加载可能会持续更多秒，所以我想显示等待/忙碌指示符或“正在加载...”消息。

这是使用“viewAction”完成的

<f:metadata>
    <f:viewAction action="#{myBean.loadParams}" />
</f:metadata>

有没有简单的方法来实现这个目标？我正在使用 Primefaces。

【问题讨论】：

我正在使用 Primefaces

标签： jsf primefaces busyindicator viewaction

【解决方案1】：

我也想提出这个简单的方法：

一个“登陆”页面（我们第一次导航的页面），带有一个等待指示器和一个带有从 URL 读取参数“param”并将其保存在 bean 中的事件的 autoRun remoteCommand。
remoteCommand 重定向到另一个页面（执行长时间运行的方法 loadParams）这样，等待指示器会一直显示，直到准备好显示第二页。

你有什么弱点吗？

这里是登陆页面：

<!DOCTYPE html>
<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">
<h:head>
...
</h:head>
<f:metadata>
     <f:event type="postAddToView" listener="#{notHeavyBean.readProperty}" />
     <f:viewParam name="param"/>
</f:metadata>
<h:body>
  <p:outputPanel layout="block">
      <i class="fa fa-circle-o-notch fa-spin layout-ajax-loader-icon" aria-hidden="true" style="font-size: 40px;position: relative;top: 50%;left: 50%;"></i>
  </p:outputPanel>


<h:form>
    <p:remoteCommand action="#{notHeavyBean.redirect}" autoRun="true"/>
</h:form>


</h:body>

【讨论】：

【解决方案2】：

PrimeFaces 已经为此准备了一个组件：<p:outputPanel deferred="true">。您只需要确保#{heavyBean} 在<p:outputPanel> 和不在别处。

...
#{notHeavyBean.property}
...

<p:outputPanel deferred="true">
    ...
    #{heavyBean.property}
    ...
</p:outputPanel>

...
#{anotherNotHeavyBean.property}
...

然后您可以在其@PostConstruct 方法中完成繁重的工作。在@PostConstruct 中完成您最初在<f:viewAction> 中所做的工作。

@Named
@ViewScoped
public class HeavyBean implements Serializable {

    @PostConstruct
    public void init() {
        // Heavy job here.
    }

    // ...
}

如果您需要访问其他 bean 的属性，只需 @InjectHeavyBean 中的那些 bean。例如。如果您需要 ID 视图参数：

<f:viewParam name="id" value="#{notHeavyBean.id}" />

@Inject
private NotHeavyBean notHeavyBean; // Also @ViewScoped.

@PostConstruct
public void init() {
    Long id = notHeavyBean.getId();
    // Heavy job here.
}

<p:outputPanel> 已经带有动画 gif。您可以通过 CSS 轻松customize。

.ui-outputpanel-loading {
    background-image: url("another.gif");
}

【讨论】：

请注意，GIF 可能不是加载器图像的最佳选择。见How to remove borders from loading gif on a dark background?
哇。多谢！我已经尝试过了：唯一的问题是该页面是复杂视图的“入口点”，使用 jstl 标签构建（我无法删除），并且这些标签会导致您预期的问题。我尝试使用 autorun="true" 在延迟窗格中添加远程命令并更新组件。以这种方式它似乎可以工作，但我不确定它是否是一个好的解决方案（性能似乎变得更糟）。