Comment by Ammoula essaid on SupportIvyTeam's answer

Ammoula essaid — Fri, 22 May 2015 22:12:36 -0400

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

Answer by SupportIvyTeam

SupportIvyTeam — Mon, 07 Oct 2013 17:21:12 -0400

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'}");.

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.

Answers to: Show a real time progress bar in a Html User Dialog?

Comment by Ammoula essaid on SupportIvyTeam's answer

Answer by SupportIvyTeam