Progress Bar not working

UI Components for JSF
Post Reply
mustufa
Posts: 31
Joined: 06 Mar 2010, 06:49
Location: India
Contact:

09 Mar 2010, 15:13

start and stop are the client side api, you need to apply them with your own widgetVar. pbAjax is just an example.

i have already included the below statement in my code:-

Code: Select all

<p:progressBar widgetVar="pbAjax" ajax="true" effect="easeIn" value="#{progressBean.progress}" oncompleteUpdate="growl"	completeListener="#{progressBean.handleComplete}"/>
And my manage bean has the below coding

Code: Select all

@ManagedBean(name="progressBean")
@RequestScoped
public class ProgressBean 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 handleComplete() {
		FacesContext facesContext = FacesContext.getCurrentInstance();
		facesContext.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Progress Completed", "Progress Completed"));
	}
}
I am not sure what is client api is. is the above statement true or something else is required.

Thanks

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

09 Mar 2010, 15:25

How do you start your progress?

mustufa
Posts: 31
Joined: 06 Mar 2010, 06:49
Location: India
Contact:

09 Mar 2010, 15:26

this is the code of my xhtml page

<h:body>
<p:growl id="growl" sticky="true"/>

<h3>Client Side ProgressBar</h3>
<span onclick="start()">Start | </span>
<span onclick="cancel()">Cancel</span>
<script type="text/javascript">PrimeFaces.onContentReady('j_idt12:j_idt14', function() {
pbAjax = new PrimeFaces.widget.ProgressBar('j_idt12:j_idt14', {ajax:true,effect:YAHOO.util.Easing.easeIn,effectDuration:1.0,formId:'j_idt12',actionURL:'/prime-showcase/ui/progressBar.jsf',interval:3000,oncompleteUpdate:'growl',hasCompleteProcess:true});})
</script>
<p:progressBar widgetVar="pbClient" effect="easeOutStrong"/>

<h3>Ajax ProgressBar with Growl Integration</h3>
<h:form>
<span onclick="pbAjax.start()">Start | </span>
<span onclick="pbAjax.cancel()">Cancel</span>
<p:progressBar widgetVar="pbAjax" ajax="true" effect="easeIn" value="#{progressBean.progress}" oncompleteUpdate="growl" completeListener="#{progressBean.handleComplete}"/>
</h:form>

<h3>Bottom to Top</h3>
<span onclick="startProgressDir()">Start | </span>
<span value="#" onclick="cancelProgressDir()">Cancel</span>
<p/>
<p:progressBar widgetVar="pbDir" effect="bounceOut" direction="btt" width="30px" height="75px"/>
</h:body>

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

09 Mar 2010, 16:01

Full code of the online example can help you as a starting point.

http://code.google.com/p/primefaces/sou ... sBar.xhtml

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 24 guests