Introducción a Xamarin Forms con XAML

Abril 2016 Diplomado Dispositivos Móviles 1

Módulo de Xamarin FormsParte 1: Introducción a Xamarin


Sorey García (@soreygarcia)

Consultora en Movilidad y Freelancer XAML

Ingenieria InformaticaPolitécnico Jaime Isaza Cadavid

Especialista en Desarrollo de SoftwareUniversidad EAFIT

Docente de CátedraInstitución Universitaria Pascual Bravo

Co-fundadora de la comunidad deDesarrolladores 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 AnywhereApproach

Mínimo comúndenominador 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



XamarinApproach

Compartecó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(DialogInterfacedialogInterface, 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

User Interface

App Logic

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/MonoCoreCLRAzure

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/

http://iosapi.xamarin.com/?link=T:Xamarin.Forms.EntryCell

http://iosapi.xamarin.com/?link=T:Xamarin.Forms.SwitchCell

http://iosapi.xamarin.com/?link=T:Xamarin.Forms.TextCell

http://iosapi.xamarin.com/?link=T:Xamarin.Forms.ImageCell


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


Módulo de Xamarin FormsParte 2: Consideraciones de Publicación


XAML y C# EverywhereLa mayoría de recursos en internet enseñan XamarinForms 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/

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


HerramientasXamarin 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 ReleaseAndroid

• 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/

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 AppIdcorrespondiente 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.

https://www.bingmapsportal.com/


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_integration_overview/binding_a_java_library_%28.jar%29/

iOS

• http://developer.xamarin.com/guides/ios/advanced_topics/binding_objective-c/

http://developer.xamarin.com/guides/android/advanced_topics/java_integration_overview/binding_a_java_library_(.jar)/

http://developer.xamarin.com/guides/ios/advanced_topics/binding_objective-c/


Módulo de Xamarin FormsParte 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

User Interface

App Logic

General Model-View-ViewModel (MVVM)


MVVM Simple

Model

View

ViewModel

Data BindingsOne way

One time

Two way

Commands

Interfaz de Usuario

Clases que representan las fuentes de datos

Estructuras querepresentan los contextosde 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#)

ClaseMainPage

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 XAMLdeclarados 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

EventsEvent

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


ComandosEsta 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>


ServiciosOtra 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

+Compartido

CalendarService CalendarService CalendarService

Xamarin Forms

NavigationService

MainViewModel

ApiService

DepencyContaider

ICalendarService

LocalDataService

DbConnectionService DbConnectionService

IDbConnectionService


Pantallas(XAML)

ViewModels

(Origen de los datos)

Servicios

InstancelLocator(Dependency

Injection)

Resources

Framework MVVM

(MVVM Light,MVVM Cross,

* Infrastructure.Commo

n)

ApiServiceLocalDataServic

e

SettingsService

NavigationService

NetworkService

CrossService

DialogService

Models


MVVM Light

Pantallas (XAML)

Controles

ViewModels

Commands

Bindings

BindingName

Property Name

Method Login

Servicios

Data

Login

BindingValidationErrors

[KeyName]

BindingLoginCommand

StaticResourceThemeColor

Recursos(Resource Dictionary)

ViewModelLocator

MainViewModel

Patterns & Practices

ServiceLocator

Arquitectura Con MVVM Light

Autofac (Contenedor de dependencias)

ServiceLocator

ApiService

LocalDataService

DataTemplatesColoresFuentes


Material Recomendado

Foros de XamarinBugZilla

VERSION FINALhttps://blogs.msdn.microsoft.com/microsoft_press/2016/03/31/free-ebook-creating-mobile-apps-with-xamarin-forms/

OFFICIAL SITEhttps://developer.xamarin.com/

ALGUNOS VIDEOShttps://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í[email protected] | @soreygarcia | blog.soreygarcia.me

Education

Introducción a Xamarin Forms con XAML