Introducción a Xamarin Forms con XAML

Abril 2016 Diplomado Dispositivos Móviles 1
Módulo de Xamarin Forms
Parte 1: Introducción a Xamarin

Sorey García (@soreygarcia)
Consultora en Movilidad
y Freelancer XAML
Ingenieria Informatica
Politécnico Jaime Isaza Cadavid
Especialista en Desarrollo de Software
Universidad EAFIT
Docente de Cátedra
Institución Universitaria Pascual Bravo
Co-fundadora de la comunidad de
Desarrolladores Avanet y Codies
Instructora

Commercial LicenseOpen Source License / Free available
4
From .NET to Xamarin
Windows
.NET Framework
Linux
Mono
iOS
MonoTouch
Android
Mono for Android
iOS
Xamarin.iOS
Android
Xamarin.Android

Silo
Approach
Crear una App
multiples
veces

Retos del desarrollo nativo
• Mac OS X
• XCode
• Objective-C
• Swift
• iOS SDK
• Apple Tools
• OS
• Eclipse or Android Studio
or…
• Java
• Android SDK
• SDK Tools
• Windows OS
• Visual Studio
• C#
• .NET Framework
• Windows Phone SDK

Write Once,
Run Anywhere
Approach
Mínimo común
denominador App Generation

Retos del desarrollo híbrido
• Mínimo común denominador
• Fragmentación del Browser
• Desarrollo y diseño para 1 plataforma,
afecta las experiencias de usuario

Algunas opciones

Xamarin
Approach
Comparte
código nativo

Comparaciones por plataforma

@implementation MSViewController
- (void)viewDidLoad
{
[super viewDidLoad];
}
- (IBAction)OnButtonDown:(id)sender {
UIAlertView* view =
[[UIAlertView alloc]init];
[view setTitle:@"Hello World"];
[view setMessage: @"How are you?”];
[view addButtonWithTitle:@"OK"];
[view show];
}
@end
public partial class iOSAppViewController :
UIViewController
{
public iOSAppViewController (IntPtr handle) :
base (handle){
}
public override void ViewDidLoad (){
base.ViewDidLoad ();
}
partial void OnButtonDown (UIButton sender)
{
UIAlertView view = new UIAlertView();
view.Title = "Hello World" ;
view.Message = "How are you? " ;
view.AddButton ("OK");
view.Show();
}
iOS

public class MyActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
Button myBtn = (Button) this.findViewById( R.id.clickMe);
myBtn.setOnClickListener( new View.OnClickListener() {
@Override
public void onClick(View view) {
AlertDialog.Builder builder = new
AlertDialog.Builder(MyActivity.this) ;
builder.setTitle( "Hello World")
.setMessage("How are you?")
.setPositiveButton( "OK", new
DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface
dialogInterface, int i) {
dialogInterface.dismiss();
}}) .show();
}});
}
}
[Activity (Label = "AndroidApp", MainLauncher = true, Icon =
"@drawable/icon")]
public class MainActivity : Activity {
protected override void OnCreate (Bundle bundle)
{
base.OnCreate (bundle);
SetContentView (Resource.Layout.Main);
Button button = FindViewById<Button> (Resource.Id.me);
button.Click += delegate {
AlertDialog.Builder builder = new AlertDialog.Builder
(this );
AlertDialog dialog = null ;
builder.SetTitle ( "Hello World")
.SetMessage ( "How are you")
.SetPositiveButton( "OK" , delegate {
dialog.Dismiss(); } );
dialog = builder.Show ();
} ;
}
}
Android

¿Por qué nativo?
Xamarin genera experiencias nativas.
Native User Interfaces Native API Access Native Performance

Windows APIs
100% coverage

… or iOS APIs
100% coverage

… or Android APIs
100% coverage

Compilación Nativa
Xamarin.iOS does full Ahead Of Time (AOT)
compilation to produce an ARM binary for
Apple’s App Store.
Xamarin.Android takes advantage of Just In
Time (JIT) compilation on the Android
device.

Cualquier cosa que pueda hacerse en Objective-C or
Java puede hacerse en C# con Xamarin usando Visual
Studio o Xamarin Studio

Share Code: Portable Class Libraries

NuGet

Shared Projects

Linked
Files
Compiler
Directives

Separación de responsabilidades
UserInterface
AppLogic
General Model-View-ViewModel (MVVM)

Xamarin + Xamarin Forms

 40+ Pages, Layouts, and Controls
 Build from code behind or XAML
 Two-way Data Binding
 Navigation
 Animation API
 Dependency Service
 Messaging Center
Xamarin.Forms
Shared UI Code

Xamarin’s Unique Approach
Shared C# codebase • 100% native API access • High performance
iOS C# UI Windows C# UIAndroid C# UI
Shared C# Mobile C# Server
Linux/Mono
CoreCLRAzure
Shared C# Client/Server

Xamarin.Forms: Interfaces Nativas con Código Compartido
Use a single API to generate native, platform-
specific user interfaces
At runtime, each Xamarin.Forms page and its
controls are mapped to platform-specific native
UI elements

Pages

Layouts

Controls
ActivityIndicator BoxView Button DatePicker Editor
Entry Image Label ListView Map
OpenGLView Picker ProgressBar SearchBar Slider
Stepper TableView TimePicker WebView EntryCell
ImageCell SwitchCell TextCell ViewCell

Cells
• EntryCell
• SwitchCell
• TextCell
• ImageCell
http://developer.xamarin.com/guides/cross-platform/xamarin-forms/controls/cells/

Controles de terceros

http://www.genymotion.com/
Emuladores

Plataformas Soportadas Xamarin Forms
• Android 4.0.3 o Superior
• iOS 6.1 o Superior
• Windows Phone y Windows 8.1
• Windows 10 UWP

Microsoft adquirió Xamarin

Xamarin Test Cloud

Xamarin Insights

Ventajas y Desventajas
VENTAJAS
• Se escribe el código solo una vez
• Mantiene la experiencia de usuario propia de cada plataforma.
• Se permite el acceso a funciones nativas a través de Inyección de Dependencias.
• No es necesario conocer todo acerca de las plataformas nativas
• Puedes crear código XAML y aprovechar la potencia de MVVM
DESVENTAJAS
• Es un poco nuevo así que es necesario adaptarse a lo que existe, lo que limita en cuanto a
crear UX que demande demasiado esfuerzo gráfico.

Xamarin.Forms se recomienda para
• Start learning platform specifics – in .NET.
• Prototype
• Data-driven, task-oriented
• multi-platform apps
• Recommended for:
• Lists
• Item selections
• Change properties
• Update backend

NO se recomienda en los siguientes casos
• Complex/customized interfaces -
nuanced experiences
• Android Material Design, iOS
transitions
• Extensive platform-specific capability
• Slow-mo camera, fingerprint
scanner (iOS 6)
• Not Recommended for:
• UI-intensive apps with complex
gestures

• Mejoras de integración con iOS 9 y Android 6
• Material Design (AppCompat)
• Optimización del rendimiento
• XAML pre compilado
• Windows 10 (UWP) Preview
• Nuevos gestos
• Efectos, templates…
Xamarin.Forms 2.0

evolve.xamarin.com

Parte 2: Consideraciones de Publicación

XAML y C# Everywhere
La mayoría de recursos en
internet enseñan Xamarin
Forms con Code Behind.
Sin embargo la
recomendación es
aprender y trabajar con
XAML y aprovechar su
enfoque a la separación de
responsabilidades entre el
diseño y la codificación.

Centros de Desarrollo

Apple Developer Center
• Cuenta de Desarrollador o Compañia: 99 USD Anuales
• Cuenta Empresarial: 299 USD Anuales
• En el Apple Developer Center se gestiona la cuenta, certificados y dispositivos
• En iTunes Connect se publican las aplicaciones
• Invitaciones a beta tester via correo desde iTunes Connect subiendo un Bundle a
TestFlight
• Nivel de complejidad: Alto
• Nivel de exigencia en calidad: Alta
• Tiempo de publicación: Días (Entre 7 y 12)
• http://appreviewtimes.com/

Windows Store y Windows Phone Store
Windows Phone Store y Windows Store
• 19 USD de por vida para desarrolladores
• 99 USD de por vida para compañías
• Invitaciones a beta tester via correo subiendo un paquete.
• En el Developer Benefits Center se obtienen beneficios adicionales con suscripciones
• Nivel de Complejidad: Medio
• Nivel de exigencia en calidad: Baja
• Tiempo de publicación: Horas máximo 1 o 2 días, en revisiones posteriores pueden pedirte
mejorar la aplicación o puede ser removida de la tienda.

Play Store Developer Center
Google Play Store
• 25 USD de por vida
• En Google Play Store de gestionan y publican las aplicaciones
• Se puede enviar versiones Beta a grupos de usuarios
• Nivel de complejidad: Bajo
• Nivel de exigencia en calidad: Baja
• Tiempo de publicación: Horas

Herramientas y Modos de Ejecución

Herramientas
Xamarin Studio en MAC o Visual Studio 2015 Update 2 en Windows
Android
• Android SDK y APIs necesarias según soporte que se dese dar
• Dispositivo, Visual Studio Emulator for Android, GenyMotion o Android Player
Windows Phone y Windows
• Windows SDK
• Dispositivo o Emuladores del SDK
iOS
• Xcode
• Dispositivo, Emuladores de Xcode
• Xamarin instalado en el MAC aunque se use Windows

Debug y Release
Android
• No requiere de ninguna consideración para ejecutar en ambos modos.
• Para entregar un APK de prueba se necesita generar un KeyStore
• Solo se pueden publicar paquetes en release
• No requiere de ninguna consideración para ejecutar en ambos modos.
• Para generar el appx de prueba se necesita firmar los paquetes con Visual
• Las apps Universales de Windows 10 están aún en Preview
• Para probar paquetes en dispositivos, se debe desbloquear el dispositivo para desarrollo
• Solo se pueden publicar paquetes en release

Debug y Release
iOS
• Requiere cuenta de desarrollador autorizada
• Requiere configurar certificados de desarrollo bajados desde del developer center e
instalados en el KeyChain para Debug o Adhoc / AppStore.
• Se requiere generar el AppId de la aplicación en desarrollo
• Para generar IPA (Paquetes en Adhoc para prueba en dispositivos) se requiere registrar el
equipo en la cuenta de desarrollador y habilitar el dispositivo en el certificado especifico de
desarrollo o distribución
• Solo se pueden publicar paquetes generados en modo AppStore.

APIs por Plataforma
(Mapas y Notificaciones)

APIs para Mapas Nativos
Google
• Los mapas requieren configurar el SHA del Key Store en la consola de
desarrolladores y solicitar las llaves para Debug y para Release para Google
Maps Android API v2
• Las notificaciones requieren configurar una llave para Google Cloud
Messaging for Android
• Consola de desarrolladores: https://code.google.com/apis/console/

APIs para Mapas Nativos
iOS
• Los mapas no requieren nada adicional
• Se requiere habilitar el certificado de Notificaciones Push para el AppId
correspondiente a la app que se esta desarrollando uno para Debug y otro
para Adhoc / AppStore
• Los mapas requieren una llave para mapas de Bing >
https://www.bingmapsportal.com/
• Las notificaciones requieren de llaves generadas en los Store para cada una
de las aplicaciones publicadas.

Azure Service Bus
Debido a la complejidad del envió de notificaciones que tiene cada
plataforma existen servicios como el de Azure Service Bus que centraliza los
envíos de notificaciones.
• iOS: Debe configurarse el certificado generado en la máquina donde se está compilando
para publicar.
• Android: Debe configurarse la llave entregada en la consola de desarrolladores
• Windows Phone: debe configurarse la llave entregada en el Windows Phone Store.

Base de datos local

SQLite
• SQLite provee una base de datos local por plataforma.
• Esta base de datos es almacenada en el sistema de archivos.
• SQLite está soportada nativamente por iOS y Android pero no en Windows Phone o
Windows. Debe instalarse Sqlite for Windows y Sqlite for Windows Phone

SQLite.NET Async (ORM)

Custom Controls, Renderers y Bindings

Controles Extendidos y Custom Controls
• El comportamiento de los controles puede ser extendido creando clases
que heredan de los controles base y añadiendo Propiedades de
Dependencia, un concepto usado en el desarrollo con XAML que permite
crear propiedades que pueden ser enlazadas con orígenes de datos
(Bindings XAML).

Renderers y Custom Renderers
• Los renderers son clases que provee Xamarin, para acceder a los miembros
nativos de los controles de Forms y alterar así la forma como estos
controles se dibujan. Cada control de Forms tiene su renderer excepto los
Layouts.
• Es posible querer renderizar o presentar un control que aún no ha sido
incluido en Xamarin Forms pero que se desea usar.
• Para esto existe un renderer genérico ViewRenderer a través del cual se
pueden realizar las implementaciones de estos controles.
• Para que estos controles tengan datos que provengan de Bindings debe
asociarse este concepto con el visto previamente Controles Extendidos y
Custom Controls.

Bindings
Xamarin provee de los bindings necesarios para acceder a las APIs base de
cada plataforma desde C#, sin embargo hay empresas de terceros que
proveen controles o funcionalidades que son populares.
La manera de acceder a estas es crear nuestros propios bindings si es que no
existen ya en la tienda de componentes.
Es necesario aprender como se hace esto en cada plataforma en particular.
Android
• http://developer.xamarin.com/guides/android/advanced_topics/java_integ
ration_overview/binding_a_java_library_%28.jar%29/
iOS
• http://developer.xamarin.com/guides/ios/advanced_topics/binding_objecti
ve-c/

Parte 3: Introducción a XAML y MVVM

Conceptos básicos

• XAML es un lenguaje declarativo, basado en
XML y pensado para escribir la interface gráfica
de una aplicación de forma textual y ordenada.
• Una característica muy importante de XAML es
que todos los objetos qué definamos en el,
automáticamente son instanciados por el CLR y
creados como objetos accesibles desde código,
sin necesidad de realizar de nuevo la declaración
de los mismos en Code Behind, todo gracias al
mecanismo de las Clases Parciales.
• Su principal objetivo es la separación de
responsabilidades.
¿Qué es XAML?

• Los conceptos que permiten esta separación de responsabilidades en
XAML son en especial los bindings y los comandos, los cuales nos
permiten respectivamente “enlazar” datos y acciones a nuestras vistas.
• Ambos dependen del otro concepto a manejar que se conoce como el
contexto de datos, para el cual se requiere una adecuada comprensión
de los conceptos de orientación a objetos.
• Los convertidores por su parte nos ayudan a trasformar un dato y
mostrar en la vista el resultado de dicha transformación.
XAML

• Es un patrón de diseño creado en 2005 y es una evolución de MVC y MVP
usado especialmente para aplicaciones basadas en XAML.
• La traducción de sus iniciales es Modelo Vista – Vista Modelo.
• Su principal propósito y beneficio está en la separación de responsabilidades
a nivel de la presentación de nuestras aplicaciones.
• Las implementaciones de MVVM son diversas y dependen básicamente de
las necesidades que tenga la aplicación o el desarrollo en sí mismo.
• Existen muchos frameworks disponibles para implementar MVVM en
aplicaciones XAML, su elección es personal y opcional. El framework más
más usado es MVVM Light.
¿Qué es MVVM?

Separación de responsabilidades
UserInterface
AppLogic
General Model-View-ViewModel (MVVM)

MVVM Simple
Model
View
ViewModel
Data Bindings
One way
One time
Two way
Commands
Interfaz de Usuario
Clases que representan las
fuentes de datos
Estructuras que
representan los contextos
de datos de las pantallas y
el que permiten el acceso a
la logica de negocio

Vistas
Aplicaciones de escritorio, web forms
Caja de texto
Etiqueta
Form.cs (Code behind C#)
Form.designer.cs (C#)
Clase
Form
Usar code behind en clases parciales,
es el escenario “típico o más sencillo”
de un desarrollador .NET.
Aplicaciones XAML
Caja de texto
Etiqueta
MainPage.xaml
(Lenguaje declarativo XAML)
MainPage.xaml.cs (Code behind C#)
Clase
MainPage
Nuestra meta para hacer
código portable es usar
code hind al mínimo
posible. En la demo de
hecho cero code behind.

Usando XAML se pueden crear de forma declarativa los
mismos elementos gráficos que se crearían en código
Vistas
<StackLayout>
<TextBox/>
<Button/>
</StackLayout>
StackLayout stackPanel = new StackLayout();
Entry textBox = new Entry();
stackPanel.Children.Add(textBox);
Button button = new Button();
stackPanel.Children.Add(button);

Ambos escenarios permiten acceder a los controles de la pantalla como
miembros de la clase que los contiene es decir
this.txtMensaje.Text = “Hola”;
Y crear event handlers para poner el código relacionado a una interacción
del usuario, por ejemplo el click de un botón
private void Button_Click(object sender, RoutedEventArgs e)
{ //Code }
Sin embargo como ya lo dijimos, está no es la mejor práctica para hacer
código portable y reusable.
Vistas

Bindings y Contextos de datos
Los bindings son textos declarativos que
definen a que propiedad o comando del
contexto de datos está asociado un
atributo de un elemento XAML.
Los contextos de datos, no son más que
instancias de clases.
Como fuente de los bindings también
pueden usarse recursos XAML
declarados a nivel de la App o en algún
diccionario de recursos.
Guardar cambios
Nombre
Editar perfil
Apellido

Entendiendo los bindings de forma simple
12:38
recordar
*****
iniciar sesión
password
soreygarcia
usuario
Text={Binding UserName}
Password={Binding Password}
Command={Binding StartCommand}
BindingContext={Binding Usuario, Source={StaticResource Locator}}
BindingContext > Instancia de una clase, de una Vista Modelo

XAML sin bindings
<StackLayout x:Name="ContentPanel" Grid.Row="1" >
<Label Text="TextBlock"/>
<Entry Height="72" Text="TextBox"/>
<Button Content="Button"/>
</StackLayout>
Esta es la declaración XAML de la vista que se presento en la diapositiva
anterior creada en Windows Phone.

XAML con bindings
<StackLayout x:Name="ContentPanel" Grid.Row="1">
<Entry Height="72" Text="{Binding Nombre, Mode=TwoWay}"/>
<TextBox Height="72" Text="{Binding Apellido, Mode=TwoWay}"/>
<Button Content="Button"/>
</StackLayout>
Esta es la declaración XAML usando bindings. Lo que hay que entender de esto es que los
bindings de los Textbox indican que esperamos que el DataContext del StackPanel tengan las
propiedades Nombre y Apellido.

¿De donde van a salir esos datos?
<Grid x:Name="LayoutRoot" Background="Transparent"
BindingContext="{Binding Usuario, Source={StaticResource SampleDataSource}}">
<Grid x:Name="ContentPanel">
<!– Aquí van los demás elementos de nuestra vista -->
</Grid>
</Grid>
Si vemos el contenedor de nuestro StackLayout vemos que tiene asignados dos contextos, uno
en tiempo de diseño y otro en tiempo de ejecución.
El contexto del contenedor interno, espera que el contexto del contenedor más externo tenga
alguna propiedad con el nombre Persona.

Vistas Modelos
Las Vistas Modelos
son las clases que al
instanciarse van a
servir como
contextos de datos a
nuestras vistas.
Aprender a definir las
Vistas Modelo, es
más importante de lo
que parece.
class ViewModels
ClueViewModel
«property»
+ Name(): string
+ Value(): string
BindableBase
MainViewModel
- jsonService: IJsonService
- navigationService: INavigationService
- phoneService: IPhoneService
- randomGen: Random
- LoadPlayers(): void
+ MainViewModel(INavigationService, IPhoneService)
~ SufflePlayers(): void
«property»
+ Players(): ObservableCollection<PlayerViewModel>
+ SelectedPlayer(): PlayerViewModel
BindableBase
PlayerViewModel
- navigationService: INavigationService
- phoneService: IPhoneService
- wasDiscovered: bool
- Discover(): void
- Guess(): void
+ PlayerViewModel(INavigationService, IPhoneService)
«property»
+ Answer(): string
+ Clues(): ObservableCollection<ClueViewModel>
+ DiscoverCommand(): ICommand
+ GuessCommand(): ICommand
+ Id(): int
+ Name(): string
+ ParentViewModel(): MainViewModel
+ Photo(): string
+ WasDiscovered(): bool
http://blog.soreygarcia.me/2013/12/imaginando-los-prototipos-y-las-vistas.html

Comandos
Events
Event
HandlersCommanding
Los comandos se enlazan a las vistas a través de bindings y dependen del
contexto de datos pero están enfocados a ejecutar acciones. Su
implementación se hace usando la interfaz ICommand

Comandos
Esta es la asociación en XAML usando bindings del uso de un comando, como
vemos la vista no tiene idea de cual es la implementación concreta del método,
esta es relativa al contexto que le sea asignado.
<StackLayout x:Name="ContentPanel" Grid.Row="1" >
<Button Content="Button" Command="{Binding GuardarPerfilCommand}"/>
</StackLayout>

Servicios
Otra buena práctica es no colocar lógica compleja en las vistas modelo, aunque ellas son las
receptoras de los comandos, una práctica simple (en este nivel intermedio) es usar clases que
llamaremos servicios, para ejecutar la lógica particular de la app o del negocio.

http://blog.soreygarcia.me/2014/07/xaml-para-principiantes-fordummies.html

Android iOS
Cross (Xamarin Forms)
PCL (Logic)
Windows
+
C
o
m
p
a
r
t
i
d
o
CalendarService CalendarService CalendarService
Xamarin Forms
NavigationService
MainViewModel
ApiService
DepencyCo
ntaider
ICalendarSer
vice
LocalDataService
DbConnectionService DbConnectionService
IDbConnecti
onService

Pantallas
(XAML)
ViewModels
(Origen de los
datos)
Servicios
InstancelLocator
(Dependency
Injection)
Resources
Framework
MVVM
(MVVM Light,
MVVM Cross,
*
Infrastructure.Commo
n)
ApiService
LocalDataServic
e
SettingsService
NavigationServi
ce
NetworkService
CrossService
DialogService
Models

MVVM Light
Pantallas (XAML)
C
o
n
t
r
o
l
e
s
V
i
e
w
M
o
d
e
l
s
Commands
Bindings
Binding
Name
Property Name
Method Login
S
e
r
v
i
c
i
o
s
Data
Login
Binding
ValidationErrors
[KeyName]
Binding
LoginCommand
StaticResource
ThemeColor
Recursos
(Resource Dictionary)
ViewModelLocator
MainViewModel
Patterns & Practices
ServiceLocator
Arquitectura
Con MVVM Light
Autofac (Contenedor de dependencias)
ServiceLocator
ApiService
LocalDataService
DataTemplates
Colores
Fuentes

Material Recomendado
Foros de Xamarin
BugZilla
VERSION FINAL
https://blogs.msdn.microsoft.com/microsoft_press/2016/03/31/fre
e-ebook-creating-mobile-apps-with-xamarin-forms/
OFFICIAL SITE
https://developer.xamarin.com/
ALGUNOS VIDEOS
https://www.youtube.com/user/soreygarcia

Free 30 Day Trial - xamarin.com/university
Unrivaled Mobile
Development
Training
Live unlimited mobile development training from
mobile experts, in your time-zone, on your
schedule, and as often as you'd like.

¿Preguntas?
Sorey García
soreygarcia@gmail.com | @soreygarcia | blog.soreygarcia.me

Introducción a Xamarin Forms con XAML

Más contenido relacionado

Destacado (20)

Similar a Introducción a Xamarin Forms con XAML (20)

Más de Sorey García (20)

Último (20)

Introducción a Xamarin Forms con XAML