在执行 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; 将其包含在您的页面中，并在 onclick 期间使用 JavaScript 使其成为 display: block;：

<h:commandButton onclick="document.getElementById('progress').style.display='block'" />
<img id="progress" src="progress.gif" style="display:none" />

或者如果您更喜欢 jQuery（它已经是 PrimeFaces 的一部分）：

<h:commandButton onclick="$('#progress').show()" />
<img id="progress" src="progress.gif" style="display:none" />

但这仅适用于同步请求。由于您使用的是 PrimeFaces，我建议改用 p:ajaxStatus，因为它会考虑异步（ajax）请求。只需将这段代码放在模板中的任何位置，您只需要其中一个。它适用于每个<p:commandButton> 和<p:commandLink> 没有 ajax="false" 和<p:ajax>。

<img id="progress" src="progress.gif" style="display:none" />
<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>

如果您想在标准 JSF 上拦截 <f:ajax>，请改用 <f:ajax onevent>。

<h:commandButton>
    <f:ajax onevent="progressListener" />
</h:commandButton>
<img id="progress" src="progress.gif" style="display:none" />

使用这个 JavaScript 函数：

function progressListener(data) {
    document.getElementById("progress").style.display = (status == "begin") ? "block" : "none";
}