UX en Tecnología ORACLE Patrón: User Interface Shell Usage Guidelines

Por Plinio Arbizu
Publicado en Junio 2014


Definición

El patrón sugiere una organización estándar de nuestras interfaces con el propósito de facilitar su uso entre los usuarios. Esto significa agrupar y colocar los componentes en secciones claramente definidas con el propósito de facilitar su ubicación.
Imagine por ejemplo que colocáramos el botón de "Salir" en la parte superior derecha de la primera página de nuestra aplicación. En la segunda página optamos por colocar el botón en la parte inferior izquierda y así sucesivamente colocamos el botón de manera aleatoria en distintas posiciones de la página.
Cada vez que el usuario intente pulsar ese botón tardará algunos segundos en ubicarlo provocando una degradación de su productividad. Si colocamos los controles en posiciones definidas, evitará estos retrasos mejorando el desempeño del usuario.
Este ejemplo puede ser banal pero muestra la importancia de lograr acciones rápidas de los usuarios en las aplicaciones.
Para explicar la organización de componentes sugeridos por este patrón usaremos la siguiente interfaz de ejemplo identificando cada una de sus secciones.

Para empezar distinguimos dos áreas principales :

  1. Global Area: Región donde colocaremos aquellos componentes que estarán disponibles de manera permanente en nuestra interfaz.
  2. Como usted aprecia en el ejemplo hemos colocado en esa sección el logo de la aplicación y opciones como logout o help que siempre deberán estar disponibles en todos las interfaces que tenga nuestra aplicación.

  3. Work Area. Esta región expone los datos y operaciones que el usuario requiere para ejecutar un objetivo de negocio. En base a su naturaleza y comportamiento, estos componentes (datos y operaciones) son ubicados en estas 4 subregiones :

2.1 Work Area Information Area. En esta región se define el nombre del objetivo de negocio que el área de trabajo implementa. En nuestro ejemplo el proceso que se implementa es el de Invoices.
2.2 Regional Area. Las operaciones que el proceso de negocio requiere ejecutar estarán disponibles en esta región. Por ejemplo, el proceso de Invoice requerirá operaciones cómo la creación ó validación de invoices. Bueno esas operaciones se encuentra disponible como enlaces en esta región.  Que esta región se encuentre en la izquierda tampoco es una coincidencia. Si usted analiza aplicaciones como facebook o twitter notará que operaciones como Fotos, mensajes ó tendencias siempre tienen la misma orientación.

2.3 Local Area. Como comentamos previamente la Regional Area expone los enlaces a las operaciones del área de trabajo. Luego de hacer clic sobre algunas de las operaciones los datos asociados a esas opciones son mostradas en esta región denominada Local Area. Si vemos el ejemplo, se está mostrando datos asociados a la operación de edicion del Invoice en la región mencionada.
En este punto es importante destacar que existe una relación de causa efecto entre la Regional y Local Area.

2.4 Contextual Area. Algunas ocasiones existe datos auxiliares que acompañan a los datos del Local Area. Si usted mira esta sección en la pantalla ejemplo verá un resumen de los datos que se ingresan en la pantalla de edición. Otra posibilidad podría ser datos estadísticos o información útil que ayude al usuario en el proceso que se está trabajando en el local área.

En esta sección hemos dado una explicación básica de las áreas de trabajo, sin embargo su concepto es mucho más amplio y forma parte de un patrón que tocaremos más adelante.

Implementación

El objetivo de esta primera sesión técnica será implementar el patrón User Interface Shell Usage Guidelines.
La implementación del patrón se realizará creando una página que dispondrá de las secciones que hemos visto previamente.
Incluiremos en las secciones que usted definirá con componentes y servicios que han sido creados previamente y que se encuentran en el proyecto base con el cual usted deberá empezar este tutorial.
Usaremos el framework Oracle ADF y la herramienta Oracle Jdeveloper 11g las cuales incluyen asistentes que facilitan la implantación de los patrones descritos en este articulo.

Para conocer más de ADF puede visitar su sitio en internet.
http://www.oracle.com/technetwork/developer-tools/adf/overview/index.html

Usaremos la versión Studio Edition 11.1.2.0.0 de Jdeveloper que incluye el framework ADF.
Usted puede encontrar esta versión y otras en el sitio de la herramienta
http://www.oracle.com/technology/software/products/jdev/index.html

Como comentamos en la introducción utilizaremos un proyecto base el cual podrá ser descargado del sitio de OTN Latinoamérica:
Descargue aquí el proyecto base
Descomprímalo y ubíquelo en una carpeta de su equipo.

Listo, si ya instaló la herramienta y tiene el proyecto base en su equipo siga los siguientes pasos

  1. Abra la aplicación pulsando la opción File | Open del menú y seleccionado el archivo <ruta_de_equipo>/UXDemoApp/UXDemoApp.jws


  2. Las aplicaciones ADF manejan 2 proyectos : Model y ViewController. Sobre este último proyecto hacemos clic derecho para crear una nueva página la cual permitirá implementar el patrón. En el menú contextual elegir la opción JSF/Facelets | Page


  3. A continuación,  usted deberá definir el nombre,  ubicación y tipo de template que tendrá la página.
    Las páginas implementarán un objetivo de negocio y ofrecerán enlaces a las tareas para cumplir el objetivo indicado.
    En consecuencia recomendamos nombrar a la página similar al objetivo de negocio que implementa. En nuestro caso el nombre de la página será managerOrder.jspx.
    Un template define los elementos permanentes que tendrá la página cómo el logo, titulo, etc. Adicionalmente, el template permite dividir el contenido de una  página en regiones que luego serán ocupadas por los componentes de interfaz de usuario. Aplicar el template adecuado permitirá una rápida implementación del patronUser Interface Shell Usage Guideline.
    Jdeveloper y ADF ofrece 2 templates predefinidos que justamente ayuda a implementar el patron mencionado previamente.
    Por lo tanto definiremos el nombre de la pagina como managerOrder.jspx y elegiremos el template Oracle Dynamic Tabs Shell. 
    Pulse Ok.


  4. Una vez creada la página, note que debido a la aplicación del template tenemos una página con las regiones que hemos descrito previamente.


  5. Note que en la parte superior izquierda existe una lista denominada Show. Si usted elige la opción Fit Content to Window el contenido de la página se ajustará al contenido de su editor facilitando su manipulación.

  6. El patrón esta casi implementado. Tenemos las regiones definidas según lo sugerido por el patrón y vamos ahora a poblar los componentes de la sección Global Area con el logo de la compañía y algunos enlaces que simulen operaciones comunes como por ejemplo LogOut y ayuda.
  7. Para modificar el logo simplemente utilice la paleta de "Structure" (Ubicado en la parte inferior izquierda del IDE) y seleccione el componente que hace referencia al template de la página af:pageTemplate


  8. Luego en la paleta "Property Inspector" (ubicado en la inferior izquierda del IDE) verá todas las propiedades que permiten controlar el template que se aplicó a la página. Existen muchas, sin embargo para probar su funcionamiento modifiquemos las siguientes propiedades
    • brandingTitle= Easy to Use
    • logoImagePath=/images/orderAce.png
    • headerSplitterPosition=40


  9. Regresemos a la paleta de "Structure" y note que debajo del nodo af:pageTemplate existe muchas facets o regiones que definen secciones especificas para colocar componentes dependiendo de su utilidad. Por ejemplo notará que existe una sección denominada Global Link que expone los enlaces a operaciones comunes como "Help", "LogOut"y todas aquellas que deben exponerse de manera permanente al usuario.
    Vamos a aprovechar esta sección para colocar una par de enlaces que simulen estas operaciones al usuario.


  10. Arrastre de la paleta de componentes el control Navigation Panel hacia la sección globalLinks. El panel servirá de contenedor de nuestros enlaces.


  11. Elija el componente creado y modifique su propiedad Hint por Buttons. (Por default los enlaces se muestran como tabs)


  12. Ahora haga clic derecho sobre el componente creado y elija la opción Insert Inside af:navigationPane | Navigation Item de manera similar a lo mostrado a continuación.


  13. Sobre el componente Navigation Item modifique su propiedad Text por "LogOut"


  14. Repita el proceso 11 y 12 para crear el enlace para la "Help".
  15. Probemos la página haciendo clic derecho sobre ella y pulse la opción Run


  16. El resultado será el siguiente.


Conclusión

Hasta este momento contamos con una página con regiones definidas para poder incrustar nuestros componentes de negocio.
Si bien el ejemplo es sencillo, ha sido muy fácil de implementar y nos permite organizar los componentes de negocio que se ofrecerán en la pantalla.  De esta manera el usuario dispondrá siempre de componentes específicos en posiciones definidas agilizando su labor diaria.
Note que aún no hemos poblado el "Work Area". Eso se debe a que existe un patrón que detalla cómo llenar esta área y que será explicada en el siguiente capítulo de esta serie.


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.