Primefaces dynamic label for progressbar

Question

Hi I am using JSF with Primefaces. I have a long task, during which I want to show user a progress bar, with the progress (int) and status (String) as an indicator. The two parameters are mapped to the two fields of a backend bean. If I use <p:poll>, I can update both, as in the following code:

<p:progressBar id="progress" ajax="false" value="#{backendBean.progress}" widgetVar="pbAjax"
  labelTemplate="{value}%: #{backendBean.statusMessage}" style="width:400px; font-size:12px"/>
<p:poll interval="1" id="poll" autoStart="false" update="progress" widgetVar="pbPoll"/>

Once user press a button, pbPoll.start(). This works fine. Now I have two questions:

(1) is it possible to hide the progressbar initially? I know I can put display:none in the css and let it show up when the button is clicked. But the poll update will hide the progressbar again. Maybe use rendered. If so, please tell me how.

(2) can I use without poll since progressBar has ajax function itself? Notice that I set ajax=false in the code above. On their website, it says "dynamic progress label" is added. I tried but somehow the label only displays the "{value}%" without the statusMessage. I wonder if this is because #{statusMessage} requires another fetch, therefore ignored, while both are retrieved in poll.

Thank!

Solution

1. Yes you can. It's actually really easy. Wrap your <p:progressBar/> in a panel like <h:panelGrid/> and set the rendered attribute on the progress bar to a boolean in the backing bean

    <h:panelGrid id="progressBarPanel">
                   <p:progressBar id="progress" interval="100"  rendered="#{backendBean.progressBarRendered}" ajax="true" value="#{backendBean.progressMonitor}" widgetVar="pbAjax" labelTemplate="{value}%: #{backendBean.progressMonitor}" style="width:300px; font-size:12px"/>
    </h:panelGrid>
   

   and then use a button (or something) to toggle the value of the boolean and update the panel

     <p:commandButton value="Test Progress Bar" action="#{addressUpdate.progressBarControl}" oncomplete="pbAjax.start();" update="progressBarPanel"/>
   

   One thing you need to be careful about is that the same button that toggles the progress bar's visibility should not use the onclick event but rather the oncomplete to start the progress bar, the reason being that onclick fires before the request hits the server and as at that time, the progress bar does not exist in the DOM so start() will be undefined.

2. You're right on that one. If you'll take a look in your developer console, you'd see the following for the ajax response to the progress bar

    "thePanel:progress_value":20
   

   And that pretty much sums up what the progress bar cares about during the update, the value binding on the bar. Stick with what you have now if this is a must-have for you.

Comments

[user996616]

Thanks for your reply kolossus! I forgot to use <h:panelGrid> to wrap the elements. It works now. Also thanks for confirming my suspicion about Primefaces' dynamic label feature. I'll have to stay with the ajax+poll combination since messages are required to display to user as well.