Xamarin.Forms
Montreal Mobile .NET Developers 10 Juin 2015
Laurent Duveau
laurent@ldex.ca
AngularJS, Azure et
Xamarin
MVP ...
2Xamarin.Forms – Montreal Mobile .NET Developers
Mes services
Besoin
d’aide?
Web/HTML5/AngularJS
Xamarin
Contactez moi!
ww...
3Xamarin.Forms – Montreal Mobile .NET Developers
Agenda
 Introduction
 Développement mobile multi-plateformes
 Xamarin....
Android, iOS et Windows…
UX iOS != Android != Windows
6Xamarin.Forms – Montreal Mobile .NET Developers
UX Différente
7Xamarin.Forms – Montreal Mobile .NET Developers
UX Différente
8Xamarin.Forms – Montreal Mobile .NET Developers
Navigation
iOS (iPhone) Android OS
Application Applicatif + hardware
1 bo...
9Xamarin.Forms – Montreal Mobile .NET Developers
Navigation
iOS: pas de bouton “précédent” physique.
10Xamarin.Forms – Montreal Mobile .NET Developers
Affichage et résolutions
iOS Android OS
3 Devices 1000+ Devices
6 résolu...
11Xamarin.Forms – Montreal Mobile .NET Developers
Vocabulaire
Android iOS Windows Phone
Layout (.axml) UIView (.xib ou
sto...
Xamarin.Forms
13Xamarin.Forms – Montreal Mobile .NET Developers
Xamarin.Forms:
Partage étendu à la couche UI!
approche Xamarin tradition...
14Xamarin.Forms – Montreal Mobile .NET Developers
Xamarin.Forms
Bâtir une app native iOS, Android et Windows à partir
d’un...
15Xamarin.Forms – Montreal Mobile .NET Developers
Xamarin.Forms
Partage aussi l’interface graphique!
Intégration possibl...
16Xamarin.Forms – Montreal Mobile .NET Developers
Comment ça marche ?
A l’exécution, chaque élément
graphique Xamarin.Form...
17Xamarin.Forms – Montreal Mobile .NET Developers
 Pages, Layouts, et Contrôles
 En code ou en XAML (MVVM)
 Data Bindin...
18Xamarin.Forms – Montreal Mobile .NET Developers
Content MasterDetail Navigation Tabbed Carousel
Pages
19Xamarin.Forms – Montreal Mobile .NET Developers
Stack Absolute Relative Grid ContentView ScrollView Frame
Layouts
20Xamarin.Forms – Montreal Mobile .NET Developers
ActivityIndicator BoxView Button DatePicker Editor
Entry Image Label Lis...
21Xamarin.Forms – Montreal Mobile .NET Developers
Ecosystème de contrôles
DEMONSTRATION
Une première app Xamarin.Forms
23Xamarin.Forms – Montreal Mobile .NET Developers
Xamarin.Forms est un package NuGet
 Le mettre à jour! (même sur un nouv...
24Xamarin.Forms – Montreal Mobile .NET Developers
C# ou XAML
var red = new Label
{
Text = "Stop",
BackgroundColor = Color....
25Xamarin.Forms – Montreal Mobile .NET Developers
XAML
 XAML différent du XAML Microsoft
 => Pas de designer Visual Stud...
26Xamarin.Forms – Montreal Mobile .NET Developers
Code spécifique
if (Device.OS == TargetPlatform.WinPhone) // ou iOS, And...
27Xamarin.Forms – Montreal Mobile .NET Developers
Code spécifique
Device.OnPlatform (
iOS: () => {
page.BackgroundImage = ...
28Xamarin.Forms – Montreal Mobile .NET Developers
Code spécifique
Device.OnPlatform (
iOS: () => {
page.BackgroundImage = ...
29Xamarin.Forms – Montreal Mobile .NET Developers
En XAML
<BoxView HorizontalOptions="Center">
<BoxView.Color>
<OnPlatform...
30Xamarin.Forms – Montreal Mobile .NET Developers
Navigation
 Root Page
 Utiliser un NavigationPage: implémente Ia navig...
DEMONSTRATION
XAML, navigation et code spécifique
32Xamarin.Forms – Montreal Mobile .NET Developers
Model-View-ViewModel
ModelView ViewModel
Affichage Intéraction avec la
v...
33Xamarin.Forms – Montreal Mobile .NET Developers
Model-View-ViewModel
ModelView ViewModel
Data Binding
Xamarin.Forms
Even...
34Xamarin.Forms – Montreal Mobile .NET Developers
Data Binding
35Xamarin.Forms – Montreal Mobile .NET Developers
Data Binding
36Xamarin.Forms – Montreal Mobile .NET Developers
Data Binding
37Xamarin.Forms – Montreal Mobile .NET Developers
Data Binding
binding bi-directionnel:
DEMONSTRATION
App Stock
Étendre Xamarin.Forms
41Xamarin.Forms – Montreal Mobile .NET Developers
Étendre Xamarin.Forms
 Créer ou personnaliser les contrôles UI
 Custom...
42Xamarin.Forms – Montreal Mobile .NET Developers
Extensibilité
Custom Renderer
 Hériter d’un contrôle existant
 Créer u...
43Xamarin.Forms – Montreal Mobile .NET Developers
Custom Renderer
 Contrôle de saisie de base que l’on désire étendre:
44Xamarin.Forms – Montreal Mobile .NET Developers
Custom Renderer
Étape 1: Créer le contrôle étendu
 Dans le projet commu...
45Xamarin.Forms – Montreal Mobile .NET Developers
Custom Renderer
Étape 2: L’utiliser dans une page
 Dans le projet commu...
46Xamarin.Forms – Montreal Mobile .NET Developers
Custom Renderer
Étape 3: Implémenter le code du renderer
 Dans les proj...
47Xamarin.Forms – Montreal Mobile .NET Developers
Étape 4: Exporter le renderer
 Dans les projets pour chaque plateforme:...
48Xamarin.Forms – Montreal Mobile .NET Developers
Extensibilité
Dependency Service
Partager les fonctionnalités spécifiqu...
49Xamarin.Forms – Montreal Mobile .NET Developers
Dependency Service
Étape 1: Créer une interface
 Dans le projet commun ...
50Xamarin.Forms – Montreal Mobile .NET Developers
Dependency Service
Étape 2: Implémenter le code spécifique
 Dans les pr...
51Xamarin.Forms – Montreal Mobile .NET Developers
Dependency Service
Étape 3: Exposer le service
 Dans les projets pour c...
52Xamarin.Forms – Montreal Mobile .NET Developers
Dependency Service
Étape 4: Utiliser depuis le code commun
 Dans le pro...
DEMONSTRATION
Synthétiseur vocal
54Xamarin.Forms – Montreal Mobile .NET Developers
Animations
 API d’animation multi-plateforme
 Asynchrone (async/await)
www.github.com/JamesMontemagno/FormsAnimations
57Xamarin.Forms – Montreal Mobile .NET Developers
Messaging Center
 MessagingCenter.Subscribe<T>(object subscriber, strin...
58Xamarin.Forms – Montreal Mobile .NET Developers
Messaging Center
Page maître:
Page détails:
59Xamarin.Forms – Montreal Mobile .NET Developers
Pour aller plus loin…
 Documentation
http://developer.xamarin.com/guide...
60Xamarin.Forms – Montreal Mobile .NET Developers
Xamarin.Forms [french]
Xamarin.Forms [french]
Prochain SlideShare
Chargement dans…5
×

Xamarin.Forms [french]

1 036 vues

Publié le

Présentation technique Xamarin.Forms au groupe Montreal Mobile Dev le 10 Juin 2015.

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 036
Sur SlideShare
0
Issues des intégrations
0
Intégrations
109
Actions
Partages
0
Téléchargements
32
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Xamarin.Forms [french]

  1. 1. Xamarin.Forms Montreal Mobile .NET Developers 10 Juin 2015 Laurent Duveau laurent@ldex.ca AngularJS, Azure et Xamarin MVP / MCT / RD @laurentduveau Montrealldex.ca
  2. 2. 2Xamarin.Forms – Montreal Mobile .NET Developers Mes services Besoin d’aide? Web/HTML5/AngularJS Xamarin Contactez moi! www.LDEX.ca ASP.NET
  3. 3. 3Xamarin.Forms – Montreal Mobile .NET Developers Agenda  Introduction  Développement mobile multi-plateformes  Xamarin.Forms  Présentation  Principes de fonctionnement  XAML pour les écrans  Étendre les fonctionnalités
  4. 4. Android, iOS et Windows…
  5. 5. UX iOS != Android != Windows
  6. 6. 6Xamarin.Forms – Montreal Mobile .NET Developers UX Différente
  7. 7. 7Xamarin.Forms – Montreal Mobile .NET Developers UX Différente
  8. 8. 8Xamarin.Forms – Montreal Mobile .NET Developers Navigation iOS (iPhone) Android OS Application Applicatif + hardware 1 bouton système 3-4 boutons systèmes
  9. 9. 9Xamarin.Forms – Montreal Mobile .NET Developers Navigation iOS: pas de bouton “précédent” physique.
  10. 10. 10Xamarin.Forms – Montreal Mobile .NET Developers 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
  11. 11. 11Xamarin.Forms – Montreal Mobile .NET Developers Vocabulaire Android iOS Windows Phone Layout (.axml) UIView (.xib ou storyboard) View (.xaml) Activity UIViewController Page Fragment UIView UserControl Intent UINavigationController Frame - UIApplication Application
  12. 12. Xamarin.Forms
  13. 13. 13Xamarin.Forms – Montreal Mobile .NET Developers Xamarin.Forms: Partage étendu à la couche UI! approche Xamarin traditionnelle Shared UI Code Xamarin et Xamarin.Forms
  14. 14. 14Xamarin.Forms – Montreal Mobile .NET Developers Xamarin.Forms Bâtir une app native iOS, Android et Windows à partir d’une base de code C# unique.
  15. 15. 15Xamarin.Forms – Montreal Mobile .NET Developers 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
  16. 16. 16Xamarin.Forms – Montreal Mobile .NET Developers 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
  17. 17. 17Xamarin.Forms – Montreal Mobile .NET Developers  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?
  18. 18. 18Xamarin.Forms – Montreal Mobile .NET Developers Content MasterDetail Navigation Tabbed Carousel Pages
  19. 19. 19Xamarin.Forms – Montreal Mobile .NET Developers Stack Absolute Relative Grid ContentView ScrollView Frame Layouts
  20. 20. 20Xamarin.Forms – Montreal Mobile .NET Developers 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
  21. 21. 21Xamarin.Forms – Montreal Mobile .NET Developers Ecosystème de contrôles
  22. 22. DEMONSTRATION Une première app Xamarin.Forms
  23. 23. 23Xamarin.Forms – Montreal Mobile .NET Developers Xamarin.Forms est un package NuGet  Le mettre à jour! (même sur un nouveau projet)
  24. 24. 24Xamarin.Forms – Montreal Mobile .NET Developers 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>
  25. 25. 25Xamarin.Forms – Montreal Mobile .NET Developers XAML  XAML différent du XAML Microsoft  => Pas de designer Visual Studio!
  26. 26. 26Xamarin.Forms – Montreal Mobile .NET Developers Code spécifique if (Device.OS == TargetPlatform.WinPhone) // ou iOS, Android { ... } if (Device.Idiom == TargetIdiom.Phone) // ou .Tablet { ... }
  27. 27. 27Xamarin.Forms – Montreal Mobile .NET Developers 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); } );
  28. 28. 28Xamarin.Forms – Montreal Mobile .NET Developers 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); } );
  29. 29. 29Xamarin.Forms – Montreal Mobile .NET Developers 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>
  30. 30. 30Xamarin.Forms – Montreal Mobile .NET Developers 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();
  31. 31. DEMONSTRATION XAML, navigation et code spécifique
  32. 32. 32Xamarin.Forms – Montreal Mobile .NET Developers Model-View-ViewModel ModelView ViewModel Affichage Intéraction avec la vue Objets du domaine d’affaire Events Data Data
  33. 33. 33Xamarin.Forms – Montreal Mobile .NET Developers Model-View-ViewModel ModelView ViewModel Data Binding Xamarin.Forms Events Data
  34. 34. 34Xamarin.Forms – Montreal Mobile .NET Developers Data Binding
  35. 35. 35Xamarin.Forms – Montreal Mobile .NET Developers Data Binding
  36. 36. 36Xamarin.Forms – Montreal Mobile .NET Developers Data Binding
  37. 37. 37Xamarin.Forms – Montreal Mobile .NET Developers Data Binding binding bi-directionnel:
  38. 38. DEMONSTRATION App Stock
  39. 39. Étendre Xamarin.Forms
  40. 40. 41Xamarin.Forms – Montreal Mobile .NET Developers É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
  41. 41. 42Xamarin.Forms – Montreal Mobile .NET Developers 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/
  42. 42. 43Xamarin.Forms – Montreal Mobile .NET Developers Custom Renderer  Contrôle de saisie de base que l’on désire étendre:
  43. 43. 44Xamarin.Forms – Montreal Mobile .NET Developers Custom Renderer Étape 1: Créer le contrôle étendu  Dans le projet commun (PCL):
  44. 44. 45Xamarin.Forms – Montreal Mobile .NET Developers Custom Renderer Étape 2: L’utiliser dans une page  Dans le projet commun (PCL):
  45. 45. 46Xamarin.Forms – Montreal Mobile .NET Developers Custom Renderer Étape 3: Implémenter le code du renderer  Dans les projets pour chaque plateforme
  46. 46. 47Xamarin.Forms – Montreal Mobile .NET Developers Étape 4: Exporter le renderer  Dans les projets pour chaque plateforme: Custom Renderer
  47. 47. 48Xamarin.Forms – Montreal Mobile .NET Developers Extensibilité Dependency Service Partager les fonctionnalités spécifiques aux plateformes à l’aide d’interfaces.
  48. 48. 49Xamarin.Forms – Montreal Mobile .NET Developers Dependency Service Étape 1: Créer une interface  Dans le projet commun (PCL):
  49. 49. 50Xamarin.Forms – Montreal Mobile .NET Developers Dependency Service Étape 2: Implémenter le code spécifique  Dans les projets pour chaque plateforme:
  50. 50. 51Xamarin.Forms – Montreal Mobile .NET Developers Dependency Service Étape 3: Exposer le service  Dans les projets pour chaque plateforme:
  51. 51. 52Xamarin.Forms – Montreal Mobile .NET Developers Dependency Service Étape 4: Utiliser depuis le code commun  Dans le projet commun (PCL):
  52. 52. DEMONSTRATION Synthétiseur vocal
  53. 53. 54Xamarin.Forms – Montreal Mobile .NET Developers Animations  API d’animation multi-plateforme  Asynchrone (async/await)
  54. 54. www.github.com/JamesMontemagno/FormsAnimations
  55. 55. 57Xamarin.Forms – Montreal Mobile .NET Developers Messaging Center  MessagingCenter.Subscribe<T>(object subscriber, string message, Action<T> callback);  MessagingCenter.Send(T item, string message);
  56. 56. 58Xamarin.Forms – Montreal Mobile .NET Developers Messaging Center Page maître: Page détails:
  57. 57. 59Xamarin.Forms – Montreal Mobile .NET Developers 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
  58. 58. 60Xamarin.Forms – Montreal Mobile .NET Developers

×