Programming Pattern PF
Total Page:16
File Type:pdf, Size:1020Kb
PHP PROGRAMMING PATTERN FOR THE PROGRESS FEEDBACK USABILITY MECHANISM Drafted by Francy Diomar Rodríguez, Software and Systems PhD Student, Facultad de Informática. Universidad Politécnica de Madrid. ([email protected]) Content 1 Introduction ..................................................................................................................... 1 2 Progress Feedback UM design pattern ............................................................................. 1 3 Progress Feedback UM Pattern (PHP) ............................................................................. 3 1 Introduction This document presents an implementation-oriented design pattern and the respective programming pattern developed in PHP for the Progress Feedback usability mechanism (UM). 2 Progress Feedback UM design pattern This is a design pattern for implementing the Progress Feedback usability mechanism. The Solution section details the responsibilities that the usability functionality has to fulfil. The Structure section contains the proposed design and the Implementation section describes the steps necessary for codifying the proposed design. NAME Progress Feedback UM PROBLEM When a system process is likely to block the UI for longer than two seconds, the user must be informed about the progress of the requested task. CONTEXT Highly interactive web applications and time-consuming processes that interrupt the UI for longer than two seconds SOLUTION Components are required to fulfil the responsibilities associated with the UM. They are: A component that display the right progress indicator depending on the available information: time, percentage, number of units processed, task completed, if no quantities are known: Indeterminate Progress Indicator. Generate a server-side mechanism for the active process to update and report progress Create a cyclical process that queries the progress of a task until completion. A component to inform the user of task completion. A component that display the completion message and close the progress indicator. If progress information is available and the technology is multithreaded, determine whether a process is still active. STRUCTURE 1 IMPLEMENTATIÓN Create a ProgressFeedbackUI component as a Widget to display the progress indicator and the user warning. Widget or a control is an element of the graphical user interface (GUI) that displays information; it can run as a small standalone program, but in this case functions as a process within the same application. Create a ProgressFeedbackHandler class that acts as the handler of the main UM functions: periodically check the progress of a task or process to a component on the server (multithreaded systems) or may be informed from a client component forward (single-threaded systems), update the progress indicator and close the progress indicator when it is necessary. If progress information can be gathered on the process while it is running on the server (multithreaded systems), create a ProgressResult class on the server side to which the process will report its progress and which can be queried from the client. Create a CheckerProcess class that stores and provides information on whether a process is active. Create a FeedbackFUF component that operates like a façade for all the components that are used in the progress feedback FUF functionality implementation: ProgressFeedbackHandler, ProgressFeedbakUI, CheckerProcess and ProgressResult. Implement the appropriate functionality in the application so that in each process that takes more than two seconds, the progress indicator starts with appropriate parameters through the Create () method of the facade FeedbackFUF. Implement the appropiate functionality in the application in order to that, in the multithreaded systems the ProgressResult component will be update with the suitable progress information, and in the single-threaded systems the calls to the server will be make so than can supply the progress information through the FeedbackFUF façade Implement the suitable functionality in order to when a process is canceled inform through of FeedbackFUF in order to update the corresponding information in the Widget (canceling message), in addition must deactivated the process using the ProcessChecker class. Implement the appropiate functionality in order to close the progress indicator and send a notice or message when is necessary. RELATED Singleton Pattern, Façade Pattern and MVC Pattern PATTERNS 2 3 Progress Feedback UM Pattern (PHP) Programming patterns specify the details of the implementation using a specific language. They offer either a standalone solution or describe how to implement particular aspects of the components of a design pattern using the programming language features and potential. The Solution section describes the steps necessary for codification and is equivalent to the Implementation section of the design pattern. The Structure section shows the design tailored for the PHP language and the Example section shows the PHP code for each step of the solution. NAME Progress Feedback UM (PHP) PROBLEM When a system process is likely to block the UI for longer than two seconds, the user must be informed about the progress of the requested task. CONTEXT Highly interactive web applications and time-consuming processes that interrupt the UI for longer than two seconds. SOLUTIÓN 1. Create a ProgressFeedbackUI component as a Widget to display the progress indicator and the user warning. Widget or a control is an element of the graphical user interface (GUI) that displays information; it can run as a small standalone program, but in this case functions as a process within the same application. 2. Create a ProgressFeedbackHandler class that acts as the handler of the main UM functions: periodically check the progress of a task or process to a component on the server (multithreaded systems) or may be informed from a client component forward (single-threaded systems), update the progress indicator and close the progress indicator when it is necessary. 3. If progress information can be gathered on the process while it is running on the server (multithreaded systems), create a ProgressResult class on the server side to which the process will report its progress and which can be queried from the client. (** In this case don’t apply) 4. Create a CheckerProcess class that stores and provides information on whether a process is active. 5. Create a FeedbackFUF component that operates like a façade for all the components that are used in the progress feedback FUF functionality implementation: ProgressFeedbackHandler, ProgressFeedbakUI, CheckerProcess and ProgressResult. 6. Implement the appropriate functionality in the application so that in each process that takes more than two seconds, the progress indicator starts with appropriate parameters through the Create () method of the facade FeedbackFUF. 7. Implement the appropiate functionality in the application in order to that, in the multithreaded systems the ProgressResult component will be update with the suitable progress information, and in the single-threaded systems the calls to the server will be make so than can supply the progress information through the FeedbackFUF façade. 8. Implement the suitable functionality in order to when a process is canceled inform through of FeedbackFUF in order to update the corresponding information in the Widget (canceling message), in addition must deactivated the process using the ProcessChecker class. 9. Implement the appropiate functionality in order to close the progress indicator and send a notice or message when is necessary STRUCTURE This is the structure tailored for the progress feedback UM design pattern PHP. 3 EXAMPLE Create a ProgressFeedbackUI component as a Widget to display the progress indicator and the user warning. /* -------------------------------------------------- //Widget: ProgrressFeedbackUI -----------------------------------------------------*/ (function( $, undefined ) { $.widget( "ui.ProgressFeedbackUI", { options: { width: "300px", modal: false, name: null, labelTop: null, labelBottom: null, labelMin: null, labelMax: null, labelValue: null, viewCancel: false, autoClose: false, align: {}, value: 0 }, _create: function() { //Crear retroalimentacion de pregreso this.element .addClass('ui-progress-feedback') .attr({role: 'progressFeedback'}); this.$dialogBox = $('<div class="ui-progress-feedback-box ui-widget ui-widget-content ui- corner-all"></div>').appendTo(this.element); //Adicionar titulo 4 this.$name = $('<div class="ui-progress-feedback-header ui-widget-header ui-corner- all"></div>').appendTo(this.$dialogBox); //Adicionar contenido this.$content = $('<div class="ui-progress-feedback- content"></div>').appendTo(this.$dialogBox); this.$content.hide(); //Adicionar bar this.$feedbackbar = $('<div class="ui-progress-feedback-bar">' +' <div class="ui-progress-feedback-bar-top"><span id="label-top" class="title"></span></div>' +' <div class="ui-progress-feedback-bar-center">' +' <span id="label-value" class="title-value"></span>' +' <div class="progress" style="height:100%;"></div>' +' </div>' +' <div class="ui-progress-feedback-bar-bottom">' +' <div class="text-indicator" style="float:left">Δ<br/><span id="label- min"></span></div>' +' <div class="text-indicator" style="float:right">Δ<br/><span id="label- max"></span></div>' +' <div id="label-bottom" class="title" style="margin-top:0.4em;"></div>' +' </div>' +'</div>').appendTo(this.$dialogBox); this.$labelTop