Xamarin.Forms [french]

Xamarin.Forms

Montreal Mobile .NET Developers 10 Juin 2015

Laurent Duveaulaurent@ldex.ca

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

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

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

</StackLayout></ContentPage>

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

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

Objets du domaine

d’affaire

Events

DataData

Model-View-ViewModel

ModelView ViewModel

Data Binding

Xamarin.Forms

Events

Data Binding

binding bi-directionnel:

DEMONSTRATION

App Stock

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

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

Xamarin.Forms [french]

Technology

Why prism for xamarin.forms

Azure MobileApp & Xamarin.Forms

Xamarin.Forms в реальных проектах

What's new in Xamarin.Forms?

Mastering Xamarin.Forms - Sample Chapter

Introduction to Xamarin.Forms 2.x

Xamarin.Forms - XAML

Introduction to Xamarin.Forms

Novedades Xamarin.Forms 2

Building Your First Xamarin.Forms App

Xamarin.Forms. Xamarin.Forms v. Standard Xamarin Architecture iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Standard Xamarin.Forms

Seminar Xamarin.Forms

Diving Into Xamarin.Forms

Entendendo Xamarin.Forms

Your First Xamarin.Forms App

Customizing Xamarin.Forms UI

Navigation in Xamarin.Forms

Deep Dive in Xamarin.Forms

What's New Xamarin.Forms 1.3

Introduccion a Xamarin y Xamarin.Forms