JSF PrimeFaces 进度条问题答案

【问题标题】：JSF PrimeFaces Progress Bar issuesJSF PrimeFaces 进度条问题
【发布时间】：2014-06-11 03:43:08
【问题描述】：

我无法让应该是简单的 PrimeFaces 4.0 进度条工作：

我最终要做的是在我的 UI 上创建一个按钮，当我单击它时，它将启动一个长时间运行的后台任务，该任务将通过进度条显示其状态。为了模拟这种情况，我整理了一个我认为很简单的例子（不幸的是它似乎不起作用）。

我使用了ViewScoped bean，因为我认为它不应该添加任何范围界定问题。从使用萤火虫看起来，当我单击我的 Start Function 按钮时，进度条开始发出 ajax 请求，但是，与按钮绑定的 actionListener 似乎没有运行，因此我的进度永远不会更新。

有什么建议吗？

XHTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>PrimeFaces Progress Bar</title>
            </f:facet>
        </h:head>
        <h:body>
            <h:form>
                <p:growl id="growl" />  
                <h3>Progress Bar Test</h3>  

                <p:commandButton value="Start Function" type="button" 
                                 onclick="PF('pbAjax').start();PF('startButton2').disable();" 
                                 widgetVar="startButton2" 
                                 actionListener="#{progressBean.startTestFunction}"/>  

                <p:commandButton value="Cancel" 
                                 actionListener="#{progressBean.cancel}" 
                                 oncomplete="pbAjax.cancel();startButton2.enable();" />  

                <p:progressBar widgetVar="pbAjax" 
                               ajax="true" 
                               value="#{progressBean.progress}" 
                               labelTemplate="{value}%" 
                               styleClass="animated">  

                    <p:ajax event="complete" 
                            listener="#{progressBean.onComplete}" 
                            update="growl" 
                            oncomplete="startButton2.enable()"/>  
                </p:progressBar>  
            </h:form>  
        </h:body>
    </f:view>
</html>

豆

import java.io.Serializable;  
import javax.faces.application.FacesMessage;  
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@ViewScoped // Does the scope matter here?
public class ProgressBean implements Serializable {  

    public ProgressBean() {};

    private Integer progress;  

    public Integer getProgress() {  
        System.out.println("getProgress: " + progress);
        return progress;  
    }  

    public void startTestFunction() {
        System.out.println("Staring Test Function");

        for (int i = 0; i < 100; i++) {
            setProgress(i);
            System.out.println("TestFunction - setting progress to: " + i);
            try {
                Thread.sleep(200);
            } catch (InterruptedException e) {
            }
        }
        setProgress(100);
        System.out.println("Finished Function");
    }

    public void setProgress(Integer progress) { 
        System.out.println("SetProgress called: " + progress);
        this.progress = progress;  
    }  

    public void onComplete() {  
        FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Progress Completed", "Progress Completed"));  
    }  

    public void cancel() {  
        progress = null;  
    }  
}

【问题讨论】：

标签： ajax jsf jsf-2 primefaces

【解决方案1】：

看来我必须从命令按钮中删除 type="button" 并将其更改为：

<p:commandButton value="Start Function" 
    onclick="PF('pbAjax').start();PF('startButton2').disable();" 
    widgetVar="startButton2" 
    actionListener="#{progressBean.startTestFunction}"/>

结束... :)

【讨论】：