user2434
user2434

Reputation: 6399

How to draw a progress bar in JSF application

We are having a web application that is built on JEE6 (JSF 2/ EJB 3 / Jboss 7).

There is a need for us to display progress bars like the one below in our application. Which framework can we use? Is there a way to do this thing in Primefaces ?

enter image description here

Upvotes: 1

Views: 2776

Answers (1)

Masudul
Masudul

Reputation: 21961

Use <p:progressBar/> of PrimeFaces. They have examples of a client-side, ajax and static version at their showcase.

The ajax version boils down to starting the progressbar on a certain action (commandButton click in the example). It will automatically stopping when 100% is reached (an ajax event is fired then if needed, see the docs)

Relevant xhtml and bean parts of the showcase copied (almost) verbatim

xhtml

<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="PF('startButton2').enable()"/>
</p:progressBar>

bean

@Named
@ViewScoped
public class ProgressBarView implements Serializable {

    private Integer progress;

    public Integer getProgress() {
        if(progress == null) {
            progress = 0;
        }
        else {
            progress = progress + (int)(Math.random() * 35);

            if(progress > 100)
                progress = 100;
        }

        return progress;
    }

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

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

In the example on the PF showcase, you can also cancel it, but cancelling a real server-side action is out of scope here so I removed that:

Upvotes: 2

Related Questions