Proyecto base con xamarin classic y mvvmcross 5.1 para IOS, Android y UWP
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Base.Core
Base.Droid
Base.IOS
Base.UWP
img
.gitignore
Base.sln
README.md

README.md

Cuando se empieza a desarrollar con Xamarin y buscamos tutoriales por internet vemos una seria patrones de diseño, buenas prácticas y siglas que dar algo de respecto cuando no lo conocemos, como puede ser MVVM, inyección de dependencias, contenedores IOC, converters, command, binding, custom presenter y etc…

La parte buena es que de forma inicial existen frameworks como MvvmCross que ofrece toda la arquitectura inicial para empezar sin tener que conocer cada pieza al detalle desde el principio.

Para crear nuestro proyecto “Base” con MvvmCross desde 0, hay que seguir los siguientes pasos.

Paso 1, crear una solución vacía. Está solución será el contenedor principal de todos nuestros proyectos que vamos agregar.

Nueva solución

Paso 2, agregar un proyecto para la lógica de negocio, un proyecto de tipo PCL. Para agregar tenemos que hacer clic con el segundo botón sobre el nombre de la solución vacía, al hacer clic con el segundo botón se abre un menú de opciones y debemos elegir agregar y luego nuevo proyecto.

 

Ahora tenemos que seleccionar el tipo de proyecto que queremos, en nuestro caso un proyecto de tipo C# que sea una librería de clase portable, lo vamos a llamar de Base.Core. Base porque es el nombre de nuestra solución y Core porque se trata del proyecto que va a contener la lógica de negocio, nomenclatura usada de forma extendida dentro de las comunidades de desarrolladores.

Seleccionar una PCL

Paso 3, elegir el perfilado de la PCL, seleccionamos los tipos de proyectos que queremos compartir la lógica de negocio, en nuestro caso necesitamos para IOS, Android y UWP.

 

Haga clic en aceptar y se creará el proyecto. Elimine el archivo Class1.cs que no vamos a necesitar.

 

Paso 4: Crear todos los proyectos de plataforma, Android, UWP y IOS. El proceso es similar al anterior, pero en lugar de crear un proyector de tipo PCL, vamos a crear un de tipo plataforma.

Para Android

Para IOS

Para UWP - Windows

Seleccionamos la versión de destino de la aplicación y la versión mínima que suportará la aplicación.

Paso 5, la principal ventaja de Xamarin es la reutilización, como toda nuestra lógica de negocio está en el proyecto Base.Core, lo vamos referéncialo en todos los proyectos de plataforma. Para referenciar haga clique con el segundo botón sobre referencias y seleccione la opción agregar referencia del menú. Haga clic sobre solución y elijar el proyecto de tipo PCL (Base.Core) y haga clic en aceptar.

El resultado es la librería Base.Core dentro de las referencias.

 

Paso 6, Agregar la librería de MvvmCross desde nuget, existe una versión que agiliza la configuración del proyecto. Haga clic con el segundo botón sobre la solución Base y seleccione la opción administrar paquetes nuget para la solución y busque por mvvmcross starter.

 

 

Seleccione todos los proyectos y haga clic en instalar. Se va abrir una ventana que indica todo que se va instalar en cada uno de los proyectos, haga clique en aceptar para empezar la instalación, este proceso puede tardar unos segundos.

 

Paso 7, Comprobar la configuración del proyecto de Base.Core.

Podemos comprobar que al instalar el paquete de nuget de MvvmCross se agregó algunos archivos en el proyecto.

Un archivo MainViewModel.cs con la lógica de negocio “hola mundo” que contiene una propiedad pública que se usará en la vista de la plataforma y un ICommand que llamar a una función que volver a reiniciar el valor de la propiedad pública.

 

La clase App.cs proporciona la inicialización para su lógica de negocio principal y sus modelos de vista.

La línea que esta destacada en el código, será la vista principal a cargar, en este caso cargará la vista MainView, esta vista está asociado al viewmodel MainViewModel.

 

Para configurar la base del proyecto “hola mundo” no tenemos que hacer nada más en este proyecto.

Paso 8, Configurar proyecto Android. MvvmCross facilita la configuración, tenemos que hacer 2 cosas, agregar la referencia del proyecto Core que ya hicimos en los pasos anteriores y eliminar el archivo MainActivity.cs , en su lugar mvvmcross va a trabajar con las vistas que hereda de MvxActivity.

Una vez eliminado el archivo MainActivity.cs ejecutamos la solución en el simulador de Android o en un terminal. En mi caso voy a ejecutar en un Samsung SM, solo tenemos que hacer clic sobre el botón.

Ha ocurrido un error en la compilación, hay un recurso que no se está encontrando.

Abra el fichero SplashScreen.cs y modifique la siguiente línea:

, Icon = "@mipmap/icon"

Por esta:

, Icon = "@drawable/icon"

Vuelva a compilar la aplicación. Ahora todo debería funcionar de forma correcta, debería ver una pantalla negra con un texto “Hello MvvmCross” con un botón de reset.

Antes de empezar a crear su aplicación, elimine la carpeta ToDo-MvvmCross.

 

Paso 9, configurar proyecto IOS. Tenemos que hacer la referencia del proyecto de Core que ya hicimos en los pasos anteriores y modificar el archivo AppDelegate.cs , los nuevos valores a aplicar están en el archivo AppDelegate.cs.txt

AppDelegate ahora debe hereda de MvxApplicationDelegate.

Debemos cambiar:

public class AppDelegate : UIApplicationDelegate

Por:

 public partial class AppDelegate : MvxApplicationDelegate

También es necesario modificar la función FinishedLaunching.

Debemos cambiar:

public override bool FinishedLaunching (UIApplication application, NSDictionary launchOptions)
{
     // Override point for customization after application launch.
	// If not required for your application you can safely delete this method

return true;
}

Por

public override bool FinishedLaunching(UIApplication application, NSDictionary launchOptions)
{
            Window = new UIWindow(UIScreen.MainScreen.Bounds);

            var setup = new Setup(this, Window);
            setup.Initialize();

            var startup = Mvx.Resolve();
            startup.Start();

            Window.MakeKeyAndVisible();

            return true;
}

 

El último paso es agregar las referencias de MvvmCross.

using MvvmCross.Core.ViewModels;
using MvvmCross.iOS.Platform;
using MvvmCross.Platform;

Ya estamos listo para probar, recuerde que vamos a necesitar de un Mac para compilar.

 

En la versión que estoy probando, se ha producido un error en el fichero Setup.cs

Abrimos el fichero Setup.cs y aplicamos los siguientes cambios.

Cambiar:

 public Setup(IMvxApplicationDelegate applicationDelegate, UIWindow window, IMvxIosViewPresenter presenter)
            : base(applicationDelegate, window, presenter)
        {
        }

Por:


 public Setup(IMvxApplicationDelegate applicationDelegate, IMvxIosViewPresenter presenter)
            : base(applicationDelegate, presenter)
        {
        }

 

Ahora debería funcionar, elimine la carpeta ToDo-MvvmCross y ya puedes empezar tu aplicación para IOS.

 

Paso 10,  configurar proyecto para UWP. Para la configuración para UWP mvvmCross no genera ningún tipo de archivo, así que tenemos que hacer todo el trabajo de forma manual.

Lo primero que tenemos que hacer es agregar la referencia del proyecto de Core, que ya hicimos en los pasos anteriores.

Tenemos que crear una carpeta para las vistas, hacemos clique con el segundo botón sobre el proyecto de Base.UWP y elegimos la opción agregar y luego, la opción nueva carpeta, llamaremos la nueva carpeta de Views.

Ahora hacemos clique sobre la carpeta Views con el segundo botón, elegimos la opción de agregar y luego la opción de nuevo elemento. Se va abrir una ventana que se ver en la imagen abajo, debemos crear una página en blanco con el nombre de MainView.

Antes de empezar a trabajar con la vista nueva, vamos a eliminar el archivo MainPage.xaml del proyecto que no lo necesitamos al usar MvvmCross.

Abrimos el archivo MainView.xaml.cs y quitamos la herencia de Page y agregamos la de MvxWindowsPage, el resultado será el siguiente.

using Windows.UI.Xaml.Navigation;

// La plantilla de elemento Página en blanco está documentada en https://go.microsoft.com/fwlink/?LinkId=234238

namespace Base.UWP.Views
{
    /// 

/// Una página vacía que se puede usar de forma independiente o a la que se puede navegar dentro de un objeto Frame. ///

public sealed partial class MainView : MvxWindowsPage { public MainView() { this.InitializeComponent(); } } }

Tenemos que hacer lo mismo con el código Xaml, cambiar page por views:MvxWindowsPage y agregar la referencia.

 

xmlns:views="using:MvvmCross.Uwp.Views"

 

El resultado será este:

 

 

Vamos a crear el archivo Setup.cs en la raíz del proyecto de Base.UWP, hacemos clique sobre la solución, elegimos la opción agregar y luego la opción nuevo elemento. Se va abrir una ventana que podemos elegir el tipo de archivo y el nombre, seleccionamos de tipo clase y con el nombre Setup.cs

 

 

El código que va a contener este archivo es el siguiente:

 

using MvvmCross.Core.ViewModels;
using MvvmCross.Platform.Plugins;
using MvvmCross.Uwp.Platform;
using Windows.UI.Xaml.Controls;

namespace Base.UWP
{
    public class Setup : MvxWindowsSetup
    {
        public Setup(Frame rootFrame) : base(rootFrame)
        {
        }

        protected override IMvxApplication CreateApp()
        {
            return new Core.App();
        }

        protected override IMvxPluginManager CreatePluginManager()
        {
            return base.CreatePluginManager();
        }

        protected override void InitializeFirstChance()
        {

        }
    }
}

 

El siguiente paso es abrir el archivo App.Xaml.cs y remplazar la función OnLaunched por esta:

protected override void OnLaunched(LaunchActivatedEventArgs e)
        {
            Frame rootFrame = Window.Current.Content as Frame;

            // No repetir la inicialización de la aplicación si la ventana tiene contenido todavía,
            // solo asegurarse de que la ventana está activa.
            if (rootFrame == null)
            {
                // Crear un marco para que actúe como contexto de navegación y navegar a la primera página.
                rootFrame = new Frame();

                rootFrame.NavigationFailed += OnNavigationFailed;

                if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
                {
                    //TODO: Cargar el estado de la aplicación suspendida previamente
                }

                // Poner el marco en la ventana actual.
                Window.Current.Content = rootFrame;
            }



            if (rootFrame.Content == null)
            {
                // Cuando no se restaura la pila de navegación, navegar a la primera página,
                // configurando la nueva página pasándole la información requerida como
                //parámetro de navegación
                //rootFrame.Navigate(typeof(MainPage), e.Arguments);
                var setup = new Setup(rootFrame);
                setup.Initialize();

                var start = Mvx.Resolve();
                start.Start();
            }
            // Asegurarse de que la ventana actual está activa.
            Window.Current.Activate();
        }

 

Debemos agregar las referencias que faltan que son:

using MvvmCross.Core.ViewModels;
using MvvmCross.Platform;

 

Establecemos el Proyecto de Base.UWP como proyecto de inicio y le damos la opción de implementar la solución, con esto debemos ver una pantalla en blanco y la configuración base ya está completada. Para iguala la pantalla vamos a modificar nuestra vista para agregar 2 campos para que se muestre lo mismo que en los proyectos de IOS y Android.