如何显示 f:viewAction 的等待指示符？

Question

我有一个加载对象属性的 JSF 页面（其 ID 在 URL 中传递）。加载可以持续更多秒，所以我想显示 wait/busy 指示器或 "Loading..." 消息。

这是使用 "viewAction"

完成的

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

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

Answer 1

PrimeFaces 已经为此准备了一个组件：<p:outputPanel deferred="true">。您只需要确保 #{heavyBean} 仅 在组件中被引用 （因此绝对不在 <c:xxx> 之类的标记文件中，原因已解释 here) 在 <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 的属性，只需 @Inject HeavyBean 中的那些 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");
}

Answer 2

我也想推荐这个简单的方法：

一个 "landing" 页面（我们第一次导航到的页面）带有一个等待指示器和一个带有从 URL 读取参数 "param" 并保存的事件的 autoRun remoteCommand它在豆子里。
remoteCommand 重定向到另一个页面（执行 long-运行方法 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>

如何显示 f:viewAction 的等待指示符？

How to display a wait indicator for f:viewAction?

jsf

busyindicator

primefaces

viewaction