[new:30/09/2015]Je vous ai présenté ces jours derniers ce qu’était le développement avec Windows 10 et plus exactement la plateforme UWP. Mais par où commencer pour développer ? …
Le choix XAML/C#
Ce n’est pas moi qui irai vous parler de javaScript ou HTML ni de TypeScript ou encore pire de C++. Mon truc à moi c’est C# et XAML.
Mais depuis le début de .NET et plus encore depuis Windows 8, tout le monde sait que Microsoft qui veut ratisser large pour son Store a largement ouvert ses portes à d’autres combinaisons de langages, aussi bien côté code que UI. Globalement toutes les combinaisons sont acceptables pour faire de bonnes applications puisque techniquement ça a été “prévu pour”.
Si on connait bien JS/CSS/HTML il est vrai que la possibilité d’écrire des applis natives Windows en réutilisant ce savoir fait gagner du temps. Est-ce la meilleure façon d’aborder les choses ? Pourquoi se priver de la puissance de C#, du vectoriel unique au monde de XAML ? Je ne sais pas. Par simple ignorance je suppose. Mais on ne peut pas tout savoir ni les autres ni moi-mêmes alors développez avec ce qui vous fait plaisir, l’essentiel c’est de développer dans la joie !
En ce qui me concerne dans ces colonnes, la joie passe par C# et XAML, Visual Studio et l’extraordinaire Blend. Mais ce n’est que mon choix, vous pouvez faire comme vous préférez !
Bien commencer : le matos
Pour écrire des applications Windows 10 (et UWP) il vous faudra un minimum de choses :
- Windows 10. Même si on peut utiliser des versions antérieures certaines choses ne marcheront pas ou mal. Autant le dire tout de suite pour développer pour la nouvelle plateforme mieux vaut être en Windows 10, le reste est un mensonge.
- Visual Studio 2015 avec Blend. Bien entendu lors de l’installation ne pas oubliez de cocher les “Universal App Development Tools”, sinon il reste possible de les installer à part en allant sur la page du SDK.
Finalement ce n’est pas grand chose, Windows 10 étant en mise à jour gratuite cela simplifie les choses.
Il faut aussi penser à basculer votre PC en mode développement, un peu comme un gros téléphone donc :
Vous obtiendrez plus de détails sur ce mode “développeur” en lisant la documentation “Activer votre appareil pour le développement”. En gros les appareils Windows 8+ et donc Windows 10 sont faits pour bloquer l’installation des applications hors Store, comme sur Android d’ailleurs et lorsqu’on développe en mode UWP forcément on fabrique des applications qui ne sont pas sur le Store. Pour éviter de se faire bloquer il faut donc activer le mode développeur. A noter que cela ne concerne que les applications UWP, si vous faites du WPF cela ne vous concerne pas. Mais ici je vais parler UWP donc c’est important !
Le célèbre Hello World !
L’incontournable…
Ouvrez Visual Studio 2015. Oui c’est beau. C’est à mi-chemin entre le look Blend de la première heure (celle de Silverlight) et le look Metro (qu’il ne faut plus appeler comme ça depuis des années je sais). Ceux qui n’aiment pas les fonds noirs seront donc déçus mais on peut changer les couleurs.
Mais ce n’est pas la beauté qui nous amène ici, donc on fait Fichier / Nouveau / Projet puis dans le dialogue qui s’affiche à gauche, Templates / Visual C# / Windows / Universal, à droite Blank App.
Les habitués le savent, j’utilise toujours les outils de dev en version US mais vous avez le droit d’utiliser la version française !
On choisit donc une application universelle “blank” (vide) en C#. Au passage tout à droite (non capturé sur l’image ci-dessus) il faut décocher la télémétrie cela ne servira pas ici.
On laisse tout par défaut, même le nom de l’application “App1”, c’est ça un Hellow World.
Le nouveau projet est créé. Fermons ce qui a été ouvert automatiquement et ouvrons MainPage.Xaml.
On arrive sur le designer qui affiche une zone rectangulaire allongée en hauteur, un format téléphone par défaut, on sent bien que tout cela, de Windows 10 gratuit à UWP n’a tout de même qu’un seul but : simplifier et forcer un peu la main pour obtenir des apps Windows Phone. Mais après tout c’est de bonne guerre et en plus de tels efforts ont été faits pour que cela ne nous complique pas la vie (UWP = un seule code et une seule UI) qu’on se pliera au jeu de bonne grâce.
Comme toujours dans un projet “Blank” la page XAML principale ne contient rien d’autre qu’une grille.
Ajoutons un champ de saisie, un bouton et une zone de texte :
Comme le montre le code XAML j’ai placé un StackPanel vertical dans lequel j’ai mis une TextBox, un Button et un TextBlock, chacun étant centré horizontalement.
A noter que bien que le mode par défaut de l’affichage soit celui d’un smartphone 5”, il est tout à fait possible à tout moment de switcher d’un style d’affichage à un autre :
Cliquez sur la petite flèche et vous verrez apparaitre toute une liste de form factors différents, UWP oblige, et voir instantanément votre application en mode tablette, PC, etc. C’est forcément très pratique pour visualiser en cours de travail si tout s’adapte bien quelque soit les dimensions et la résolution des cibles.
Vous remarquerez aussi juste à droite de cette zone de sélection le groupe d’icones suivant :
Les deux premiers permettent de passer du mode paysage au mode portrait, l’information qui suit indique qu’on travaille en 1024x640 en pixels effectifs (j’en ai parlé dans ma précédente présentation de UWP, ce sont des pixels virtuels qui permettent de développer sans se soucier de la véritable résolution). Le bouton de réglage permet de basculer dans certains modes propres à la device choisie (ici je suis passé en tablette 8”) comme le mode “haut contraste” par exemple.
Comme il n’est pas le moment d’entrer dans des détails subtils on va oublier MVVM et le reste et juste programmer un gestionnaire pour le clic sur le bouton dans le code-behind. On double-clic sur le bouton et le gestionnaire est créé.. On va juste créer le texte à afficher en concaténant le prénom tapé et un petit bonjour classique :
Rien d’extraordinaire, un Hello Word dans toute sa splendeur donc !
Sous Windows 10 il n’y a rien de plus à faire, on tape F5 et le programme se lance…
Ayant choisi un format tablette 8” en mode paysage je vous fait grâce de tout l’espace vide sous la partie utile…
Vous remarquerez pas mal de petites choses intéressantes comme les informations de débogue en surimpression à gauche, et si vous regardez VS 2015 vous verrez des graphiques se fabriquer (la télémétrie, les traces…).
On en rediscutera car VS devient une vraie tour de contrôle bourrée d’outils pour la mise au point des logiciels.
D’ailleurs quand on exécute par F5 cela utile les valeurs par défaut pour le contexte mais on peut bien entendu choisir celui-ci :
Ici on voit que par défaut c’est “local machine” qui est utilisée pour le débogue. On pourrait utiliser une machine distante, un émulateur etc…
Conclusion
je vais m’arrêter là pour un simple Hello Word qui était le prétexte de vous présenter un peu VS 2015 et quelques unes de ses options ainsi que les liens de téléchargement indispensables.
On verra beaucoup plus de choses en détail plus tard.
Stay Tuned !