Patrón de Arquitectura por Capas. Componentes presentes en la Capa de Presentación

Diseño de Componentes de Interfaz de Usuario

Las interacciones más complejas conllevan el diseño de componentes de proceso de interfaz que permiten organizar los elementos de la interfaz y controlar la interacción con el usuario. Los componentes de proceso de interfaz resultan especialmente útiles cuando la interacción del usuario sigue una serie de pasos predecibles, como al utilizar un asistente (Wizard) para realizar una tarea determinada.

Cuando un usuario interactúa con un elemento de interfaz de usuario, un evento es generado que llama código en una función controladora. Esta función, a su vez hace un llamado a los componentes de negocio, para implementar las acciones deseadas y obtener cualquier dato necesario que requiere ser mostrado. Finalmente, la función controladora actualiza la interfaz de usuario. De esta manera, estamos separando el código de la Vista y el Controlador. Esto ayuda mucho en el mantenimiento de esta capa.

Según el diagrama anterior, la Vista haría parte de los Componentes de Interfaz de Usuario, mientras que el controlador haría parte de los Componentes de Proceso de Interfaz. Las siguientes son las principales responsabilidades de los componentes de interfaz de usuario:

  • Comunicación con el usuario (entradas y visualización – rendering de los resultados)
  • Realizar el formateo de valores (como el formato adecuado de las fechas).
  • Interpretar los eventos y acciones del usuario, y llamar la función correspondiente del controlador.
  • Limitar entradas y validaciones de información. Por ejemplo, un campo Quantity puede limitar las entradas del usuario a valores numéricos.
  • Transformaciones simples sobre la información digitada por el usuario
  • Almacenamiento de datos en caché. En ASP.NET, se puede especificar el almacenamiento en caché de la salida de un componente determinado de la interfaz de usuario para evitar el continuo procesamiento del mismo.
  • Paginación de información. Es frecuente, especialmente en las aplicaciones Web, mostrar largas listas de datos como conjuntos paginados.
  • Personalizar el aspecto de la aplicación en función de las preferencias del usuario o el tipo de dispositivo de cliente utilizado (aplicaciones móviles).

Cliente Web o Cliente Windows?

Básicamente existen dos tipos de clientes en las aplicaciones empresariales, los que utilicen formas Web (Web Forms) y los que utilicen Formas Windows (WinForms). A continuación se muestra una tabla con las ventajas y desventajas de cada una de ellas y cuando pueden ser utilizadas:

Web Forms  WinForms 
 Despliegue automático  Siempre requiere que la primera y nuevas versiones sean instaladas en el disco de la maquina cliente. .NET incluye una característica llamada “SmartClient” que baja automáticamente las nuevas versiones de assemblies a la maquina desde un servidor Web central. Algunos puntos a tener en cuenta:

 El tamaño de los assemblies en .NET es muchísimo menor que en Visual Basic, lo que agilizaría la transferencia por la red.

 .NET a diferencia de COM, no requiere el registro de Dynamic Link Libraries (DLLs) o componentes, que anteriormente complicaban considerablemente la instalación en cliente.

 En el caso de no poderse bajar la nueva versión, la aplicación se inicia con la versión más reciente en disco.

 Recuerde que por la arquitectura de capas, solamente si fueron hechos cambios en la interfaz de usuario, será necesario actualizar la versión en el cliente.

 Según el punto anterior, la capa de presentación debe ser lo más delgada posible, con solo código de interfaz y validaciones simples. Pero con la autonomía suficiente, y así que no dependa completamente de los componentes de negocio (y por consiguiente de los tiempos de red).

 Solo requiere tener instalado previamente el Framework de .NET. La plataforma de hardware y software actual lo soporta sin problemas.

Cualquier interacción con el usuario requiere un viaje completo al servidor Web. Es completamente dependiente del servidor. Un modelo de eventos limitado, complica la programación en cliente (scripts). Por lo anterior, el tiempo de respuesta de la aplicación depende en todo momento de la red. Una interfaz de usuario con el mejor tiempo de respuesta y más fácil de programar
Por su modelo basado en servidor, la interacción con otras aplicaciones ejecutándose en la máquina de cliente es bastante complicada. Muy seguramente requiere el desarrollo de controles, lo que complica el deployment Fácil interacción con otras aplicaciones ejecutándose en la maquina cliente
La aplicación depende completamente de la red y el servidor. Lo que ocasiona un gran consumo del ancho de banca de la red. Muchas operaciones pueden ser desarrolladas localmente, lo que disminuye el consumo de red. Todo el tráfico de red se reduce a llamados remotos y datos
Manejo del estado del usuario se hace en el servidor El estado se almacena en cada cliente. Esto aumenta considerablemente la escalabilidad del sistema
Capacidades limitadas de impresión. Soporte completo a impresión y reportes

Acceso a componentes lógicos de acceso a datos desde la interfaz de usuario

Las interfaces de usuario de determinadas aplicaciones necesitan procesar los datos disponibles como consultas expuestas por los componentes de de acceso a datos. Un ejemplo muy común de este escenario se presenta cuando necesitamos llenar una lista (ListBox, DataGrid, ComboBox, etc.) con información que cambia muy poco (departamentos, ciudades, oficinas, etc.). En estos casos, sería poco eficiente encapsular el acceso a los datos a través de la capa de negocios (que añadiría ningún valor), y no permitir un acceso directo.

El acceso directo a los componentes de acceso a datos desde la interfaz de usuario parece contradecir el concepto de disposición en capas. No obstante, resulta útil en este caso considerar a la aplicación como un servicio homogéneo; se llama a la aplicación y ésta decide cuáles son los componentes internos más adecuados para responder a una solicitud determinada.

Esta decisión se puede tomar si se está dispuesto a acoplar los métodos y esquemas de acceso a datos con la semántica de la interfaz de usuario. Esta relación requiere el mantenimiento conjunto de los cambios de la interfaz de usuario y de los esquemas.

Diseño de componentes de proceso de interfaz

La interacción del usuario con la aplicación puede seguir un proceso predecible. Por ejemplo, puede que la aplicación comercial de ejemplo requiera que los usuarios escriban los datos de los productos, vean el precio total, escriban los detalles de pago y, finalmente, escriban la información relativa a la dirección del pedido. Este proceso conlleva la visualización y aceptación de la entrada de un número de elementos de interfaz de usuario, y el estado del proceso (los productos solicitados y los detalles de las tarjetas de crédito, entre otros) se debe mantener en la transición de un paso a otro del proceso. Para facilitar la coordinación del proceso de usuario y controlar el mantenimiento del estado requerido al visualizar varias páginas o formularios de la interfaz de usuario, es necesario crear componentes de proceso de interfaz.

La siguiente figura muestra los componentes de proceso de interfaz pueden ser compartidos por cada uno de las implementaciones de interfaz de usuario que tiene la aplicación.

Los componentes de proceso de interfaz se implementan normalmente como clases .NET que exponen métodos a los cuales pueden llamar las interfaces de usuario. Cada método encapsula la lógica necesaria para realizar una acción específica en el proceso de usuario. La interfaz de usuario crea una instancia del componente del proceso de interfaz y la utiliza para efectuar la transición a través de los pasos del proceso. El diseño de componentes de proceso de interfaz para su uso por parte de varias interfaces da lugar a una implementación más compleja, debido al aislamiento de los problemas específicos de los dispositivos.

Las siguientes son las principales responsabilidades de los componentes de proceso de interfaz:

  • Separan el flujo de la interacción del usuario de la implementación o dispositivo en el que ocurre.
  • Realizan el seguimiento del estado actual de la interacción del usuario.
  • Encapsulan el modo en que las excepciones pueden afectar al flujo de proceso de usuario.
  • Proporcionan un modo simple de combinar los elementos de la interfaz de usuario en los flujos de interacción del usuario sin que sea necesario volver a desarrollar el flujo de datos ni la lógica de control.

 En resumen, la separación de la funcionalidad de interacción del usuario en componentes de interfaz y proceso de interfaz conlleva las siguientes ventajas:

  • El estado de la interacción de usuario de ejecución larga se mantiene más fácilmente, lo que permite el abandono y la reanudación de la interacción, probablemente incluso utilizando una interfaz de usuario diferente. Por ejemplo, un cliente podría agregar varios elementos a un carro de compra utilizando la interfaz de usuario basada en el Web y, a continuación, llamar a un representante de ventas para completar el pedido.
  • Varias interfaces de usuario pueden utilizar el mismo proceso. Por ejemplo, en la aplicación comercial de ejemplo, se puede utilizar el mismo proceso de usuario para agregar un producto a un carro de compra tanto desde la interfaz de usuario basada en el Web como desde la aplicación basada en Windows Forms.

Tomado con fines Educativos de la Guia de Patrones, Practicas y Arquitectura .NET, Autores:  Ernesto Marquina, Jose David Parra.  Microsoft Services.

Autor: arevalomaria

Ingeniero de Sistemas, Magister en Gerencia y Tecnologia de la Informacion, Certificaciones: ITIL V3, CCNA, Microsoft Certified Professional.

2 comentarios en “Patrón de Arquitectura por Capas. Componentes presentes en la Capa de Presentación”

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s