STEW: indicating progress
Retrieving data from the Internet might take some time. Provide users with visual feedback on how the operation is progressing. STEW displays a progress indicator during data retrieval from Twitter.
+The progress indicator is implemented in the main.html file.
<!-- LOADER --> +<div id="loader_popup" class="popup hidden"> + <table class="popup_window"> + <tr><td> </td></tr> + <tr class="background"> + <td class="loader"> + <div class="title">LOADING</div> + <img src="images/loader.gif" alt="Loader"> + <div class="subtitle">Please wait while we process data...</div> + </td> + </tr> + <tr><td> </td></tr> + </table> +</div>+
The layout of the loader pop up screen is defined in the CSS files.
+
Figure: STEW progress indicator
To display the screen when a request is made to the Twitter service and to hide it when a response is received, add the following function to TwitterService.js:
TwitterService.prototype.showProgress = function( show ) {
+ if (this.progressId) {
+ if (show == null)
+ show = true;
+
+ Helper.show( this.progressId, show );
+ if (!show) {
+ // If we hide the progress bar, set to null here so we
+ // don't do that twice and overwrite some other manager's
+ // progress bar.
+ this.progressId = null;
+ }
+ }
+}
+
+Update the functions that get triggered when a request is issued and when a response has been processed, as listed in the code snippet below:
+TwitterService.prototype._doRequest = function( url, type ) {
+ this.showProgress();
+ ...
+}
+
+TwitterService.prototype.handleSuccessResponse = function( arg ) {
+ this.showProgress( false );
+ ...
+}
+
+TwitterService.prototype.handleErrorResponse = function( status ) {
+ this.showProgress( false );
+ ...
+}
+
+