4.8.1 Motivación
La motivación de este refactoring es la de resolver el problema de mantener al usuario esperando sin información sobre lo que está sucediendo luego de que se efectúa una operación.
Generalmente cuando el usuario dispara una operación que puede llevar varios minutos de procesarse, por ejemplo en los sitios de Home Banking, reservas de vuelos y transacciones electrónicas, si el sitio no provee una manera de indicar al usuario que su operación se está realizando, este puede disparar esta operación varias veces al no notar ningún cambio en la pantalla. Esto puede traer consecuencias importantes ya que un usuario disparando varias veces la misma operación reiteradas veces, puede tener efectos negativos sobre la operación que se intenta realizar
Básicamente este refactoring consiste en agregar información acerca del progreso de la operación, usualmente es una barra de proceso, o un reloj de arena mostrando el progreso de la operación accionada por el usuario
4.8.2 Mecanismo
El mecanismo de este refactoring depende del tipo de aplicación:
Si es una aplicación RIA utilizaremos una agregación de ADVs, haremos que un ADV de procesamiento se haga visible luego de que el usuario haga click sobre el botón o link que dispara la operación, y cuando la misma termine el ADV se ocultará y se mostrará el ADV de los resultados.
La Figura 54 muestra el témplate del ADV que se usará para introducir la página de procesamiento. Este ProcessingPageADV se instanciará con dos elementos, el ADV del formulario de ingreso de datos y el botón que disparará la operación. Cuando la operación es completada, se navega a la página de resultados.
ProcessingPage <1, B> ADV
Input: 1
ProcessingADV
Button : B Cancel: Button
Figura 54 - Processing Page ADV
1:
Event: MouseClicked Pre-Cond: Focus(Process)
Post-Cond: owner.¡sOperationlnProgress() && perCont=perCont-lnput+Process¡ngADV
2:
Event: MouseClicked Pre-Cond: Focus(Cancel)
Post-Cond: owner.isOperationCancelled() && perCount=perCont-ProcessingADV+lnput
3:
Event: operationDone Pre-Cond: owner.isResultReady() Post-Cond' owner.navigateToResults()
Figura 55 - ADV-Chart para Processing Page ADV
InputPageADV ResultsPageADV
InputFormADV
ProcessButton
ResultsADV
ProcessAgainButton
After “Add Processing Page” Refactoring InputPageADV ProcesalngPageADV InputFormADV ProcessingADV ProcessButton ResultsPageADV
Figura 56 - Add Processing Page Refactoring - RIA application.
Si es una aplicación Web tradicional este refactoring es realizado en tres pasos básicos:
1. Crear una nueva página agregando un ADV vacío.
2. Agregar widgets en el nuevo ADV para la barra de progreso y probablemente un texto.
3. Cambiar la interfaz asociada con el widget que desencadena la operación, y que también navegue hacia la página de procesamiento. OOHDM usa ADV-charts, una variante de state-charts, para especificar los aspectos dinámicos de ADVs.
InputPageADV InputFormADV ProcessButton ResultsPageADV ResultsAOV ProcessAgainButton
Figura 57 - Add Processing Page Refactoring - Traditional Non-RIA application
4.8.3 Ejemplo
Este tipo de refactoring es muy útil en sitios de banca electrónica, donde algunas operaciones pueden tardar cierta cantidad de tiempo y el usuario no tiene noción del progreso de la operación. Incluso tener un página que indique que la operación se está realizando evita que los usuarios clickeen varias veces sobre el link, evitando que la operación se dispare varias veces.
En el siguiente ejemplo usaremos al sitio www.santanderrio.com.ar. en la Figura 58 vemos la página principal del sitio luego de logueamos, vemos que hay una operación sobre la tarjeta de crédito que es “ver último resumen”, esta operación puede tardar varios minutos antes de mostrarnos resultados. La página de resultados puede verse en la Figura 60.
After 'Add Processing Page" Refactoring
InputPageADV
InputFormADV
ProcessButton
ProcessingPageADV
Please wait while we process your request Progress Bar ResultsPageADV ResultsADV ProcessAgainButton
El resultado de aplicar el refactoring sería agregar la página que se muestra en la Figura 59.
a¡^ S a n t a n d e r R í o In ic io ' M is d a to s ! C o n ta c tó n o s A y u d a Técnica O nline A y u d a S a lir
CUEN TAS T A R JE T A S CR ÉDITO S IN V E R SIO N E S P A G O S Y T R A N SF E R EN C IA S SEG UR O S M O B IL E B A N K IN G S U P E R C L U B A H O R R O S |
GUSTAVO ALBERTO MAZZEI TeL ce lu la r Actualizar
Cuenta Unica
a il.com Actualizar
Pagá todas tus facturas desde aquí y ganá.
Hay $ 1.000.000 en premios
1 Üi Mensajes y Avisos En asta momento Usted no tiene ningún Mensaje de Santander Río.
SUPER Si desea modificar su
P A C O suscripción al servicio de
Mensajes y Avisos, inorase
1 MRS IHFORMflCIÓNl desde aguí.
S a ld o $ S a ld o u $ s
A ntas da asa ho rario, los m o v im ie n to s dal e w tra cto con astas c a ra c te rís tic a s daba
Tarjeta Nro
Vis «a xxxx-3134
Ver térmrios v condiciones
S a ld o \ S a ld o u $ s
0,00
Últimos movimientos
V«r .«sumen c u .r ^ .
Puntos SuperClub Límite de Acuardo Ota. $ t.00
»
. del día siguiente hábil al depósito. >►
Ahorros Santander » Limita de compra Visa
hhhh-3 1 34
Ver último resumen »
E a a ir
Oitliii' Eonhiii'i
O pere Seguro con O n iin o Banking
a
Figura 58 - Página inicial de un sitio de banca electrónica.
4 ^ S a n t a n d e r R i o ink¡. mi. <<.>.. ■ c « u < u n « * , „j. m<™<. o.i«.. *,r.r
CUENTAS TARJETAS CRÉDITOS INVERSIONES PAGOS Y TRANSFERENCIAS SEGUROS MOBILE BANKING SUPERCLUB AHORROS
Se está e re ctu a n d o !.. consulta de su in fo rm a ció n . P o r f a v o r a g u a rd e ...
4^ Santander Río In ic io M is d a to s C o n ló e te n o s . A y u d a T écnica O nline A y u d a i S a lir
fllFNTAS TARJFTAS fRFDITOS INYTRSIONFS PAGOS Y TRANSFFRFNf IAS SFGIIROS MOBII F BANKING SIIPFRfLlJB AHORROS
I Visa mnnm-3134
I Mensaje* y Aviso* I Solicitud de tarjetas adicionales I Ultimo Resumen I Límite* y Disponibles • Payo
I Últimos Consumos I Consumos Mensuales I Adhesión a Débito Automático
TARJFTAS ÚL TIMO RTSUMfN V isa N ú m ero x x x x - 3 134
Liquidée ¡ói V en cim ien to
S a ld o s P e s o s D ó lar e s Próximo Actual Anterior 31 12 2*08 27 11 2*08 30 10 2*08 13 01 2000 1012 2008 11 112008 0.02 0.00 0.00
Compra i - « Compra en cuotas I Financiación
F e c h a D e s c r i p c i C o n p ro b . I x p . 0 I ir p .U $ S ll/ll/oe SU PACO EN PESOS
20/11/08 B0NIF PR0H0 GARBARINÜ
12/11/08 GARBARINO C.01/06 003296*
TOTAL TAPJHTA X XXX XX>K >XXX 3134 *
27/11/08 IHPUESTO £>S SELLOS f 1,91
27/11/08 GASTOS BHISI0N RESUMEN 4,00
27/11/08 DB IVA $ 21* 7,£6 1,S9
27/11/08 GESTION C0N T P A T .C0BHRTURA VIDA 3,£6
P a g o Mínimo
P e s o s D ó lar e s
0.00
I
*Pi igraae Superclub - Puncos disponibles al 19/11/06 1. £39
Figura 60 - Página de "Ultimo resumen" del sitio de banca electrónica.