Xamarin.Forms [french]

Xamarin.Forms

Montreal Mobile .NET Developers 10 Juin 2015

Laurent [email protected]

AngularJS, Azure et

Xamarin

MVP / MCT / RD @laurentduveau Montrealldex.ca

2Xamarin.Forms – Montreal Mobile .NET Developers

Mes services

Besoin

d’aide?

Web/HTML5/AngularJS

Xamarin

Contactez moi!

www.LDEX.ca

ASP.NET


Agenda

Introduction

Développement mobile multi-plateformes

Xamarin.Forms

Présentation

Principes de fonctionnement

XAML pour les écrans

Étendre les fonctionnalités

Android, iOS et Windows…

UX iOS != Android != Windows


UX Différente


UX Différente


Navigation

iOS (iPhone) Android OS

Application Applicatif + hardware

1 bouton système 3-4 boutons systèmes


Navigation

iOS: pas de bouton “précédent” physique.


Affichage et résolutions

iOS Android OS

3 Devices 1000+ Devices

6 résolutions Écrans: 3,7’ – 10,1’

Multitude de resolutions!!

iPhone iPod iPad


Vocabulaire

Android iOS Windows Phone

Layout (.axml) UIView (.xib ou

storyboard)

View (.xaml)

Activity UIViewController Page

Fragment UIView UserControl

Intent UINavigationController Frame

- UIApplication Application

Xamarin.Forms


Xamarin.Forms:

Partage étendu à la couche UI!approche Xamarin traditionnelle

Shared UI Code

Xamarin et Xamarin.Forms


Xamarin.Forms

Bâtir une app native iOS, Android et Windows à partir

d’une base de code C# unique.


Xamarin.Forms

Partage aussi l’interface graphique!

Intégration possible de code spécifique à une

plateforme

Prise en main facile, pas de connaissance

spécifique des OS

Plus de 40 contrôles graphiques disponibles


Comment ça marche ?

A l’exécution, chaque élément

graphique Xamarin.Forms est

généré dans son équivalent

spécifique à la plateforme cible

Une seule API pour générerdes interfaces natives et spécifiques à l’OS


Pages, Layouts, et Contrôles

En code ou en XAML (MVVM)

Data Binding bidirectionnel

Navigation

API commune d’animation

Messaging Center

Accès aux API natives avec des

CustomRenderers et

DependencyService

Camera, GPS, …

NFC, … sur Android

PassKit, … sur iOS

Tiles, … sur WP

Shared UI Code

Qu’est ce qui est disponible?


Content MasterDetail Navigation Tabbed Carousel

Pages


Stack Absolute Relative Grid ContentView ScrollView Frame

Layouts


ActivityIndicator BoxView Button DatePicker Editor

Entry Image Label ListView Map

OpenGLView Picker ProgressBar SearchBar Slider

Stepper TableView TimePicker WebView EntryCell

ImageCell SwitchCell TextCell ViewCell

Contrôles


Ecosystème de contrôles

DEMONSTRATION

Une première app Xamarin.Forms


Xamarin.Forms est un package NuGet

Le mettre à jour! (même sur un nouveau projet)


C# ou XAML

var red = new Label{

Text = "Stop",BackgroundColor = Color.Red,FontSize = 20,WidthRequest = 100

};var yellow = new Label{

Text = "Slow down",BackgroundColor = Color.Yellow,FontSize = 20,WidthRequest = 100

};var green = new Label{

Text = "Go",BackgroundColor = Color.Green,FontSize = 20,WidthRequest = 200

};

Content = new StackLayout{

Spacing = 10,VerticalOptions = LayoutOptions.Center,Orientation = StackOrientation.Horizontal,HorizontalOptions = LayoutOptions.Center,Children = { red, yellow, green }

};

<?xml version="1.0" encoding="utf-8" ?><ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="HelloXamarinFormsWorldXaml.StackLayoutExample3"

Padding="20"><StackLayout Spacing="10"

VerticalOptions="Center"Orientation="Horizontal"HorizontalOptions="Center">

<Label Text="Stop"BackgroundColor="Red"FontSize="20"WidthRequest="100" />

<Label Text="Slow down"BackgroundColor="Yellow"FontSize="20"WidthRequest="100" />

<Label Text="Go"BackgroundColor="Green"FontSize="20"WidthRequest="200" />

</StackLayout></ContentPage>


XAML

XAML différent du XAML Microsoft

=> Pas de designer Visual Studio!


Code spécifique

if (Device.OS == TargetPlatform.WinPhone) // ou iOS, Android

{ ...

}

if (Device.Idiom == TargetIdiom.Phone) // ou .Tablet

{ ...

}


Code spécifique

Device.OnPlatform (

iOS: () => {

page.BackgroundImage = "back.png";

label.FontFamily = "HelveticaNeue-Thin";

label.FontSize = 20;

},

Android: () => {

page.BackgroundColor = Color.FromHex ("#AA66CC");

label.FontFamily = "sans-serif-condensed";

label.FontSize = Device.GetNamedSize (NamedSize.Medium, label);

}

);


Code spécifique

Device.OnPlatform (

iOS: () => {

page.BackgroundImage = "back.png";

label.FontFamily = "HelveticaNeue-Thin";

label.FontSize = 20;

},

Android: () => {

page.BackgroundColor = Color.FromHex ("#AA66CC");

label.FontFamily = "sans-serif-condensed";

label.FontSize = Device.GetNamedSize (NamedSize.Medium, label);

}

);


En XAML

<BoxView HorizontalOptions="Center">

<BoxView.Color>

<OnPlatform x:TypeArguments="Color"

iOS="Green"

Android="#738182"

WinPhone="Accent" />

</BoxView.Color>

<BoxView.WidthRequest>

<OnPlatform x:TypeArguments="x:Double"

iOS="30"

Android="40"

WinPhone="50" />

</BoxView.WidthRequest>

</BoxView>


Navigation

Root Page

Utiliser un NavigationPage: implémente Ia navigation dans les

pages

Navigation Standard

Navigation.PushAsync(nextPage);

Navigation.PopAsync();

Navigation Modale

Navigation.PushModalAsync(modalPage);

Navigation.PopModalAsync();

DEMONSTRATION

XAML, navigation et code spécifique


Model-View-ViewModel

ModelView ViewModel

Affichage Intéraction avec la

vue

Objets du domaine

d’affaire

Events

DataData


Model-View-ViewModel

ModelView ViewModel

Data Binding

Xamarin.Forms

Events

Data


Data Binding


Data Binding


Data Binding


Data Binding

binding bi-directionnel:

DEMONSTRATION

App Stock

Étendre Xamarin.Forms


Étendre Xamarin.Forms

Créer ou personnaliser les contrôles UI

Custom Renderers

Utiliser des services à implémentation spécifique pour chaque

plateforme

Dependency Service


Extensibilité

Custom Renderer Hériter d’un contrôle existant

Créer un nouveau contrôle

Ajout de propriétés bindable

http://developer.xamarin.com/guides/cross-platform/xamarin-forms/custom-renderer/

http://developer.xamarin.com/guides/cross-platform/xamarin-forms/custom-renderer/


Custom Renderer

Contrôle de saisie de base que l’on désire étendre:


Custom Renderer

Étape 1: Créer le contrôle étendu Dans le projet commun (PCL):


Custom Renderer

Étape 2: L’utiliser dans une page Dans le projet commun (PCL):


Custom Renderer

Étape 3: Implémenter le code du renderer Dans les projets pour chaque plateforme


Étape 4: Exporter le renderer Dans les projets pour chaque plateforme:

Custom Renderer


Extensibilité

Dependency Service

Partager les fonctionnalités spécifiques aux

plateformes à l’aide d’interfaces.


Dependency Service

Étape 1: Créer une interface Dans le projet commun (PCL):


Dependency Service

Étape 2: Implémenter le code spécifique Dans les projets pour chaque plateforme:


Dependency Service

Étape 3: Exposer le service Dans les projets pour chaque plateforme:


Dependency Service

Étape 4: Utiliser depuis le code commun Dans le projet commun (PCL):

DEMONSTRATION

Synthétiseur vocal


Animations

API d’animation multi-plateforme

Asynchrone (async/await)

www.github.com/JamesMontemagno/FormsAnimations


Messaging Center

MessagingCenter.Subscribe<T>(object subscriber, string message, Action<T> callback);

MessagingCenter.Send(T item, string message);


Messaging Center

Page maître:

Page détails:


Pour aller plus loin…

Documentationhttp://developer.xamarin.com/guides/cross-platform/xamarin-forms/

XAMLhttp://developer.xamarin.com/guides/cross-platform/xamarin-forms/xaml-

for-xamarin-forms/

Exempleshttps://github.com/xamarin/xamarin-forms-samples

http://developer.xamarin.com/guides/cross-platform/xamarin-forms/

http://developer.xamarin.com/guides/cross-platform/xamarin-forms/xaml-for-xamarin-forms/

https://github.com/xamarin/xamarin-forms-samples


Technology

Xamarin.Forms [french]