执行 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; 并使用 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";
}