Building enterprise level application often requires loading large amount of data. This process can take some time. To provide a quality experience end users expect loading screens. This informs the user that they are interacting with the application.
Using Primefaces and Bootstrap 3 javascript you can easily alert end users when the server is working on processing data.
Consider the case of an end user is searching a database for collection of cars. The database may contain N amount of cars. Therefore, we must assume the process could take up to several hundred milliseconds. This is perfect situation for a loading bar.
The modal
The modal is a standard Bootstrap 3 Modal and has a simple progress bar. In the footer there is a reloading link in case the ajax call fails to return a response from the server.
<div class="modal fade" id="pleaseWaitDailog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Processing</h4> </div> <div class="modal-body"> <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="99" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> <span class="sr-only">99% Complete</span> </div> </div> </div> <div class="modal-footer"> Stuck? <a href="javascript: window.location.reload()">try reloading...</a> </div> </div> </div> </div>
Primefaces events
The commandLink component of primefaces offers many great features. The most useful for this senario is the onstart and onsucess event. Onstart executes a javascript method when the ajax request begins to the server, the oncomplete executes a method when the response of returned from the server. There is no guarantee that the response will come back, this is why the modal has the reloading link.
<p:commandLink id="search" action"#{myBean.doSearch}" update="searchResults" styleClass="btn btn-primary" onstart="$('#pleaseWaitDailog').modal('show');" onsuccess="$('#pleaseWaitDailog').modal('hide');"> <i class="fa fa-search"></i> Search </p:commandLink>
Using this commandLink, it will call the bootstrap modal library to show, then hide the processing modal defined above. This will give the end user a better interaction with the server.