introducción a xamarin utilizando mvvmcross

Introducción a Xamarin Classic (MVVMCross)dotNet MálagaJavier Suárez

dotNet Málaga

Javier Suárez RuizDeveloper Plain ConceptsMicrosoft MVP Windows Platform DevelopmentXamarin Certified Developer• Blog: http://geeks.ms/blogs/jsuarez• Email: [email protected]• Twitter: @jsuarezruiz

http://geeks.ms/blogs/jsuarez

mailto:[email protected]

dotNet Málaga

dotNet Málaga

AgendaMVVMCross

1.MVVM2.MVVMCross3.Bindings4.Comandos5.Navegación6.Listados7.Plugins

Compartir la mayor cantidad de código posible8.PCL9.DEMOs

Xamarin Classic

dotNet Málaga

COMPARATIVA DE PLATAFORMAS MÓVILES. NATIVO

IDE

Lenguaje

Vistas

iOS Android Windows Phone

Xcode Android Studio

Visual Studio

ObjectiveC o Swift

Java C#

Storyboard AXML XAMLMVC MVC MVVMPatrón diseño

dotNet Málaga

COMPARATIVA DE PLATAFORMAS MÓVILES. XAMARIN

IDE

LenguajeVistas


Visual Studio

Visual Studio

Visual Studio

C# C# C#

Storyboard AXML XAMLMVVM MVVM MVVM

Patrón diseño

dotNet Málaga

MVVM

View

ViewModel

Model

get/set PropiedadesComandos

Notifica cambios

C#

Models

ViewView

ViewModel

ViewModel

ModelM

odel

Cross PlatformEspecífico

de la Plataforma

dotNet Málaga

PERO… ¿PORQUÉ MVVM?• Mayor facilidad para mantener,

extender y compartir el código.• Más facilidad a la hora de

colaborar.• Testing.• Más fácil de diseñar.

dotNet Málaga

MVVMCROSS

•Cross Platform MVVM Development Framework•Gratuito, Open Source, Comunidad•Soporta

•WP 7, 8, 8.1•WPF•WinRT•Xamarin.Android•Xamarin.iOS•Xamarin.Mac

•AKA Mvx

dotNet Málaga

Portable Class Library

•1 Librería•Multiples Platformas•Incluyendo:• Xamarin.Android• Xamarin.iOS

dotNet Málaga

Características de una Portable Class Library•Código compartido centralizado• Se depura igual que si el código estuviese en un

Proyecto específico.

•Compartir Proyecto/Assembly• NuGet

dotNet Málaga

MVVMCross & PCL

View

ViewModel

Model

PropiedadesComandos

Notifica cambios

C#

Model

ViewView

ViewModel

ViewModel

ModelM

odel

Cross Platform -PCLEspecífico

de Plataforma

dotNet Málaga

INotifyPropertyChanged

dotNet Málaga

Propriedad típica en la ViewModel

dotNet Málaga

Binding OneWay

PersonViewModel

FirstName

LastName

DateOfBirth

First NameJonLast NameDoeDate of birth12/07/1989

dotNet Málaga

UI Syntax

dotNet Málaga

Two Way Binding

PersonViewModel

FirstName

LastName

DateOfBirth


dotNet Málaga

UI Syntax

DEMODEMODEMO

Nuestra primera App multiplataforma

dotNet Málaga

Value Conversion

PersonViewModel

FirstName

LastName

DateOfBirth

First NameJonLast NameDoeAge24

“Age” Conversion

dotNet Málaga

IMvxValueConverter

dotNet Málaga

AgeValueConverter

dotNet Málaga

UI Syntax

DEMODEMODEMOConverters

dotNet Málaga

MyViewModel

Necesita Localización

Necesita SQL

Necesita CalculadoraMy Tax

Calculator

Windows Phone Location

Inversión de Control

Windows Phone SQL

El contenedor

dotNet Málaga

MyViewModel

Necesita Localización

Necesita SQL

Necesita CalculatorMy Tax

Calculator

iOS Location

Inversión de Control

iOS SQL

El contenedor

dotNet Málaga

Mvx.Register<T>

RegisterSingleton

Lazy - RegisterSingleton

RegisterType

dotNet Málaga

Registro automático

dotNet Málaga

Mvx.Resolve<T>

Resolve

CanResolve

TryResolve

dotNet Málaga

Mvx Construction

Resolución en el constructor

IoCConstruct

DEMODEMODEMO

Nuestro primer servicio

dotNet Málaga

Acciones (Comandos)

PersonViewModel

FirstName

LastName

DateOfBirth


AddCommand

dotNet Málaga

ICommand

dotNet Málaga

ViewModel Command

dotNet Málaga

UI Syntax

DEMODEMODEMO

Llega el turno de realizar acciones!

dotNet Málaga

COLECCIONES

PeopleViewModelHackers

List<PersonViewModel>

Greg

Jon

Daniel

Cool Hackers

Jon@redth

Greg@gshackles

Daniel@dsplaisted

Tomasz

Tomasz@cheesebar

dotNet Málaga

INotifyCollectionChanged

dotNet Málaga

ObservableCollection

dotNet Málaga

ViewModel Collection Property

dotNet Málaga

UI Syntax

DEMODEMODEMOListados

dotNet Málaga

Navegación

Uso de parámetrosShowViewModel<DetailViewModel>(new DetailParameters() { Index = 2 });

public void Init(DetailParameters parameters)

{

// use the parameters here

}

dotNet Málaga

Go Back

DEMODEMODEMONavegación

dotNet Málaga

Plugins

• Forma rápida y sencilla de añadir funcionalidad específica de cada plataforma.

• Usamos NuGet o NinjaCoder para añadirlos.

• Consumimos los plugins utilizando inyección de dependencias o Service Locator.

• Disponibles: Location, PhoneCall, Email, Sqlite, etc.

DEMODEMODEMO

Añadiendo y utilizando plugins

Compartir la mayor cantidad de código posible

dotNet Málaga

EL PROBLEMA

Creas la misma Appvarias veces

dotNet Málaga

COMPARATIVA DE PLATAFORMAS MÓVILES NATIVO

IDE

Lenguaje

Vistas


Xcode Android Studio

Visual Studio

ObjectiveC o Swift

Java C#

Storyboard AXML XAMLMVC MVC MVVMPatrón diseño

dotNet Málaga

¿Qué podemos compartir con este planteamiento?

dotNet Málaga

dotNet Málaga

El enfoque de XamarinCon Xamarin.Forms:

Se comparte más, controles compartidos

El enfoque tradicional de Xamarin

Shared UI Code

dotNet Málaga

dotNet Málaga

TÉCNICAS DE REUTILIZACIÓN DE CÓDIGO

• Copiar y pegar.• Mismo código

duplicado.• Difícil de

mantener.• Evitar en lo

posible.

Ctrl-C, Ctrl-V

• Modelo• VistaModelo• Vista

MVVM

• Enlaces simbólicos.

• Depende del lenguaje.

Enlazado de ficheros

• Permite mantener código específico de cada plataforma.

• Por contra, multiplica las ramas a mantener.

Compilación Condicional

• Código manejado común a las plataformas.

Portable Class Library

dotNet Málaga

MVVM

Vista VistaModelo

Modelo

Modelo

MainView.Xaml

MainViewModel.c

s

Data Binding

Comandos

Interfaz de Usuario Lógica de Negocio

Lógica de Negocio

Lógica de Presentación

dotNet Málaga

¿Y todo esto con una App “real”?

dotNet Málaga

dotNet Málaga

Utilizando Xamarin Classic

dotNet Málaga

COMPARATIVA DE PLATAFORMAS MÓVILES XAMARIN

IDE

LenguajeVistas


Visual Studio

Visual Studio

Visual Studio

C# C# C#

Storyboard AXML XAMLMVVM MVVM MVVM

Patrón diseño

dotNet Málaga

MVVM

View

ViewModel

Model

get/set PropiedadesComandos

Notifica cambios

C#

Models

ViewView

ViewModel

ViewModel

ModelM

odel

Cross PlatformEspecífico

de la Plataforma

dotNet Málaga

PORTABLE CLASS LIBRARY

•1 Librería•Multiples Platformas•Incluyendo:• Xamarin.Android• Xamarin.iOS

dotNet Málaga

CARACTERÍSTICAS DE UNA PORTABLE CLASS LIBRARY• Código compartido centralizado• Se depura igual que si el código estuviese en un

Proyecto específico.

• Compartir Proyecto/Assembly• NuGet

dotNet Málaga

MVVMCross & PCL

View

ViewModel

Model

PropiedadesComandos

Notifica cambios

C#

Model

ViewView

ViewModel

ViewModel

ModelM

odel

Cross Platform -PCLEspecífico

de Plataforma

DEMODEMODEMO

Nuestra App con MVVMCross

dotNet Málaga

Utilizando Xamarin.Forms

dotNet Málaga

COMPARATIVA DE PLATAFORMAS MÓVILES XAMARIN

IDE

LenguajeVistas


Visual Studio

Visual Studio

Visual Studio

C# C# C#

XAML XAML XAMLMVVM MVVM MVVM

Patrón diseño

dotNet Málaga

ARQUITECTURA DE APPS CON XAMARIN.FORMS

View

ViewModel

Model

PropiedadesComandos

Notifica cambios

C#

Model

ViewView

ViewModel

ViewModel

ModelM

odel

Cross Platform –PCL o Shared

DEMODEMODEMO

Ahora Xamarin.Forms

dotNet Málaga

UTILIZANDO NATIVO

Web Services

Web Services Backend C#

App

Services Services Services

View View View

ViewModel Controller Controller

App App

Web Services Backend C# Web Services Backend C#

dotNet Málaga

UTILIZANDO XAMARIN CLASSIC

Web Services


App

Services

Services Services Services

Model

View Model

View View View

dotNet Málaga

UTILIZANDO XAMARIN.FORMS

Web Services


App

Services

Services (Implementation) Services (Implementation) Services (Implementation)

Model

View Model

View (Custom Render) View (Custom Render) View (Custom Render)

View

dotNet Málaga

CONCLUSIONES RÁPIDAS

1. Siendo ordenado y siguiendo una serie de patrones podemos compartir entre el 65% y el 95% del código de una App móvil multiplataforma.

2. Xamarin.Forms no es siempre la solución más ideal dependiendo de las características del Proyecto.

3. No existe la abstracción absoluta. Sigue siendo necesario conocer características de cada plataforma.

dotNet Málaga

Preguntas y respuestas.

¿Dudas?

P&R

Introducción a Xamarin Classic (MVVMCross)dotNet MálagaJavier Suárez

introducción a xamarin utilizando mvvmcross

Software