Xamarin.Forms [french]

Xamarin.Forms
Montreal Mobile .NET Developers 10 Juin 2015
Laurent Duveau
laurent@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

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:
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érer
des 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"
<Label Text="Go"
BackgroundColor="Green"
FontSize="20"
</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);
}
);

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

Model-View-ViewModel
ModelView ViewModel
Data Binding
Xamarin.Forms
Events
Data

Data Binding

Data Binding
binding bi-directionnel:

É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

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

Dependency Service
Étape 2: Implémenter le code spécifique

Dependency Service
Étape 3: Exposer le service

Dependency Service
Étape 4: Utiliser depuis le code commun

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…
 Documentation
http://developer.xamarin.com/guides/cross-platform/xamarin-forms/
 XAML
http://developer.xamarin.com/guides/cross-platform/xamarin-forms/xaml-
for-xamarin-forms/
 Exemples
https://github.com/xamarin/xamarin-forms-samples

Xamarin.Forms [french]

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Xamarin.Forms [french]

Similaire à Xamarin.Forms [french] (20)

Plus de Laurent Duveau

Plus de Laurent Duveau (20)

Xamarin.Forms [french]