Meetup Microsoft .Net Toulouse Développement Windows 10 ClevLab Aurélien Lemoine & Xavier Giovannacci Lundi 20 mars 2017

Sommaire Développement Windows 10 UWP – Universal Windows Platform VisualStateManager / AdaptiveTrigger Continuum Animations Cortana Ink UWP Community Toolkit par David Catuhe

ClevLab Agence fondée en 2010, spécialisée sur les plateformes mobiles et les technologies Microsoft ClevLab est éditeur de ses propres applications Une dizaine d’applications Windows Phone et Windows 10: FeedLab, Instant TV, … Plus de 2 millions de téléchargements ClevLab est aussi prestataire de services pour accompagner les entreprises sur WP et Windows Cardiweb, Chauffeur-Privé, DigiSchool, Le Point, Les Indés Radios, Microsoft France, Microsoft UK, Orange, S4M, Sanofi, Sen.se, Se Coucher Moins Bête, Société Générale, … Nos applications les plus connues : FeedLab : https://www.microsoft.com/fr-fr/store/apps/feedlab/9wzdncrdkrq3 Instant TV : https://www.microsoft.com/fr-fr/store/p/instant-tv/9wzdncrfj3mv Nos dernières réalisations grand public sur Windows 10 : Le Point : https://www.microsoft.com/fr-fr/store/p/le-pointfr/9wzdncrdgvs5 Les Indés Radios : https://www.microsoft.com/fr-fr/store/p/les-indes-radios/9wzdncrdrc6q

UWP – Universal Windows Platform Développer des applications pour la plateforme Windows universelle (UWP) https://msdn.microsoft.com/fr-fr/library/dn975273.aspx

UWP – Les prérequis pour développer Windows 10 de préférence Egalement faisable sur Windows 8.1 et Windows 7, en testant sur un Windows 10 distant Penser à activer le mode développeur Visual Studio 2015 / 2017 Les langages : C#, Visual Basic, C++ ou Javascript (WinJS) Développer des applications pour la plateforme Windows universelle (UWP) https://msdn.microsoft.com/fr-fr/library/dn975273.aspx

UWP - Bridges Windows Bridges https://developer.microsoft.com/fr-fr/windows/bridges

UWP - Desktop Bridge Encapsuler votre application Win 32 en UWP Installation et mise à jour simplifiées Visibilité et confiance du Windows Store API UWP : live tiles, notifications, Cortana, in-app purchases,… Limitations Pas accès à toutes les API UWP Uniquement pour tablettes / ordinateurs Quelques exemples Evernote, Arduino IDE, Voya Media,… Desktop Bridge https://developer.microsoft.com/fr-fr/windows/bridges/desktop

UWP - Desktop Bridge Desktop Bridge https://developer.microsoft.com/fr-fr/windows/bridges/desktop

UWP – iOS Bridge (Islandwood) Convertir un projet Objective-C en UWP dans Visual Studio Projet open source sur GitHub En bêta depuis 2 ans (version actuelle 0.2.170228) Quelques exemples Candy Crush, Complete Anatomy de 3D4Medical iOS Bridge https://developer.microsoft.com/fr-fr/windows/bridges/ios Complete Anatomy https://blogs.windows.com/buildingapps/2017/03/15/complete-anatomy-award-winning-app-comes-windows-store/

UWP – Applications web hébergées Packager un site web en application UWP API Windows natives à partir du JavaScript exécuté sur votre site web Disponibilité sur l’ensemble des devices Windows 10 Exemple d’une réalisation Amazon https://developer.microsoft.com/fr-fr/windows/bridges/hosted-web-apps

UWP - Porting guidances Mappage de concepts d’applications Windows pour développeurs iOS et Android sur https://docs.microsoft.com Porting guidances https://docs.microsoft.com/fr-fr/windows/uwp/porting/android-ios-uwp-map

UWP - Déploiement Package APPX Application grand public (B2C) Application sandboxée Installation simplifiée via App Installer depuis Windows 10 Anniversary 1607 Application grand public (B2C) Windows Store Application entreprise (B2B ou B2E) Windows Store for Business Diffusion manuelle de l’APPX et de son certificat

UWP – Design & UI Windows 8 avait de fortes guidelines Contenu très horizontal Pas de burger menu Des marges recommandées très importantes

UWP – Design & UI Adapter son contenu aux différents devices Windows 10 Mobile, tablette, desktop, Xbox One Tactile, clavier, souris, voix, manette, Surface Dial, …. Windows 10 – Design and UI https://developer.microsoft.com/en-us/windows/apps/design

VisualStateManager / AdaptiveTrigger Windows 10 -> application universelles != Windows 8 Windows 8 -> création d’une solution - un projet shared - deux projets Windows et Phone => donc deux fichiers XAML pour gérer les vues pour chaque device Windows 10 -> création d’une solution - un seul et unique projet qui gère toutes les configurations UI => AdaptiveTrigger pour fournir des interfaces en fonction de la résolution. Combo gagnant pour une interface responsive !

AdaptiveTrigger Utilisé en XAML pour créer des états visuels dans le VisualStateManger Pas besoin de code C# Gérer automatiquement Déterminé par la taille de la fenêtre Largeur ou Hauteur Modifier des éléments Couleur d’arrière-plan Taille d’un élément Position d’un élément etc.. - AdaptiveTrigger déclencheur utilisable par le VisualStateManager de XAML. créer des états visuels dans le VisualStateManager dépendent de la taille d’écran (largeur ou hauteur) activé automatiquement sans besoin d’aucun code C# pour cela => plusieurs configurations d’écran en un seul fichier PS : voir Blend pour manipuler le visualStateManager

Démo - Voir projet démo - Voir FeedLab AdaptiveTrigger

Continuum Une expérience de PC, grâce à votre téléphone

Démo Démo de FeedLab avec le dock Continuum Continuum

Animations Windows.UI.Composition, la performance ! - Avec Windows 10, les applications sont plus vivantes et interactives, - Nouveau compositeur unifié et un moteur de rendu pour toutes les applications Windows, que ce soit sur le bureau ou sur mobile. => l’API « Windows.UI.Composition » qui offre l'accès à de nouveaux objets de composition légers ainsi que de nouvelles animations et effets animés par Compositor. Windows.UI.Composition, la performance !

Windows.UI.Composition Petit schéma Windows.UI.Composition permet d’utiliser le C# pour réaliser un travail dans la couche de composition au lieu d’utiliser DirectX et C++ pour créer des animations. Cette technique permet d’animer un élément à l’aide de l’API de composition ou d’enrichir une interface utilisateur en créant une « Visual Layer» contenu dans l’arborescence d’éléments XAML.

Pourquoi utiliser des animations de composition ? Storyboard Windows.UI.Composition Code exécuté sur le thread utilisateur Risque que les animations ne se jouent pas Animations simples Transition, rotation, … Thread indépendant 60 FPS Animations fluides Animations complexes mais facilitées Création de modèles Création de modèles - Utiliser une animation sur plusieurs objets sans avoir à créer des animations distinctes. => Utiliser une même animation

Démo Animations - Exemple avec le projet Démo - FeedLab avec le pulltorefresh Animations

Cortana Cortana est fortement intégrée dans Windows 10 Permet d’interagir avec les applications via des commandes vocales S’intègre facilement à une application UWP Fichier VoiceCommands.xml pour définir la grammaire StorageFile storageFile = await Package.Current.InstalledLocation.GetFileAsync(@"VoiceCommands.xml"); await VoiceCommandDefinitionManager. InstallCommandDefinitionsFromStorageFileAsync(storageFile); Cortana voice commands https://docs.microsoft.com/en-us/cortana/vcd

Démo FeedLab + Code Cortana

Ink Révélez votre créativité ! Créer une zone de dessin Optimiser la saisie au stylet. Fonctionnalité mise en avant par Microsoft avec la gamme Surface. Révélez votre créativité !

Vue d’ensemble d’Ink Notes manuscrites, dessins, annotations Capturer la position et les mouvements du stylet Suivi des niveaux de pression Sauvegarder des données de saisie Reconnaissance de l’écriture Exemple d’application : Carte Photo

Démo Demo exemple meetup Ink

Roadmap UWP Windows Platform features https://developer.microsoft.com/en-us/windows/platform/features

Des questions ?