执行JSF受管bean操作时显示进度图像

Question

我的问题类型适用于Prime Faces进度条，但任何常用的jsf实现（使用jquery都会有所帮助。我的问题是，当我启动长的mysql查询时，我也会渲染进度栏。问题是数据查询完成后，它开始了进度。我在猜测，因为直到后端内容完成才应用渲染阶段。我需要在另一个线程中启动进度栏吗？

进度条不一定必须显示查询的位置（如果可能的话）。我真的只想向应用程序展示“思维”。也许带有一些文本或动画gif。感谢您的帮助。

编辑

这就是我所拥有的。

     <p:ajaxStatus>
            <f:facet name="start">
                <h:graphicImage value="/resources/images/ajax-loader-bar.gif" />
            </f:facet>

            <f:facet name="complete">
                <h:graphicImage value="/resources/images/ajax-loader-bar-still.gif" />
            </f:facet>

            <f:facet name="default">
                <h:graphicImage value="/resources/images/ajax-loader-bar-still.gif" />
            </f:facet>
        </p:ajaxStatus>

该请求不是ajax。

  <p:commandButton value="Yes" update="growl"  onclick="confirmation.hide()"
                             action="#{viewLines.downloadFile}" ajax="false" /> 

其背后的方法是。

    public void downloadFile() {

    if (selectedPkgLine != null) {

        ExcelSheet excelSheet = new ExcelSheet();
        FacesContext facesContext = FacesContext.getCurrentInstance();
        ExternalContext externalContext = facesContext.getExternalContext();

        String pkgLineName = StringUtils.removeSpaces(StringUtils.stripGarbage(selectedPkgLine.getShortname()));
        StringBuilder builder = new StringBuilder();
        builder.append(pkgLineName);
        builder.append(".xls");

        externalContext.setResponseContentType("application/vnd.ms-excel");
        externalContext.setResponseHeader("Content-Disposition", "attachment; filename=" + builder.toString());

        try {
            excelSheet.writeExcelSheet(this, externalContext.getResponseOutputStream());
        } catch (WriteException ex) {
            FacesUtils.addFatalMessage(ex.getMessage());
        } catch (IOException ex) {
            FacesUtils.addErrorMessage(ex.getMessage());
        } catch (ServletException ex) {
            FacesUtils.addErrorMessage(ex.getMessage());
        }

        facesContext.responseComplete();
    } else {
        submitDisabled = true;
        FacesUtils.addErrorMessage("No packaging line was selected");
    }
}

Answer 1

从http://ajaxload.info中获取一些动画图标，将其包含在CSS display: none;中，并在单击期间使用JS / jQuery将其设置为display: block;。

<h:commandButton onclick="$('#progress').show()" />

<img id="progress" src="progress.gif" style="display:none" />

但是，这仅适用于同步请求。由于您使用的是PrimeFaces，因此建议您改用p:ajaxStatus，因为它将考虑异步（ajax）请求。

p:ajaxStatus

---

Update：根据您的更新。

<p:ajaxStatus>
    <f:facet name="start"><h:graphicImage value="progress.gif" /></f:facet>
    <f:facet name="success"><h:outputText value="" /></f:facet>
    <f:facet name="error">An error has occurred!</f:facet>
</p:ajaxStatus>

仅在PrimeFaces生成的ajax请求上拦截。因此，仅在<p:ajaxStatus>或<p:commandButton> 无 <p:commandLink>上。