Creación de interfaces de usuario utilizando Prism

Existen muchos retos significativos de ingeniería vinculados al rendimiento, escalabilidad y bajo acoplamiento que afecta al diseño de la interfaz de usuario. Por ejemplo, para una aplicación de comercio electrónico, es posible que se desee mostrar los artículos del catálogo, los precios, las opciones de envío, ofertas especiales y otro tipo de información en una única ventana. Esto implica que la interfaz de usuario es una interfaz de usuario compuesta, es decir, obtiene los datos de diversos contextos delimitados del dominio.

¿En qué nos puede ser de ayuda Prism?

Prism es un marco de trabajo que permite crear aplicaciones XAML en Windows Presentation Foundation, Windows 10 (Universal Windows Platform) y Xamarin Forms, que son débilmente acopladas, con código mantenible y testeable. La versión actual, Prism 6, es totalmente de código abierto y se puede encontrar en GitHub (http://bit.ly/1Lwfyk8). El origen de la librería Prism está en Microsoft Patterns & Practices y los miembros del equipo central que desarrollaron las versiones anteriores, desde Prism 1 hasta Prism 5, han realizado el esfuerzo de entregar a la comunidad de código abierto la última versión, Prism 6 (ahora el proyecto forma parte de .NET Foundation, http://bit.ly/11k2xKO).

En el presente artículo mostraré un ejemplo muy básico de cómo crear una interfaz de usuario con Prism 6 y WPF (para .NET 4.5). Se trata de un lector RSS para los blogs de Sogeti y puedes encontrar el código completo en GitHub (http://bit.ly/1LXTVZo).

Confeccionar la vista principal (ShellWindow & Regions)

El primer paso antes de comenzar a utilizar Prism es pensar qué información se va a mostrar en la vista principal del lector RSS y cómo se va a distribuir dicha información.

Al tratarse de un lector RSS lo normal es mostrar una primera lista que contenga los distintos canales RSS de los blogs de Sogeti para que el usuario pueda navegar por ellos. En segundo lugar, es mostrar otra lista con las últimas novedades (posts) del canal RSS seleccionado por el usuario, como el título, fecha de publicación y una breve descripción.  Y, en último lugar, es mostrar la lectura completa del post seleccionado por el usuario.

En nuestro caso y aplicando los conceptos definidos por Prism, la vista principal del lector RSS es la ShellWindow y las tres secciones diferentes de datos: la lista de canales RSS, la lista con los posts del canal seleccionado y la vista de lectura del post seleccionado, son lo que se denomina en Prism, regiones (Regions).  Los datos de las fuentes RSS de cada blog de Sogeti van a estar distribuidos en diferentes proyectos o módulos (Modules), de esta manera, si en un futuro se desea agregar más fuentes RSS se creará un módulo nuevo sin que se vea afectado ni el diseño ni la funcionalidad de la ShellWindow, igual pasa si se desea modificar un módulo (solamente estará afectado dicho módulo modificado sin implicar a terceros).

Antes de comenzar, debemos agregar al proyecto los paquetes NuGet necesarios para utilizar Prism:

• Prism.Core v6.0.1
• Prism.Unity v6.0.1
• Prism.Wpf v6.0.1

Creamos la ShellWindow como una ventana WPF normal e importamos el espacio de nombres de la librería Prism:

Las regiones se definen en el XAML de la siguiente manera:

Para inicializar Prism necesitamos crear una secuencia de arranque o Bootstrapper.  En nuestro caso vamos a utilizar Unity como contenedor de dependencias, por lo tanto, la clase Bootstrapper tiene que heredar de la clase UnityBootstrapper de Prism:

Dentro del Bootstrapper, creamos e inicializamos la ShellWindow sobrescribiendo los métodos CreateShell() y InitializeShell(), respectivamente:

Ahora solamente basta con invocar el Bootstrapper y ya tenemos nuestra ShellWindow con sus pertinentes regiones preparada para ser utilizada.  Para ello, sobrescribimos el método OnStartup() de la clase App:

Definir los módulos de los distintos canales RSS (Modules)

Por cada uno de los canales RSS de los blog de Sogeti creamos un proyecto de biblioteca de clases donde definimos y registramos las vistas para las distintas regiones de la ShellWindow.  Nos vamos a centrar a modo de ejemplo en el módulo para el canal RSS de ITBLOGSOGETI.  Para la vista del canal RSS vamos a utilizar el siguiente diseño:

Para los posts de dicho canal el siguiente diseño en formato lista:

Y para el post que seleccione el usuario se mostrará con el siguiente diseño emulando un navegador de internet:

Al proyecto tenemos que agregarle los paquetes NuGet de Prism anteriormente mencionados. A continuación definimos las diferentes vistas con sus respectivos ViewModel (MVVM) y creamos una clase denominada ITBlogModule que implementa la interfaz de Prism IModule:

Se sobrescribe el método Initialize() para inicializar el módulo. Aquí registramos las vistas que tienen que estar siempre cargadas y disponibles en una región determinada de la ShellWindow utilizando el método RegisterViewWithRegion() del gestor de regiones RegionManager.  Para el resto de vistas que se cargan bajo demanda del usuario se registran en el contenedor Unity utilizando el método RegisterType().

Si compilamos el proyecto y copiamos la DLL resultante en el directorio del proyecto EXE que contiene la ShellWindow, al ejecutarle se carga el módulo que hemos definido siempre y cuando no olvidemos de incluir en el Bootstrapper la inicialización de nuestro catálogo de módulos (sobrescribiendo el método CreateModuleCatalog()).

Para la carga bajo demanda del resto de vista debemos hacer uso del método RequestNavigate() del RegionManager.  Por ejemplo, cuando el usuario selecciona el canal RSS del blog tendremos que cargar la vista en formato lista mostrando los últimos posts publicados.

Puedes encontrar más detalles de Prism consultando el código fuente del proyecto y la documentación en GitHub.

¿Quieres saber más sobre desarrollo de proyectos de IT y soluciones Microsoft? Visita nuestra web.

Óscar Fernández González es desarrollador de software para la plataforma .NET de Microsoft prácticamente desde sus orígenes con la versión 1.0 lanzada en Enero de 2002.  Se incorporó a Sogeti en Octubre de 2007, donde ha desarrollado aplicaciones para clientes de diversos sectores como bancario, seguros y media.