introducción a xamarin utilizando mvvmcross
TRANSCRIPT
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
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
iOS Android Windows Phone
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
First NameJonLast NameDoeDate of birth12/07/1989
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
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
First NameJonLast NameDoeDate of birth12/07/1989
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
dotNet Málaga
UI Syntax
dotNet Málaga
UI Syntax
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
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
¿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
iOS Android Windows Phone
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
iOS Android Windows Phone
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
Web Services Backend C#
App
Services
Services Services Services
Model
View Model
View View View
dotNet Málaga
UTILIZANDO XAMARIN.FORMS
Web Services
Web Services Backend C#
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