Primefaces长时间运行服务器作业时的进度条

Question

I'd like a bar showing progress of a long-running server job launched with commandButton in jsf / Primefaces.

The showcase for Primefaces shows how to create a pb which updates according to the state of some variable on server side, with Ajax: http://www.primefaces.org/showcase/ui/misc/progressBar.xhtml

<h3>Ajax ProgressBar</h3>
<p:commandButton value="Start" type="button" onclick="PF('pbAjax').start();PF('startButton2').disable();" widgetVar="startButton2" />
<p:commandButton value="Cancel" actionListener="#{progressBarView.cancel}" oncomplete="PF('pbAjax').cancel();PF('startButton2').enable();" />
<br /><br />
<p:progressBar widgetVar="pbAjax" ajax="true" value="#{progressBarView.progress}" labelTemplate="{value}%" styleClass="animated" global="false">
    <p:ajax event="complete" listener="#{progressBarView.onComplete}" update="growl" oncomplete="startButton2.enable()"/>
</p:progressBar>

I try to add an action on the commandButton , that should have for effect to update the progress value:

<p:commandButton value="Start" type="button" onclick="PF('pbAjax').start();
                    PF('startButton2').disable();" widgetVar="startButton2" action="#{computer.compute()}"/>

The Computer bean:

@ManagedBean
@SessionScoped
public class Computer {

    long i;

    public Computer() {
    }

    public String compute() throws InterruptedException {
        i = 1;
        while (i < 10) {
            i++;
            Thread.sleep(1000);
        }
        return "welcomePrimefaces.xhtml";
    }
}

The ControllerBean:

ManagedBean
@ViewScoped
public class ControllerBean {

@Inject Computer computer;

    public ControllerBean() {
    }

    private Integer progress;


    public Integer getProgress() {
        if (computer.i == 1){
            progress = 30;
        }
        if (computer.i == 2){
            progress = 60;
        }
        if (computer.i == 3){
            progress = 90;
        }
        if (computer.i == 4){
            progress = 100;
        }
        return progress;
    }

    public void setProgress(Integer progress) {
        this.progress = progress;
    }

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

    public void cancel() {
        progress = null;
    }

}

But the compute method is never called, i is never updated. Surely this is this logic (injecting computer into controllerbean ) which is incorrect. Any pointer to get it to work is appreciated!

Answer 1

Two possible problems with your code

1. A button of type button will not execute a server-side action, it's meant only for navigation and client-side business (mostly javascript). Unless you really mean to, you shouldn't have to set the type attribute on your buttons (it defaults to type="submit" , the kind that executes server-side actions).

2. Depending on your version of JSF, you probably won't have a successful bean injection when combining @Inject and @ManagedBean -type beans. Prior to JSF-2.2, the handshake between CDI ( @Inject ) and JSF( @ManagedBean etc) was very buggy. The most effective way to inject JSF-managed beans is using the @ManagedProperty annotation.

---

Putting both together, you should have:

<p:commandButton value="Start" onclick="PF('pbAjax').start();
                PF('startButton2').disable();" widgetVar="startButton2" action="#{computer.compute()}"/>

And in your backing bean

@ManagedProperty(value="#{computer}")
Computer computer;

The @ManagedProperty annotation will use an all-lowercase version of your class name since you didn't explicitly specify a name for that managed bean

Related Reading:

• Primefaces - commandButton does not work