Curso de introducción a Xamarin Forms y MVVM impartido por Mario López y Daniel Cardeña.

1. Mario López
Daniel Cardeña
Xamarin.Forms y
MVVM

2. Mobile Technical leader
@mariolobar
/mariolobar
mlopez@bravent.net

3. Mobile Senior developer
@DanielCarde
/daniel-cardeña-pulido
dcardenap@bravent.net

4. Material
Puedes ver y descargar todo el material del curso aquí:
github.com/BraventIT/XamFormsMVVMExample
github.com/BraventIT/XamFormsTVSeriesCompleto
github.com/BraventIT/XamFormsTVSeriesIncompleto

5. Material

6. Agenda
1.
2.
3.
4.
5.
6.
7.

7. Agenda
1.
2.
3.
4.
5.
6.
7.
8.

9. ¿Qué es un patrón MVVM?
MVVM es una evolución del patrón MVC (Model/View/Controller) que intenta facilitar el
trabajo en paralelo entre alguien encargado en diseñar la interfaz de usuario y otra persona
encargada de generar el código que la sustentará. Esta separación de capas facilita en gran
medida el desarrollo de una app.

10. Partes del patrón
View: Se trata de la
interfaz de usuario de
nuestra app
ViewModel: Contiene la lógica
de presentación de nuestra
aplicación. Es el intermediario
entre la Vista y el Modelo.
El Model será el encargado
del acceso a datos y la
lógica de negocio.

11. Patrón MVVM
MODEL
Business Logic and
Data
VIEW
MODEL
Presentation Logic
VIEW
Presentation
Processed Data
Data Changed
Command and
Data Binding
MVVM MODEL VIEW VIEWMODEL

12. ¿Por qué MVVM?
Mayor facilidad para mantener,
extender y compartir el código
Más facilidad de colaborar
Testing
Más fácil de diseñar

13. Binding
El binding relaciona dos propiedades entre sí haciendo que se mantengan sincronizadas:
si una cambia la otra también.

14. Data Binding: INotifyPropertyChanged
using System;
namespace System.ComponentModel
{
public interface INotifyPropertyChanged
{
event PropertyChangedEventHandler PropertyChanged;
}
}

15. Propiedad de un ViewModel
public class ViewModelBase : INotifyPropertyChanged
{
public ViewModelBase () { }
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName) {
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
private string _Title;
public string Title
{
get { return _Title; }
set { _Title = value; OnPropertyChanged ("Title"); }
}
}

16. BindingUNIDIRECCIONAL
ViewModel
Property
VIEW
Property Target Control
ONE-WAY
BIDIRECCIONAL
ViewModel
VIEW
Property Target Control
TWO-WAY
Property

17. One-Way / Two Way Bindings
One-Way Binding Two-Way Binding
// Código en nuestro ViewModel
private string _Title;
public string Title
{
get { return _Title; }
set {
_Title = value;
RaisePropertyChanged();
}
}
// Binding en nuestro archivo XAML
<Entry Text="{Binding Title}" />
// Código en nuestro ViewModel
private string _Title;
public string Title
{
get { return _Title; }
set {
_Title = value;
RaisePropertyChanged();
}
}
// Binding en nuestro archivo XAML
<Entry Text="{Binding Title, Mode=TwoWay}" />

19. Command: ICommand interface
public interface ICommand
{
void Execute(object arg);
bool CanExecute(object arg)
event EventHandler CanExecuteChanged;
}

20. Command: Implementación ICommand
// Definición de un Command en nuestro ViewModel
private ICommand _SearchByName;
public ICommand SearchByNameCommand
{
get {
return _SearchByName ?? (_SearchByName = new Command (
async () => await ExecuteSearchByNameCommand (),
CanExecuteSearchByNameCommand));
}
}
private async Task ExecuteSearchByNameCommand () { await LoadData (SearchText); }
private bool CanExecuteSearchByNameCommand() { return SearchText.Lenght > 0; }
// Command binding en nuestro archivo XAML
<SearchBar Text="{Binding SearchText}"
SearchCommand="{Binding SearchByNameCommand}"></SearchBar>

21. Controles Xamarin.Forms que soportan Commands
Button MenuItem ToolBarItem
SearchBar TextCell ImageCell
ListView TapGestureRecognizer

22. Resumen MVVM
VIEW VIEW
MODEL MODEL
Binding
Command
Exposes

25. ¿Por qué Xamarin?
Compartir código
entre plataformas (PLC)
Usa un solo lenguaje
de programación C#
Producto soportado y
oficial de Microsoft
Reduce el número de
bugs, reduce tiempos y
costes y reduce el “Time
to market”

26. Una sola base de
código para las tres
plataformas mayoritarias,
haciendo más sencillo el
desarrollo y el posterior
mantenimiento.

27. Compartimos entre
un 75% y un 90% del
código, dependiendo
del caso particular de
cada aplicación
</>

28. Genera aplicaciones
totalmente nativas, el
rendimiento y la usabilidad
es igual al de una aplicación
para cada plataforma.

29. Xamarin Forms permite
compartir la interfaz de
usuario, pero manteniendo
los controles nativos.

30. Xamarin.Forms
Xamarin Forms es un conjunto
de herramientas creadas
para agilizar el desarrollo
multiplataforma maximizando la
cantidad de código compartido
entre plataformas.

31. Xamarin.Forms
Xamarin.Forms - UI compartido
Lógica de aplicación compartida (ViewModels)
Servicios comunes
Vistas
XAML
MVVM
C#
Acceso a datos online (Servicios) offline (SQLite, almacenamiento)
Platform specific Platform specific Platform specific

32. Estructura de un proyecto con Xamarin.forms
• Un proyecto Core, que incluye la lógica de negocio y también las
Vistas de las app.
• Un proyecto para cada plataforma.
• Un proyecto de UITest.

33. Aunque la mayoría del código es compartido, van a existir situaciones en las que tendremos
que implementar cierta funcionalidad.
DependencyService

34. DependencyService
• Service Locator proporcionado por Xamarin Forms llamado DependencyService.
• La idea es definir una interfaz en Core
• Y la implementación de la misma en cada plataforma.
using System;
namespace XamFormsTVSeries.Services
{
public interface IOpenWebService
{
void OpenUrl(string url);
}
}

35. DependencyService
Implementación interfaz en Android Implementación interfaz en iOS
[assembly: Xamarin.Forms.Dependency (typeof (OpenWebService))]
namespace XamFormsTVSeries.iOS.Services
{
public class OpenWebService : IOpenWebService
{
public OpenWebService ()
{
}
#region IOpenWebService implementation
public void OpenUrl (string url)
{
UIApplication.SharedApplication.OpenUrl(new NSUrl(url));
}
#endregion
}
}
[assembly: Xamarin.Forms.Dependency (typeof (OpenWebService))]
namespace XamFormsTVSeries.Droid.Services
{
public class OpenWebService : IOpenWebService
{
#region IOpenWebService implementation
public void OpenUrl (string url)
{
var uri = Android.Net.Uri.Parse (url);
var intent = new Intent (Intent.ActionView, uri);
intent.SetFlags (ActivityFlags.NewTask);
Application.Context.StartActivity (intent);
}
#endregion
}
}

36. Converters
• Muchas veces el valor que recibimos de nuestro ViewModel no es suficiente para nuestra Vista y necesita
de un tratamiento adicional.
• Se tratan de clases auxiliares que complementan los Bindings.
• Estas clases deben de implementar la interfaz IValueConverter.

37. Converters: Implementación IValueConverter
public class DescriptionToImageValueConverter : IValueConverter
{
public DescriptionToImageValueConverter() {}
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
string strValue = value?.ToString();
if (string.IsNullOrEmpty(strValue))
{
return ImageSource.FromFile("wrong");
}
else
{
return ImageSource.FromFile("ok");
}
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return null;
}
}

38. Converters: Binding
<Image Source="{Binding Description,
Converter={StaticResource okWrongConverter}}"></Image>
<ContentView.Resources>
<ResourceDictionary>
<local:DescriptionToImageValueConverter x:Key="okWrongConverter">
</local:DescriptionToImageValueConverter>
</ResourceDictionary>
</ContentView.Resources>

39. Custom Renderers
• Muchas veces los componentes base que nos ofrece Xamarin Forms no coinciden con nuestros diseños,
simplemente queremos dar un aspecto diferente a nuestra app, para ello devemos crear
CustomRenderers.
• Crearemos un control en el Core
• Implementaremos en “renderizado” en cada plataforma
Namespace XamFormsTVSeries.Controls
{
public class ImageCircle : Image
{
}
}

40. Implementación interfaz en Android Implementación interfaz en iOS

41. <ContentPage
... xmlns:local="clr-namespace:XamFormsTVSeries.Controls; assembly=XamFormsTVSeries ">
<ContentPage.Content>
<local:ImageCircle Source="{Binding Description, Converter={StaticResource
okWrongConverter}}"/>
</ContentPage.Content>
</ContentPage>

43. FreshMVVM
MvvmCross
MvvmLight
ReactiveUI
Nuestro framework Bravent LiteMVVMForms

45. Próximos
webinars
30 / 10 / 2018 de 17:00 a 19:00
Chatbots en el customer service
07 / 11 / 2018 de 17:00 a 19:00
La seguridad para los datos de tu
empresa con Azure
28 / 11 / 2018 de 17:00 a 19:00
De la teoría a la práctica con
Microsoft Face API