Как отобразить индикатор ожидания для f:viewAction?

У меня есть страница JSF, которая загружает свойства объекта (для которого идентификатор передается в URL). Загрузка может длиться больше секунд, поэтому я хотел бы отобразить индикатор ожидания / занятости или сообщение "Загрузка...".

Это делается с помощью "viewAction"

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

Есть ли простой способ достичь этой цели? Я использую Primefaces.

1 ответ

Решение

В 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.
    }

    // ...
}

Если вам нужен доступ к свойствам других компонентов, просто @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");
}

Я хотел бы предложить также такой простой подход:

  • одна "целевая" страница (страница, на которую мы впервые переходим) с индикатором ожидания и autoRun remoteCommand с событием, которое считывает параметр "param" из URL и сохраняет его в 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>

Другие вопросы по тегам