3

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

这是使用“viewAction”完成的

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

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

4

2 回答 2

4

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

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

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

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

然后你可以用它的@PostConstruct方法完成繁重的工作。做你最初在<f:viewAction>那里做的工作@PostConstruct。

@Named
@ViewScoped
public class HeavyBean implements Serializable {

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

    // ...
}

如果您需要访问其他 bean 的属性，只需@Inject访问HeavyBean. 例如，如果您需要 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轻松自定义它。

.ui-outputpanel-loading {
    background-image: url("another.gif");
}
于 2019-06-12T10:06:36.003 回答
0

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

  • 一个带有等待指示器的“登陆”页面（我们第一次导航的页面）和一个带有从 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>

于 2019-09-16T04:53:49.113 回答