JSF PrimeFaces进度条问题

时间:2014-04-25 12:16:17

标签: ajax jsf jsf-2 primefaces

我无法获得应该是简单的PrimeFaces 4.0进度条的工作:

我最终要做的是在我的用户界面上创建一个按钮,当我点击它时,将启动一个长时间运行的后台任务,该任务将通过进度条显示其状态。为了模拟这个案例,我把我认为是一个简单的例子放在一起(不幸的是它似乎没有工作)。

我使用了ViewScoped bean,因为我认为不应该添加任何范围问题。从使用firebug看起来当我点击启动功能按钮时,进度条开始发出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>

BEAN

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

1 个答案:

答案 0 :(得分:1)

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

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

结束......:)