Xamarin.Forms [french]

1 300 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 300
Sur SlideShare
0
Issues des intégrations
0
Intégrations
116
Actions
Partages
0
Téléchargements
46
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

×