在执行JSF托管bean操作时显示进度图像 [英] Show progress image while executing JSF managed bean action

问题描述

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

My question kind of applies to Prime Faces progress bar but any vanilla jsf implementations(using jquery) would be helpful. My problem is when I start the long mysql query I also render the progress bar. The problem is it starts it's progress after the data query is complete. I'm guessing because the render phase isn't applied until the back end stuff is complete. Would I need to start the progress bar in another thread?

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

The progress bar doesn't necessarily have to show where the query is at(if that is even possible). I really just want to show the application "thinking". Maybe with some text or an animated gif. Thanks for any help.

编辑

这就是我所拥有的.

     <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");
    }
}

推荐答案

从 http://ajaxload.info ，将其包含在您的CSS CSS display: none;页面中，并在onclick期间使用JavaScript将其创建为display: block;:

Grab some animated icon from http://ajaxload.info, include it in your page with CSS display: none; and use JavaScript to make it display: block; during onclick:

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

或者，如果您更喜欢jQuery(已经是PrimeFaces的一部分):

Or if you prefer jQuery (which is already part of 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>.

This however only works fine with synchronous requests. Since you're using PrimeFaces, I'd suggest to use p:ajaxStatus instead since it will take asynchronous (ajax) requests into account. Just put this piece of code anywhere in the template, you need only one of it. It will work for every <p:commandButton> and <p:commandLink> without ajax="false" and the <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>.

If you want to intercept on the standard JSF <f:ajax>, then use <f:ajax onevent> instead.

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

使用此JavaScript函数:

With this JavaScript function:

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

这篇关于在执行JSF托管bean操作时显示进度图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！