Question

我有一个JSF页面，该页面加载对象的属性（其ID在URL中传递）。加载可能会持续几秒钟，因此我想显示一个等待/忙碌指示器或“正在加载...”消息。

这是通过“ viewAction”完成的

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

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

Answer 1

PrimeFaces已经为此准备好了一个组件：<p:outputPanel deferred="true">。您只需要确保#{heavyBean}在组件中仅被引用（因此，出于here的解释，绝对不能在<c:xxx>这样的标记文件中引用）在<p:outputPanel>而不是其他地方。

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

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

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

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

@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

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

一个带有等待指示器的“登陆”页面（我们第一次进入的页面）和一个带有事件的autoRun remoteCommand，该事件从URL读取参数“ param”并将其保存在bean中。
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>

如何显示f：viewAction的等待指示器？

2 个答案: