[SOLVED]Real Time Progress bar with a blockUI doesn't work

UI Components for JSF
Post Reply
cascamorris
Posts: 8
Joined: 18 Dec 2013, 12:18

21 Jan 2015, 10:41

I have a button and when I press on it, the method obtains data from the data base and show the records in a datatable. The action takes more than 1 minute and I want to show a progress bar (the time is variable)

I found the solution in this page: http://answers.axonivy.com/questions/16 ... ser-dialog

The problem is that I show the progress bar, but always is "0%". In the javascript function never enter.

This is my XHTML:

Code: Select all

<h:form id="formAllocate">

	<p:panel id="panel" header="Realtime ProgressBar">
		<p:commandButton id="btn" value="Start"
			actionListener="#{scheduleMB.startLongRunningProcess}">
		</p:commandButton>
	</p:panel>
	
	<p:blockUI block="panel" trigger="btn">
		<p:progressBar widgetVar="progressBar" style="width:300px"
			labelTemplate="{value}%">
		</p:progressBar>
		<span id="msg"></span>
	</p:blockUI>

</h:form>

<p:socket channel="/realtime" onMessage="handleProgress"></p:socket>

<script type="text/javascript">
	function handleProgress(progressJson) {
		alert('begin');
		var progressData = eval("(" + progressJson + ")");
		progressBar.setValue(progressData.progress);
		$("#msg").text(progressData.msg);
	}
</script>
This is my Bean:

Code: Select all

 
public void startLongRunningProcess(){
    EventBus eventBus = EventBusFactory.getDefault().eventBus();
    eventBus.publish("/realtime", "{ 'progress' : 10, 'msg' : 'Extract data'}");
    
    list =
        getAuxService().findList(userSelected, initDate2,
            endDate2);
  }
In the web.xml:

Code: Select all

<!-- Primefaces PUSH -->
	<servlet>
		<servlet-name>Push Servlet</servlet-name>
		<servlet-class>org.primefaces.push.PushServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
		<async-supported>true</async-supported>
	</servlet>
	<servlet-mapping>
		<servlet-name>Push Servlet</servlet-name>
		<url-pattern>/primepush/*</url-pattern>
	</servlet-mapping>
in my pom.xml I have this dependencies:

Code: Select all

<dependency>
	<groupId>org.atmosphere</groupId>
        <artifactId>atmosphere-runtime</artifactId>
	<version>2.2.2</version>
</dependency>

<dependency>
	<groupId>org.roboguice</groupId>
	<artifactId>roboguice</artifactId>
	<version>2.0</version>
</dependency>
I'm using primefaces 5.1, spring 3.2.5, hibernate 4.2.7, java 1.7, primefaces extension 3.0.0

What I'm doing wrong???

Thx for the help and answer.
Last edited by cascamorris on 22 Jan 2015, 13:47, edited 1 time in total.

kukeltje
Expert Member
Posts: 9605
Joined: 17 Jun 2010, 13:34
Location: Netherlands

21 Jan 2015, 17:46

Try to get a basic push example from the showcase working first... The things you post are either incomplete because you did not post everything or you just miss code.

cascamorris
Posts: 8
Joined: 18 Dec 2013, 12:18

21 Jan 2015, 19:29

Hi kukeltje:

Watching the showcase I add this bean:

Code: Select all

package com.at4.amsys.intranet.controller;

import org.apache.commons.lang3.*;
import org.primefaces.push.annotation.OnMessage;
import org.primefaces.push.annotation.PushEndpoint;
import org.primefaces.push.impl.JSONEncoder;

@PushEndpoint("/realtime")
public class PushResource {
  
  @OnMessage(encoders = {JSONEncoder.class})
  public String onMessage(String data) {
      return StringEscapeUtils.escapeHtml4(data);
  }
}
And The app using this class enter into the javaScript function, but I obtain an error. This is the function:

Code: Select all

<script type="text/javascript">
		function handleProgress(progressJson) {
			var progressData = eval("(" + progressJson + ")");
			progressBar.setValue(progressData.progress);
			$("#msg23").text(progressData.msg);
		}
</script>
The error is that progressBar is not defined, but in the example, say:

It is important to define the widgetVar variable because we will access it in the JavaScript function handleProgress to set the current value for the progress bar.


Why does not define the variable "progressBar?????

kukeltje
Expert Member
Posts: 9605
Joined: 17 Jun 2010, 13:34
Location: Netherlands

21 Jan 2015, 22:26

See the widgetvar part in the 4.0 - 5.0 migrationguide https://code.google.com/p/primefaces/wi ... ationGuide

cascamorris
Posts: 8
Joined: 18 Dec 2013, 12:18

22 Jan 2015, 11:06

Hi kukeltje:

Thank you!!!

I replaced the code:

Code: Select all

PF('progressBar').setValue(progressData.progress);
But the progress bar it moves, but only moves once, it is not updated.

Thx.

kukeltje
Expert Member
Posts: 9605
Joined: 17 Jun 2010, 13:34
Location: Netherlands

22 Jan 2015, 11:35

cascamorris wrote:But the progress bar it moves, but only moves once, it is not updated.
It is 99.99% certain that that is caused by you not updating it.... The progressbar cannot know by itself how it should progress...

cascamorris
Posts: 8
Joined: 18 Dec 2013, 12:18

22 Jan 2015, 11:55

OK, now I undertand how it works.

I must call eventBus.publish and I must update the value of the progress bar manually.

Thank you very much kukeltje.

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 14 guests