Graphic dynamic chart for progress bar

Question

Hi, I am using JSF with Primefaces. I have a long task, during which I want to show the user a progress bar, as an indicator - progress (int) and status (String). Two parameters are mapped to two bean backend fields. 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"/> 

As soon as the user clicks the button, pbPoll.start() . It works great. Now I have two questions:

(1) Is it possible to hide the progress bar first? I know that I can put display: none in css and not show when the button is pressed. But updating the survey will again hide the progress indicator. Maybe use rendered. If yes, please tell me how.

(2) can be used without polling since progressBar has ajax function? Please note that in the above code I set ajax = false. On its website, it says that a dynamic progress label has been added . I tried, but somehow on the label only "{value}%" is displayed without statusMessage. Interestingly, this is due to the fact that #{statusMessage} requires a different selection, therefore it is ignored, and both are retrieved in the survey.

Thanks!

Answer 1

• Yes, you can. It is really very easy. Wrap <p:progressBar/> in the panel, for example <h:panelGrid/> , and set the rendered attribute on the progress bar to a boolean in the backup 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 switch the boolean value and refresh the panel

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

  One thing you should be careful about is that the same button that toggles the progress bar visibility should not use the onclick event, but rather oncomplete to fire the progress bar, the reason is that onclick fires before of how the request gets to the server, and at this time the progress indicator does not exist in the DOM, so start() will be undefined.

• You are right about that. If you look into the developer console, you will see the following for ajax to respond to the progress bar

    "thePanel:progress_value":20 

  And this largely sums up with regard to the progress indicator during the update, the binding of the value on the panel. Stick to what you have now, if necessary for you.