Xamarin Form Prism (Sin Extension Template)

June 29, 2020June 29, 2020 steven.checo.19

Este post vamos a crear un proyecto de Xamarin Form e implementaremos el Framework Prism sin necesidad de hacer uso del Extension Template que nos suministra la documentación oficial.

Que es Prism?
Prism es un framework para construir aplicaciones XAML libremente acopladas, mantenibles y comprobables en WPF y Xamarin Forms. Hay versiones separadas disponibles para cada plataforma y se desarrollarán en líneas de tiempo independientes. Prism proporciona una implementación de una colección de patrones de diseño que son útiles para escribir aplicaciones XAML bien estructuradas y mantenibles, que incluyen MVVM, inyección de dependencia, comandos, EventAggregator y otros.

Su creador es Brian Lagunas.

Que es MVVM?
El patrón modelo–vista–modelo de vista (Model View ViwModel) es un patrón de arquitectura de software. Se caracteriza por tratar de desacoplar lo máximo posible la interfaz de usuario de la lógica de la aplicación.

Modelo: Representa la capa de datos y/o la lógica de negocio, también denominado como el objeto del dominio. El modelo contiene la información, pero nunca las acciones o servicios que la manipulan. En ningún caso tiene dependencia alguna con la vista.

Vista: La misión de la vista es representar la información a través de los elementos visuales que la componen. Las vistas en MVVM son activas, contienen comportamientos, eventos y enlaces a datos que, en cierta manera, necesitan tener conocimiento del modelo subyacente.

Modelo de Vista: El modelo de vista es un actor intermediario entre el modelo y la vista, contiene toda la lógica de presentación y se comporta como una abstracción de la interfaz. La comunicación entre la vista y el viewmodel se realiza por medio los enlaces de datos.

Una vez que entendemos lo anterior, empezaremos a trabajar con nuestro proyecto.

Vamos a crear un proyecto Xamarin Form en blanco, que nos quede de la siguiente manera.

Vamos a Eliminar los archivos MainPage y AssemblyInfo.cs y crearemos nuestra estructura MVVM tan solo añadiendo tres carpetas con los nombres Models, Views y ViewModels, nuestro proyecto nos quedara de la siguiente manera.

Ahora vamos a abrir nuestro Manejador de Paquetes (NuGet Package Manager), haciendo click derecho en la solución > click en Manage NuGet Package for Solution y en la pestaña Buscador (Browser), buscaremos el siguiente paquete: Prism.Dryloc.Forms e instalaremos en los todos los proyectos que tenemos.

Vamos a ir a nuestro archivo App.cs y vamos a reemplazar el código que tiene actual con el siguiente: En nuestro archivo App.xaml vamos a reemplazar el codigo con el siguiente. Ahora iremos a nuestro proyecto en Android y agregaremos las siguientes lineas de código en nuestro MainActivity.cs, la primera linea que esta en el código a continuación, reemplazara la linea ya existente LoadApplication(new App()); por la que muestro, se ubica dentro del metodo OnCreate y la clase que muestro se agregara dentro de la clase MainActivity. Seguimos con nuestro proyecto iOS con el archivo AppDelegate.cs y añadiremos las lineas de código que siguen a continuación, siguiendo pasos similares al del proyecto en Android, la primera linea ira dentro del método FinishedLaunching y reemplazara la linea ya existente LoadApplication(new App()); por la que indico mas abajo y la clase iOSInitializer ira dentro de nuestra clase principal AppDelegate. Hasta aqui, ya tenemos la base principal para empezar a trabajar con nuestro proyecto utilizando Prism, a continuacion les enseñare como agregar las vistas y los modelos de vista , para todo esto, antes vamos a crear una clase dentro de la carpeta ViewModels y lo nombraremos ViewModelBase.cs, agregaremos el codigo siguiente a nuestra clase. Habiendo hecho esto, vamos a crear nuestra vista, dentro de la carpeta Views y esta la nombraremos MainPage, el tipo de archivo sera Content Page, lo único que modificaremos aquí, es que en la propiedad Title del Content Page, vamos a hacer un Binding: Title:”{Binding Title}” y listo, lo dejaremos lo restante tal cual. Dentro de la carpeta ViewModels agregaremos una clase llamada MainPageViewModel.cs y debe añadiremos las siguientes lineas. Ahora solo nos falta agregar nuestra vista y agregarle su modelo de vista desde nuestro archivo App.cs y dentro de nuestro método RegisterTypes agregaremos la siguiente linea de código. Y ahora si, ya podremos ejecutar nuestra aplicación y fijarnos en nuestro NavBar, ahí nos debería aparecer, el titulo que le agregamos desde el constructor de nuestra clase ViewModel que asignamos para MainPage.

Esto ha sido todo para empezar a trabajar con Prism sin necesidad de hacer uso del Extension Template, si te ha gustado el post, recuerda dejar un comentario para saber que te gusta y seguir creando mas contenido, hasta el próximo post.