I sometimes have server side actions that last for quite some time and I want the user kept informed about the progress in real time. How can I do that easily?

asked 07.10.2013 at 17:11

SupportIvyTeam's gravatar image

SupportIvyTeam ♦♦
1.4k102118122
accept rate: 77%

edited 08.10.2013 at 14:33


You can achieve this with a combination of PrimePush and p:progressBar. You can use p:blockUI in addition to block the UI. See this entry in the Q&A for how to install PrimePush.

<h:head>
        <script>
                function handleProgress(progressJson) {
                        var progressData = eval("(" + progressJson + ")");
                        progressBar.setValue(progressData.progress);
                        $("#msg").text(progressData.msg);
                }
        </script>
</h:head>
<h:body>
        <h:form>
                <p:panel id="panel" header="Realtime ProgressBar">
                <p:commandButton id="btn" value="Start" actionListener="#{logic.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="#{data.channel}" onMessage="handleProgress"></p:socket>
</h:body>

On lines 15 to 18 we define the progress bar and a label within a p:blockUI element. 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.

The aforementioned JavaScript function handleProgress receives a JSON string as input. It then transforms this JSON into a object (line 4) with the attributes progress and msg. We will use progress for the progress in percentage and msg for the label to display.

So, big question? From where we will call handleProgress? Well, the answer is on line 20. With p:socket a connection from the server to the client is opened with which the server can send messages directly to a client. And as soon as a message is send, then the JavaScript function defined in the onMessage attribute will be called.

The channel attribute of p:socket defines the topic on which the connection is listening. In our case we use a process data member channel. For a progress bar, you must ensure that every dialog has its own channel. So, e.g. in the startup of the dialog you can set something like

in.channel = "/realtime/" + java.util.UUID.randomUUID().toString();.

Now, to send an update to the progress bar use the PrimePush API, e.g.

PushContextFactory.getDefault().getPushContext().push(in.channel, "{ 'progress' : 10, 'msg' : 'Extract data'}");.

real time progress bar

Please try as well the example project.



Note: This question and answer was originally posted by Heinrich Spreiter on his Xpert.ivy Hacker blog. Henry, many thanks to you for your enthusiastic work.

link

answered 07.10.2013 at 17:21

SupportIvyTeam's gravatar image

SupportIvyTeam ♦♦
1.4k102118122
accept rate: 77%

edited 08.10.2013 at 14:11

hi , please how can i use this exemple with primefaces 4.0

(22.05.2015 at 22:12) Ammoula essaid Ammoula%20essaid's gravatar image

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "Title")
  • image?![alt text](/path/img.jpg "Title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Tags:

×58
×51

Asked: 07.10.2013 at 17:11

Seen: 11,401 times

Last updated: 22.05.2015 at 22:12