JSF PrimeFaces Progress Bar issues

StackOverflow https://stackoverflow.com/questions/23292898

  •  09-07-2023
  •  | 
  •  

Question

I'm having trouble getting what should be a simple PrimeFaces 4.0 progress bar to work:

What I'm ultimately trying to do is make a button on my UI that when i click it will start a long running background task, that will have its status, shown via a progress bar. To simulate this case I put together what I thought was a simple example (unfortunately it doesn't seem to be working).

I used a ViewScoped bean as I figured that shouldn't add any scoping issues to the mix. From using firebug it looks like when I click my Start Function button the progress bar starts to make ajax requests, however, the actionListener which is tied to the button doesn't seem to run and thus my progress is never updated.

Any suggestions?

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;  
    }  
}
Was it helpful?

Solution

It would appear I had to remove type="button" from the command button and change it to:

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

The end... :)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top