Curso Xamarin: Xamarin y MvvMCross, Android y IOS. Primer proyecto II. « Devthisblog

Devthisblog Desarrollo .net, Diseño Web, Seguridad… Y todo lo que se me vaya ocurriendo…

noviembre 1, 2016

Curso Xamarin: Xamarin y MvvMCross, Android y IOS. Primer proyecto II.

Filed under: .net,Android,Cross-Platform,Xamarin — Etiquetas: , , , , , , — jnavero @ 5:00 pm

Siguiendo el post Xamarin y MvvmCross voy a continuar con la parte de MvvmCross, Android y posteriormente con la de IOS.

De esta forma cerraremos este tema y pasaré a explicar el código. Posteriormente seguiré viendo mas funcionalidades y controles.

Mvvmcross – Proyecto de Android

Para comenzar el proyecto primero debemos agregar un nuevo proyecto a la solución. Es decir pulsamos el botón derecho del ratón sobre la solución y agregamos un nuevo proyecto Android.

mvvmcross Android

De la misma manera que hicimos el post anterior, debemos agregar la referencia a nuestro proyecto común “FirstProject.Core“.

Seguidamente, agregamos el paquete Nuget MvvmCross.StarterPack que nos instalará las referencias y dependencias necesarias.

Si probamos a compilar el proyecto nos dará un error. Según los manuales y la documentación, deberíamos tener varias carpetas llamadas mipmap dentro de Resources pero en mi caso no es así.

Así que para solucionar esto tenemos dos opciones:

  • Creamos la carpeta llamada mipmap a la que le grabamos el archivo icon.png
  • Cambiamos la vista en el splash screen a drawable.
  • En cualquier caso, yo he elegido la segunda opción y desconozco cual será la mejor, el caso es que funciona correctamente.

    El archivo SplashScreen.cs quedaría de la siguiente forma:

     C# | 
     
     copy code |
    ?

    01
    02
    namespace FirstProject.Android
    03
    {
    04
        [Activity(
    05
            Label = "FirstProject.Android"
    06
            , MainLauncher = true
    07
            , Icon = "@drawable/icon"
    08
            , Theme = "@style/Theme.Splash"
    09
            , NoHistory = true
    10
            , ScreenOrientation = ScreenOrientation.Portrait)]
    11
        public class SplashScreen : MvxSplashScreenActivity
    12
        {
    13
            public SplashScreen()
    14
                : base(Resource.Layout.SplashScreen)
    15
            {
    16
            }
    17
        }
    18
    }
    19

    Ahora eliminaremos el archivo MainActivity.cs
    Para continuar editaremos el archivo firstview.axml que es la activity (pantalla) que encontraremos en Resources / Layouts.
    Aquí agregaremos dos text box y un label para ver el funcionamiento del binding con Android y el Core.

    El código queda de la siguiente forma:

     XML | 
     
     copy code |
    ?

    01
    02
    <?xml version="1.0" encoding="utf-8"?>
    03
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    04
        xmlns:local="http://schemas.android.com/apk/res-auto"
    05
        android:orientation="vertical"
    06
        android:layout_width="fill_parent"
    07
        android:layout_height="fill_parent">
    08
        <EditText
    09
            android:layout_width="fill_parent"
    10
            android:layout_height="wrap_content"
    11
            android:textSize="40dp"
    12
            local:MvxBind="Text Name" />
    13
        <EditText
    14
          android:layout_width="fill_parent"
    15
          android:layout_height="wrap_content"
    16
          android:textSize="40dp"
    17
          local:MvxBind="Text LastName" />
    18
        <TextView
    19
            android:layout_width="fill_parent"
    20
            android:layout_height="wrap_content"
    21
            android:textSize="40dp"
    22
            local:MvxBind="Text FullName" />
    23
    </LinearLayout>
    24

    Con esto, pulsamos sobre ejecutar el emulador y vemos como el bind funciona correctamente.

    MvvmCross Android project

    Mvvmcross – Proyecto de IOS

    Este proyecto es un poco mas “complicado” ya que al no tener un MAC la compilación no será posible.
    Hay formas de emular con VMWare (haré un post sobre eso), pero, el rendimiento es una castaña si te vas a dedicar a esto… pilla un MAC.

    Para empezar, debemos añadir un nuevo proyecto de tipo IOS. Será una pagina simple (Single View App).

    MvvmCross IOS

    Cuando creamos el proyecto por primera vez, nos aparecen instrucciones sobre como conectar con MAC y demás.
    Ya veremos eso mas adelante.

    Al igual que los proyecto anteriores, añadimos nuestra librería “FirstProject.Core” y el paquete del Nuget “MvvmCross.StarterPack” que como siempre se instalarán las librerías necesarias.

    Para comenzar en IOS, primero debemos reemplazar el contenido del archivo AppDelegate.cs por AppDelegate.cs.txt
    Osea, nuestro archivo AppDelegate.cs tendrá el siguiente contenido:

     C# | 
     
     copy code |
    ?

    01
    02
    using MvvmCross.Core.ViewModels;
    03
    using MvvmCross.iOS.Platform;
    04
    using MvvmCross.Platform;
    05
    using Foundation;
    06
    using UIKit;
    07
     
    08
    namespace FirstProject.Ios
    09
    {
    10
        [Register("AppDelegate")]
    11
        public partial class AppDelegate : MvxApplicationDelegate
    12
        {
    13
            public override UIWindow Window
    14
            {
    15
                get;
    16
                set;
    17
            }
    18
     
    19
            public override bool FinishedLaunching(UIApplication app, NSDictionary options)
    20
            {
    21
                Window = new UIWindow(UIScreen.MainScreen.Bounds);
    22
     
    23
                var setup = new Setup(this, Window);
    24
                setup.Initialize();
    25
     
    26
                var startup = Mvx.Resolve<IMvxAppStart>();
    27
                startup.Start();
    28
     
    29
                Window.MakeKeyAndVisible();
    30
     
    31
                return true;
    32
            }
    33
        }
    34
    }
    35

    Ademas debemos cambiar el archivo FirstView.cs de la siguiente forma:

     C# | 
     
     copy code |
    ?

    01
    02
        public partial class FirstView : MvxViewController
    03
        {
    04
            public FirstView() : base("FirstView", null)
    05
            {
    06
            }
    07
     
    08
            public override void ViewDidLoad()
    09
            {
    10
                base.ViewDidLoad();
    11
     
    12
                var set = this.CreateBindingSet<FirstView, Core.ViewModels.FirstViewModel>();
    13
                set.Bind(LabelName).To(vm => vm.Name);
    14
                set.Bind(LabelLastName).To(vm => vm.LastName);
    15
                set.Bind(TextFullNamne).To(vm => vm.FullName);
    16
                set.Apply();
    17
            }
    18
        }
    19

    De esta manera, tendremos adecuado nuestro modelo a la app de IOS por ultimo debemos añadir nuestras etiquetas para que se dibujen en la pantalla.
    Para ello modificamos el archivo FirstView.Desing.cs.
    Se supone que con XCode, podemos diseñar la pantalla FirstView.xib para hacerlo de forma correcta.
    El archivo FirstView.Desing.cs

     C# | 
     
     copy code |
    ?

    01
    02
    using Foundation;
    03
    using System;
    04
    using System.CodeDom.Compiler;
    05
    using UIKit;
    06
     
    07
    namespace FirstProject.Ios.Views
    08
    {
    09
        [Register ("FirstView")]
    10
        partial class FirstView
    11
        {
    12
            [Outlet]
    13
            [GeneratedCode ("iOS Designer", "1.0")]
    14
            UILabel LabelName { get; set; }
    15
     
    16
            [Outlet]
    17
            [GeneratedCode("iOS Designer", "1.0")]
    18
            UILabel LabelLastName{ get; set; }
    19
     
    20
            [Outlet]
    21
            [GeneratedCode ("iOS Designer", "1.0")]
    22
            UITextField TextFullNamne { get; set; }
    23
     
    24
            void ReleaseDesignerOutlets ()
    25
            {
    26
                if (LabelName != null) {
    27
                    LabelName.Dispose ();
    28
                    LabelName = null;
    29
                }
    30
                if (LabelLastName != null)
    31
                {
    32
                    LabelLastName.Dispose();
    33
                    LabelLastName = null;
    34
                }
    35
                if (TextFullNamne != null) {
    36
                    TextFullNamne.Dispose ();
    37
                    TextFullNamne = null;
    38
                }
    39
            }
    40
        }
    41
    }
    42

    Mientras que el archivo .xib con XCode, se agregan las etiquetas (pegarlo aquí es un poco chungo).
    Así que pondré el enlace de GitHub donde estará el primer proyecto multiplataforma.

    De este modo finalizo este segundo post. En los siguientes post iré mostrando mas sobre los controles en las diferentes plataformas.
    En otro post trataré de explicar como compilar para IOS y hacer pruebas en el emulador.

    Puedes descargarte el código de GitHub aquí.

    No hay comentarios »

    No comments yet.

    RSS feed for comments on this post. TrackBack URL

    Leave a comment

    Powered by WordPress