UX en Tecnología ORACLE - Patrón: Work Area

Por Plinio Arbizu
Publicado en Junio 2014


Definición

El registro de un pedido, la recepción de mercadería ó la toma de asistencia de empleados son procesos de negocio que deben ser representados en interfaces (pantallas) para poder ser automatizados por medio de una solución informática.
Este proceso de abstracción puede enriquecerse haciendo uso del patrón Work Area  el cual mejora la experiencia de uso de las interfaces de negocio y en consecuencia la productividad de los usuario.
El patrón se implementa agrupando las tareas que realizaría un rol para completar un objetivo de negocio en una única interfaz.
Por ejemplo, pensemos en la gestión de pedidos como un objetivo de negocio. Para que un rol determinado pueda gestionar los pedidos deberá disponer la capacidad de realizar tareas tales como "Registrar el Pedido", "Anular un Pedido", "Consultar el Catalogo de Productos", etc.   Por lo tanto, si permitimos el acceso a esas tareas desde una interfaz estaremos implementando el patrón WorkArea.
Es decir, si usted tiene un objetivo de negocio que debe ser realizada para un rol determinado y lo materializa en una página que consolida todas las tareas necesarias para cumplir ese objetivo. Entonces usted está implementando el patrón "Work Area" 
Por lo general un Work Area tendrá el mismo nombre que el objetivo de negocio.
Un ejemplo gráfico de la implementación nos permitirá entenderlo mejor.



Este pantalla por ejemplo implementa el patrón por la siguientes razones :

  1. Expone en una sola interfaz (Pantalla) las tareas ligadas a un rol determinado.  Note que en la región Global Area se muestra el perfil "Sales Assistant" quien está autorizado a ejecutar las tareas expuestas en la "Regional Area"
  2. Expone en una sola interfaz (Pantalla) las operaciones ligadas a un Objetivo de Negocio. El objetivo de negocio "Manage Order" es indicado en la Work Information Area y las tareas que están expuestas en la Regional Area permiten cumplir el mencionado objetivo de negocio.

La ubicación del Global Area y Regional Area  fueron definidas en el capitulo anterior de este artículo.

Es importante destacar el motivo por el cual se organiza la interfaz de esta manera. Al consolidar las tareas según el objetivo de negocio y el perfil, agilizamos  la interacción del usuario con la aplicación de negocio.
Con esta disposición el usuario requeriría solo dirigir su mirada a la izquierda y un solo click para acceder a otra tarea ligada al objetivo de negocio.
Si trabajará con un árbol de menú tendría que navegar entre múltiples opciones para poder encontrar la opción correcta perjudicando su productividad.
La implementación del patrón puede aplicarse de dos maneras dependiendo de la naturaleza del objetivo de negocio

  • Si el objetivo de negocio no requiere la ejecución de tareas paralelas sobre la interfaz entonces se podrá implementar el patrón en modo No-tabs model. Esto significa que el usuario sólo podrá cargar una sola tarea en la sección Local Region de la página.
  • Si por el contrario objetivo de negocio requiere la ejecución de tareas paralelas entonces se podrá implementar el patrón en modo Dynamic Tabs model. Esto implica que el usuario podrá cargar varias tareas en la intefaz. Cada tarea será cargada en  un tab distinto en la Local Region

Usted puede profundizar su conocimiento sobre este patrón en el siguiente enlace

Implementación

En la anterior parte de nuestro tutorial creamos una página con regiones definidas que fueron establecidas gracias al uso del patrón UI Shell. Ahora, sobre esa página, implementaremos  el patrón Work Area.
Lo que haremos será crear una área de trabajo para la toma de pedidos que incluya enlaces hacia las tareas cómo Registro de Pedido, Eliminación de Pedido, Consulta de Productos, etc. Adicionalmente asumiremos que se requiere un trabajo de multi tareas en paralelo por qué haremos uso del modo Dynamic Tabs model lo que nos permitirá agregar dinámicamente múltiples tabs en la misma interfaz.
Algo que debemos recordar del laboratorio anterior es que creamos una página denominada manageOrder.jspx. Esta página nos ayuda en la implementación el patrón "Work Area" porque define una única interfaz desde donde podrá ejecutarse varias tareas ligadas al objetivo de negocio de Gestionar las Ordenes.
Como regla se recomienda que el nombrado de las páginas tenga relación con el objetivo de negocio que se implementa.
Bien otra cosa que debemos recodar es que durante la creación de la página elegimos el uso del template Oracle Dynamic Tabs Shell. Esto lo hicimos para poder implementar el modo Dynamic Tabs model y poder cargar varias tareas a la vez.




Con esas consideraciones continuemos trabajando en el proyecto.

  1. Primero colocaremos el título al área de trabajo. Para eso, el template reserva el facet "Global Tabs" donde colocaremos una etiqueta con el nombre del Objetivo de Negocio que el Work Area Implementa. Arrastre el componente Output Text hacia dicha sección.


  2. Modifique sus propiedades con los siguientes valores
    • Value: Manager Order
    • Color: Window
    • Font Size: Large
    • Font Weight: Bold
  3. Con estos cambios tendremos el titulo definido para nuestro interfaz

  4. Según el capitulo anterior definimos el Regional Area como el lugar donde debemos colocar los enlaces hacia las tareas. El template que hemos aplicado a la página establece el facet Navigation que coincide con la región definida por el patrón en donde colocaremos los enlaces. En este caso arrastraremos desde la paleta de componentes el layout Panel Accordion hacia el facet mencionado.
  5. Inspecciones el componente creado desde la paleta de estructura y notará que se ha incluido dentro del layout un componente af:showDetailItem selecciónelo como indica la siguiente imagen y modifique su propiedad Text por el valor de Tasks



  6. Sobre el showDetailItem arrastre el Layout Panel List. Sobre este panel colocaremos los enlaces a las tareas.



  7. Al hacer clic derecho sobre el panelList aparecerá un menú contextual, elija la opción Link para agregar un nuevo enlace.



  8. Modifique la propiedad Text por el valor "Create Customer"
  9. Repita los pasos 6 y 7 para crear un nuevo enlace a la tarea "Search Product"
  10. Ahora hagamos clic derecho sobre la página y seleccionemos la opción Run


  11. El resultado será la página que ahora implementa el patrón Work Area debido a que consolida todas las tareas ligadas al objetivo de negocio Manage Order.



  12. Bien notemos que sólo tenemos la página con los enlaces. Obviamente si hace clic sobre ellos no observará ningún comportamiento porque no hemos programado nada sobre estos.
    Si quisiéramos añadir comportamiento sobre los enlaces deberíamos ser capaces de afectar solamente la Local Area (Region Central) de la página, la cual debería cargar un tab con el contenido asociada con la tarea que estamos eligiendo.
    Bien, justamente para lograr esto Oracle ADF cuenta con una tecnología denominada TaskFlow.
    Un TaskFlow encapsula interfaces y lógica en un módulo que implementa una tarea de negocio, por ejemplo "Create Customer". En consecuencia tendríamos un taskflow por cada tarea requerida en la interfaz
    Adicionalmente los taskflows  pueden incrustarse en una region de la página. En nuestro caso para cubrir la Local Area.
    Finalmente una de las ventajas más importantes de los taskflow es que son componentes reusables. Esto significa que si por ejemplo usted necesita que la tarea "Create Customer" sea usada para implementar otro objetivo de negocio (lease otra página) podrá hacer uso de la misma evitando programar otro módulo.
  13. El concepto de ADF Taks Flow es mucho más amplio, por lo que recomendamos conocer más de esta tecnología en el siguiente enlace

  14. Bien, el objetivo de este tutorial no es que desarrolle un taskflow sino que entienda su uso y vea como nos ayuda a implementar el patrón "Work Area". El proyecto que usted está utilizando en este proyecto ya dispone de los taskflows que ejecuta las tareas de "Create Customer" y "Search Product". Lo único que nos tocaría hacer es invocar a los métodos que nos permitan cargar esos taskflow al hacer clic sobre los correspondientes enlaces.
    Para ello, desde la paleta de Structure seleccione el enlace "Create Customer" y en su paleta de propiedades modifique la propiedad  ActionListener #{tabShellLauncher.openCreationCustomerTab}



  15. Repita el paso 12 modificando ahora la propiedad ActionListener del enlace "Search Product"  por #{tabShellLauncher.openSearchProductTab}
  16. Repita el paso 9 y ejecute la página.
  17. Una vez que la página se encuentre ejecutando pulse el enlace de "Create Customer" y mostrará la pantalla para realizar la creación del cliente.



  18. Note que se está mostrando en la página sólo la tarea de "Creacion de Cliente". Sin embargo si el usuario quisiera ejecutar paralelamente la tarea de buscar información del producto?.  Justamente esa es una de las características que la aplicación del patrón, además de los componentes de ADF ofrece. Ahora haga clic sobre el enlace "Search Product" y notará que se carga una nueva pestaña con la información de esa tarea.



  19. Mejor aún podría usar este comportamiento de multi tarea por ejemplo para consultar la información de 2 productos en paralelo. En la tabla de resultado haga clic sobre el nombre del primer producto" Plasma HD Television" el resultado será el detalle del producto en otro tab.



  20. Ahora haga clic sobre el tab "Search Product" para regresar al listado de producto y ahora haga clic sobre el segundo producto " PlayStation 2 Video Game". Un nuevo tab con el detalle de ese producto se abrirá y si usted quiere comparar la información de ambos productos simplemente haga clic entre los tabs de los mencionados productos.



  21. Note que se están abriendo múltiples ventanas lo que permitiría al usuario un trabajo de múltiples tareas en simultaneo. Esto permitirá un trabajo más productivo que es el propósito principal del uso de los patrones.

Conclusión

En esta serie de artículos hemos mostrado solo 2 patrones y hemos visto su utilidad y sobre todo el impacto que tiene sobre el desempeño de los usuarios.

Algo que es bueno resaltar es el hecho que ORACLE no solo nos brinda la buena práctica a nivel de usuarios sino las herramientas para lograr una rápida implementación de estas recomendaciones agilizando nuestro desarrollo , promoviendo la productividad de nuestros usuario y  sobre todo mejorando el desempeño de nuestra organizacion.

 


Plinio Arbizu Oracle ACE Director y Fusion UX Advocate for Oracle, con más de 12 años de experiencia profesional trabajando en proyectos con tecnología ORACLE (Oracle ADF, Oracle WebCenter) en Perú, México y  USA.
Es coautor del libro "Web 2.0 Solutions with Oracle WebCenter" y cuenta con certificaciones en ADF y WebCenter.
Plinio es fundador junto con Rolando Carrasco del Grupo de Usuarios ORACLE de México (ORAMEX) y es frecuente expositor en eventos sobre tecnología en toda Latinoamérica.
Puede seguirlo por medio de su blog: plinioa.blogspot.com
Actualmente sus intereses profesionales giran alrededor de Enterprise 2.0 y el diseño de Experiencias de Usuarios para aplicaciones de negocio.