Sunday 1 February 2015

seam richfaces progress bar

What I want to achieve here is:


After the end user clicks on 'confirm and submit' button, the server processes the input which could take minutes. While the end user is waiting, we show a richfaces modal with a progress bar to indicate the progress. When the processing is done, server redirects end user to the processing result URL.

 <h:form id="form-passportupload">  
           <a4j:commandButton value="confirm and submit" action="#{progressBarVerifier.updateDocumentAsync()}" oncomplete="#{progressBarVerifier.isPageValidated}?Richfaces.showModalPanel('progressBarModal'):Richfaces.hideModalPanel('progressBarModal');"  
                          ignoreDupResponses="true" ajaxSingle="true" reRender="progressBarPanel,fileupload-error,fileupload-terms-confirm">  
           </a4j:commandButton>  
 </h:form>  


      <rich:modalPanel id="progressBarModal">  
           <h:form>  
                <a4j:outputPanel id="progressBarPanel">  
                Please wait while we check your uploaded document. This may take up to 5 minutes.  
                <rich:progressBar value="#{progressBarVerifier.progressBean.value}" label="#{progressBarVerifier.progressBean.value} %" minValue="0" maxValue="100" timeout="300000" interval="3000" enabled="#{progressBarVerifier.progressBean.enabled}" >  
                  <f:facet name="initial">  
                    <h:outputText value="Processing" />  
                  </f:facet>  
                  <f:facet name="complete">  
                    <h:outputText value="Process completed">  
                         #{redirectHelper.redirectToVerifySinglePage()}  
                    </h:outputText>  
                  </f:facet>  
                </rich:progressBar>  
                </a4j:outputPanel>  
           </h:form>  
      </rich:modalPanel>  



ProgressBean looks like this. Please note the value is updated in updateDocumentAsync() method. At the back end, we use Httpclient to do the POST and update ProgressBean.value in the process.


 public class ProgressBean  
 {  
      private boolean _enabled = false;  
      public boolean isEnabled()  
      {  
           return _enabled;  
      }  
      public void setEnabled(boolean enabled)  
      {  
           _enabled = enabled;  
      }  
      private Long value = new Long(0);  
      public Long getValue()  
      {  
           return value;  
      }  
      public void setValue(final Long value)  
      {  
           this.value = value;  
      }  
 }  


asyncUpload() method has to be Seam @Asynchronous and you can do server end validation before it. Otherwise, progress bar will not start to update until updateDocumentAsync() has finished.



 public void updateDocumentAsync() throws Exception  
 {  
   _validator.doValidation();  
   _asyncUploader.asyncUpload();  
 }  




Please see attached screen shot below for the results.





References:
  1. https://achorniy.wordpress.com/2010/10/22/show-dynamic-process-progress-in-seam-richfaces/ 
  2. http://forkbomb-blog.de/2011/time-consuming-processes-with-seam-richfaces-a4jpoll-and-quartz 
  3. http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/rich_progressBar.html

No comments :

Post a Comment