Curso Xamarin: Xamarin y MvvMCross. Primer proyecto I « Devthisblog

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

Octubre 30, 2016

Curso Xamarin: Xamarin y MvvMCross. Primer proyecto I

Filed under: .net,Android,Cross-Platform,IOS,Windows Phone,Xamarin — Etiquetas: , , , , , — jnavero @ 12:30 am

En el post de hoy voy a explicar brevemente los pasos a seguir para hacer nuestro primer proyecto con Xamarin y Mvvmcross.

En primer lugar abrimos Visual Studio y a continuación iré describiendo cada uno de los pasos a seguir.

Mvvmcross – Core

– Pulsamos sobre nuevo proyecto y seleccionamos una librería portable.

Nuevo proyecto

Yo he llamado a la solución FirstProject y el proyecto de la clase portable FirstProject.Core

La plantilla nos crea automáticamente un archivo llamado Class1.cs pero lo eliminaremos.

Posteriormente, pulsando con el botón derecho del ratón en el proyecto agregaremos un paquete con el NuGet.

Este paquete será MvvmCross – Starter Pack tal y como se ve en la imagen.
mvvmcross

Esto nos instalará una serie de librerías en nuestro proyecto y creará dos archivos FirstViewModel.cs y App.cs de hecho en este proyecto estará todo el negocio necesario es decir, será utilizado por los diferentes proyectos (Android / Windows Phone / IOS) de esta manera compartiremos el código.

El archivo FirstViewModel.cs contiene el siguiente código:

 C# | 
 
 copy code |
?

01
02
    public class FirstViewModel 
03
        : MvxViewModel
04
    {
05
 
06
        string name;
07
        public string Name
08
        {
09
            get
10
            {
11
                return name;
12
            }
13
            set
14
            {
15
                SetProperty(ref name, value);
16
                RaisePropertyChanged(() => FullName);
17
            }
18
        }
19
 
20
        string lastName;
21
        public string LastName
22
        {
23
            get
24
            {
25
                return lastName;
26
            }
27
            set
28
            {
29
                SetProperty(ref lastName, value);
30
                RaisePropertyChanged(() => FullName);
31
            }
32
        }
33
 
34
        public string FullName
35
        {
36
            get
37
            {
38
                return Name + " " + LastName;
39
            }
40
        }
41
 
42
    }
43

Si nos fijamos en el archivo App.cs podemos ver un código muy sencillo de iniciación pero todavía no nos meteremos con el.

Mvvmcross – Proyecto de Windows Phone

A pesar de no ser demasiado popular es lo mas “sencillo” de programar en el entorno de Visual Studio por esa razón voy a comenzar por windows phone, para ello vayamos a la solución y pulsamos con el botón derecho del ratón para añadir un nuevo proyecto como se ve en la imagen.

xamarin MvvmCross Windows Phone

Seleccionamos el proyecto en blanco de Windows Phone y añadimos el proyecto a la solución.

Mvvmcross – Añadiendo el codigo de ejemplo

En primer lugar añadimos la referencia a nuestro proyecto inicial (FirstProject.Core).

Una vez añadida la referencia, al igual que en el Core, debemos agregar el Nuget MvvmCross – Starter Pack. Esto meterá las dependencias necesarias y además nos creará una carpeta llamada ToDo-MvvmCross.

Dentro de esta carpeta, hay un fichero llamado _Windows Store UI, este fichero, contiene las instrucciones a seguir para hacer una implementación sencilla. Por este motivo vamos a copiar las siguientes lineas de código:

 C# | 
 
 copy code |
?

1
2
                var setup = new Setup(rootFrame);
3
                setup.Initialize();
4
                MvvmCross.Core.Mvx.Resolve<mvvmcross.core.viewmodels.imvxappstart>();
5
                start.Start();
6

Estas lineas de código, las tenemos que pegar sustituyendo la parte que se indica a continuación en el archivo App.xaml.cs

 C# | 
 
 copy code |
?

01
02
                // Removes the turnstile navigation for startup.
03
                if (rootFrame.ContentTransitions != null)
04
                {
05
                    this.transitions = new TransitionCollection();
06
                    foreach (var c in rootFrame.ContentTransitions)
07
                    {
08
                        this.transitions.Add(c);
09
                    }
10
                }
11
                rootFrame.ContentTransitions = null;
12
                rootFrame.Navigated += this.RootFrame_FirstNavigated;
13
                // When the navigation stack isn't restored navigate to the first page,
14
                // configuring the new page by passing required information as a navigation
15
                // parameter
16
                if (!rootFrame.Navigate(typeof(MainPage), e.Arguments))
17
                {
18
                     throw new Exception("Failed to create initial page");
19
                }
20

Es decir, borramos todo lo anterior y pegamos el trocito de código que vimos en el ToDo.

Finalmente debemos renombrar MvvmCross.Core.Mvx.Resolve por Mvx.Resolve y añadir using MvvmCross.Platform;

Mvvmcross – Las vistas en Windows Phone

Con todo lo anterior ya tendríamos el código inicial para comenzar a trabajar en la vista de Windows Phone. Si ahora vamos a la carpeta Views veremos el archivo FirstView.xaml. Para esta pagina el código que utilizaré es el siguiente:

 XML | 
 
 copy code |
?

01
02
<views:MvxWindowsPage
03
    x:Class="FirstProject.Phone.Views.FirstView"
04
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
05
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
06
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
07
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
08
    xmlns:views="using:MvvmCross.WindowsCommon.Views"
09
    mc:Ignorable="d">
10
 
11
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
12
        <StackPanel>
13
            <TextBox Text="{Binding Name, Mode=TwoWay}" />
14
            <TextBox Text="{Binding LastName, Mode=TwoWay}" />
15
            <TextBlock Text="{Binding FullName, Mode=OneWay}" />
16
        </StackPanel>
17
    </Grid>
18
</views:MvxWindowsPage>
19

En la vista cabe destacar que hereda de MvxWindowsPage en vez de ser una Page.

Si pulsamos sobre ejecutar el proyecto vemos que el texto FullName se rellena al perder el foco de los textbox como vemos en la imagen del emulador.

Ejemplo 1 para windows phone

Finalmente he decidido terminar aquí este post para no alargarlo demasiado. Mañana escribiré el segundo con Android y IOs y dejaré el proyecto de ejemplo colgado en GitHub de esta forma se podrán descargar los ejemplos sin problema.

1 comentario »

  1. […] el post Xamarin y MvvmCross voy a continuar con la parte de MvvmCross, Android y posteriormente con la de […]

    Pingback by Xamarin y MvvMCross, Android y IOS. Primer proyecto II. - Devthisblog Devthisblog — Noviembre 1, 2016 @ 5:00 pm

RSS feed for comments on this post. TrackBack URL

Leave a comment

Powered by WordPress