Как отобразить индикатор ожидания для 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>