• Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 29/04/2014

Les outils de développements

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Ça a l’air super ça, de pouvoir développer des applications pour les téléphones ! C’est très à la mode et ces mini-ordinateurs nous réservent plein de surprises. Voyons donc ce qu’il nous faut pour nous lancer dans le monde merveilleux du développement pour Windows Phone.

Nous allons apprendre à développer pour Windows Phone équipés de la version 8, qui est la dernière version à l’heure où j’écris ces lignes. Vous serez également capables de créer des applications pour Windows Phone 7.5 et 7.8. Même si la version 8 semble très alléchante, les versions 7 ne sont pas à oublier trop rapidement. En effet, tous les utilisateurs n’ont pas encore acheté de Windows Phone 8 et seraient sûrement déçus de manquer votre application révolutionnaire. De plus, Windows Phone 8 sera également capable de faire tourner des applications 7.X. Un marché à ne pas oublier…

Prérequis

Avant toute chose, je vais vous donner les éléments qui vont vous permettre de choisir entre l’environnement de développement dédié au développement d’applications pour Windows Phone 7.5 et celui dédié au développement d’applications pour Windows Phone 7.5 et 8.

Pourquoi choisir entre un environnement qui fait tout et un environnement qui ne fait que la moitié des choses ?

Bonne question… ! En effet, qui peut le plus peut bien sûr le moins. Mais bien que les environnements de développement soient gratuits, vous n’allez peut-être pas avoir envie de changer de machine de développement pour autant.

Voici le matériel requis pour développer pour Windows Phone 7.5 :

  • La première chose est de posséder Windows Vista SP2, ou bien Windows 7 ou encore Windows 8, qui sont les seules configurations supportées permettant de développer pour Windows Phone 7.5.

  • Il est également grandement conseillé de posséder une carte graphique compatible avec DirectX 10 afin de pouvoir utiliser correctement l’émulateur. Je reviendrai plus tard sur ce qu’est l’émulateur.

La plupart des PC est aujourd’hui équipée de cette configuration. Ce qui est très pratique pour se lancer et découvrir le développement pour Windows Phone. Par contre, pour pouvoir développer pour Windows Phone 8, c’est un peu plus délicat :

  • Il vous faut avant tout Windows 8 en version 64 bits, rien d’autre. La version conseillée est d’ailleurs la version PRO ou la version Entreprise qui vont permettre d’utiliser l’émulateur.

  • Pour faire tourner l’émulateur, il faut que votre processeur supporte la technologie SLAT (qui permet de faire de la virtualisation) et qu'elle soit activée dans le bios ; ce qui est le cas généralement des PC récent (à partir de 2011). Il faut également installer le système de virtualisation de Microsoft, Hyper-V, qui est disponible avec les versions PRO ou Entreprise de Windows 8. Si vous n’êtes pas certain que votre processeur supporte cette technologie, vous pouvez le vérifier avec cette procédure (en anglais) – ou alors, tentez l’installation et il vous dira une fois que tout est fini s’il y a un problème ou pas.

  • Il vous faut aussi une bonne une carte graphique compatible avec DirectX 10 ainsi que 4 Go de mémoire.

Ces contraintes matérielles peuvent rendre difficile d’accès le développement pour Windows Phone 8 à quelqu’un qui souhaite simplement s’initier ou découvrir cette technologie. Si c’est votre cas et que vous ne possédez pas ce matériel, alors je vous conseille d’installer l’environnement de développement pour Windows Phone 7.5, qui vous permettra de suivre 95% du cours. J’indiquerai au cours de ce cours ce qui est réservé exclusivement à Windows Phone 8. Sinon, si votre matériel le permet, installez sans hésiter ce qu’il faut pour développer pour Windows Phone 8.

Ces éléments expliqués, voici la suite des prérequis :

  • Bien sûr, vous aurez intérêt à posséder un smartphone équipé de Windows Phone : il est primordial de tester son application sur un téléphone avant de songer à la rendre disponible sur le Windows Phone Store.

  • Enfin le dernier prérequis est de savoir parler le C#.

Pour résumer ce qu’est le C#, il s’agit d’un langage orienté objet apparu en même temps que le framework .NET qui n’a cessé d’évoluer depuis 2001. Il permet d’utiliser les briques du framework .NET pour réaliser des applications de toutes sortes et notamment des applications pour Windows Phone. C’est le ciment et les outils qui permettent d’assembler les briques de nos applications.

Installer Visual Studio Express pour Windows Phone

Puisqu’on est partis dans le bâtiment, il nous faut un chef de chantier qui va nous permettre d’orchestrer nos développements. C’est ce qu’on appelle l’IDE, pour Integrated Development Environment, ce qui signifie « Environnement de développement intégré ». Cet outil de développement est un logiciel qui va nous permettre de créer des applications et qui va nous fournir les outils pour orchestrer nos développements. La gamme de Microsoft est riche en outils professionnels de qualité pour le développement, notamment grâce à Visual Studio.

Pour apprendre et commencer à découvrir l'environnement de développement, Microsoft propose gratuitement Visual Studio dans sa version express. C’est une version allégée de l’environnement de développement qui permet de faire plein de choses, mais avec moins d'outils que dans les versions payantes. Rassurez-vous, ces versions gratuites sont très fournies et permettent de faire tout ce dont on a besoin pour apprendre à développer sur Windows Phone et suivre ce cours !

Pour réaliser des applications d'envergure, il pourra cependant être judicieux d'investir dans l'outil complet et ainsi bénéficier de fonctionnalités complémentaires qui permettent d'améliorer, de faciliter et d'industrialiser les développements.

Pour développer pour Windows Phone gratuitement, nous allons avoir besoin de Microsoft Visual Studio Express pour Windows Phone. Pour le télécharger, rendez-vous sur http://dev.windowsphone.com. Il est important de noter que les images de ce site changent régulièrement, donc ne vous étonnez pas si celles que vous trouvez en ligne diffèrent légèrement de celles que je vais maintenant vous présenter !

Attention, le site est en anglais, mais ne vous inquiétez pas, je vais vous guider. Cliquez ensuite sur Get SDK qui va nous permettre de télécharger les outils gratuits (voir la figure suivante).

Obtenir le SDK depuis la page d'accueil du dev center
Obtenir le SDK depuis la page d'accueil du dev center

On arrive sur une nouvelle page où il est indiqué que l’on doit télécharger le « Windows Phone SDK ». SDK signifie Software Development Kit que l’on peut traduire par : Kit de développement logiciel. Ce sont tous les outils dont on va avoir besoin pour développer dans une technologie particulière, ici en l’occurrence pour Windows Phone.

On nous propose de télécharger soit la version 8.0 du SDK qui va nous permettre de développer pour Windows Phone 7.5 et 8.0, soit la version 7.1 du SDK qui nous permettra de développer uniquement pour Windows Phone 7.5. La version 7.11 du SDK est une mise à jour de la version 7.1 permettant de développer sous Windows 8. Téléchargez la version qui vous convient en cliquant sur le bouton Download correspondant (voir la figure suivante).

Télécharger le SDK
Télécharger le SDK

On arrive sur une nouvelle page où nous allons enfin pouvoir passer en français (voir la figure suivante).

Obtenir le SDK en français
Obtenir le SDK en français

Une nouvelle page se charge et nous allons pouvoir télécharger l’installeur qui va nous installer tout ce qu'il nous faut. Comme sa taille le suggère, il ne s’agit que d’un petit exécutable qui aura besoin de se connecter à internet pour télécharger tout ce dont il a besoin (voir la figure suivante).

Télécharger l'installeur
Télécharger l'installeur

Donc, démarrez le téléchargement et enchaînez tout de suite sur l’installation, tant que vous êtes connectés à internet (voir la figure suivante).

Logo du SDK pour Windows Phone 8
Logo du SDK pour Windows Phone 8

L’installation est plutôt classique et commence par l’acceptation du contrat de licence (voir la figure suivante).

L'acceptation du contrat de licence pour le SDK 7.1
L'acceptation du contrat de licence pour le SDK 7.1
L'acceptation du contrat de licence pour le SDK 8.0
L'acceptation du contrat de licence pour le SDK 8.0

Pour le SDK 7.1, il y a un écran supplémentaire pour choisir d’installer les outils maintenant (voir la figure suivante).

Insaller les outils avec le SDK 7.1
Insaller les outils avec le SDK 7.1

L’installation est globalement plutôt longue, surtout sur un PC fraichement installé. J’espère que vous réussirez à contenir votre impatience !
Enfin, nous arrivons à la fin de l’installation et vous pouvez démarrer Visual Studio.

Vous pouvez également démarrer Visual Studio Express pour Windows Phone à partir du Menu Démarrer. Si vous possédez une version payante de Visual Studio, vous pouvez à présent le lancer.

À son ouverture, vous pouvez constater que nous arrivons sur la page de démarrage (voir la figure suivante).

Page de démarrage de Visual Studio permettant de créer un nouveau projet
Page de démarrage de Visual Studio permettant de créer un nouveau projet

Nous allons donc créer un nouveau projet en cliquant sur le lien (comme indiqué sur la capture d'écran), ou plus classiquement par le menu Fichier > Nouveau projet.

À ce moment-là, Visual Studio Express 2012 pour Windows Phone (que j’appellerai désormais Visual Studio pour économiser mes doigts et les touches de mon clavier) nous ouvre sa page de choix du modèle du projet (voir la figure suivante).

Modèle de projet pour créer une application Windows Phone
Modèle de projet pour créer une application Windows Phone

Nous allons choisir de créer une Application Windows Phone, qui est la version la plus basique du projet permettant de réaliser une application pour Windows Phone avec le XAML. Remarquons que le choix du langage est possible entre Visual Basic, Visual C++ et Visual C#. Nous choisissons évidemment le C# car c’est le langage que nous maîtrisons. J’en profite pour nommer mon projet « HelloWorld »… (ici, personne ne se doute quel type d’application nous allons faire très bientôt).

Enfin, après avoir validé la création du projet, il nous demande la version à cibler (voir la figure suivante).

Choix de la version du SDK à utiliser
Choix de la version du SDK à utiliser

Choisissez « 8.0 » pour développer pour Windows Phone 8 ou 7.1 pour développer pour Windows Phone 7.5. Rappelez-vous qu’une application 7.5 sera exécutable sur les téléphones équipés de Windows Phone 8 (c’est l’avantage) mais ne pourra pas utiliser les nouveautés de Windows Phone 8 (c’est l’inconvénient).

Visual Studio génère son projet, les fichiers qui le composent et s’ouvre sur la page suivante (voir la figure suivante).

L'interface de Visual Studio, ainsi que la liste déroulante permettant de choisir l'émulateur
L'interface de Visual Studio, ainsi que la liste déroulante permettant de choisir l'émulateur

Nous allons revenir sur cet écran très bientôt. Ce qu’il est important de remarquer c’est que si nous démarrons l’application telle quelle, elle va se compiler et s’exécuter dans l’émulateur Windows Phone. Vous le voyez dans le petit encadré en haut de Visual Studio, c’est la cible du déploiement. Il est possible de déployer soit sur l’émulateur, soit directement sur un téléphone relié au poste de travail. Il ne reste plus qu’à réellement exécuter notre application…

L’émulateur

Attention, si vous avez installé le SDK 8.0, vous allez avoir besoin également d’installer le logiciel gestion de la virtualisation : Hyper-v. Celui-ci n’est disponible qu’avec les versions PRO ou Entreprise de Windows 8 et uniquement si votre processeur supporte la technologie SLAT.
Allez dans le panneau de configuration, programmes, et choisissez d’activer des fonctionnalités Windows (voir la figure suivante).

Panneau de configuration pour permettre l'installation d'Hyper-V
Panneau de configuration pour permettre l'installation d'Hyper-V

Puis, installez hyper-V en cochant la case correspondante (voir la figure suivante).

Cocher pour installer Hyper-V
Cocher pour installer Hyper-V

Exécutons donc notre application en appuyant sur F5 qui nous permet de démarrer l’application en utilisant le débogueur.

Démarrage de l'émulateur avec élévation de privilège
Démarrage de l'émulateur avec élévation de privilège

Nous constatons que l’émulateur se lance, il ressemble à un téléphone Windows Phone… On les reconnait d’un coup d’œil car ils ont les trois boutons en bas du téléphone, la flèche (ou retour arrière), le bouton d’accès au menu et la loupe pour faire des recherches (voir la figure suivante).

Emulateur Windows Phone 8
Emulateur Windows Phone 8

L’émulateur possède également des boutons en haut à droite qui permettent (de haut en bas) de :

  • Fermer l’émulateur

  • Minimiser l’émulateur

  • Faire pivoter de 90° vers la gauche l’émulateur

  • Faire pivoter de 90° vers la droite l’émulateur

  • Adapter à la résolution

  • Zoomer/dézoomer sur l’émulateur

  • Ouvrir les outils supplémentaires

Boutons permettant de faire des actions sur l'émulateur
Boutons permettant de faire des actions sur l'émulateur

Remarquons également que des chiffres s’affichent sur le côté droit de l’émulateur. Ce sont des informations sur les performances de l’application, nous y reviendrons en fin de cours.
Enfin, vous pouvez fermer l’application en arrêtant le débogueur en cliquant sur le carré (voir la figure suivante).

Bouton pour arrêter le débogage dans Visual Studio
Bouton pour arrêter le débogage dans Visual Studio

XAML et code behind

Revenons un peu sur cette page que nous a affiché Visual Studio. Nous pouvons voir que le milieu ressemble à l’émulateur et que le côté droit ressemble à un fichier XML.
Vous ne connaissez pas les fichiers XML ? Si vous voulez en savoir plus, n’hésitez pas à faire un petit tour sur internet, c’est un format très utilisé dans l’informatique !
Pour faire court, le fichier XML est un langage de balise, un peu comme le HTML, où l’on décrit de l’information. Les balises sont des valeurs entourées de < et > qui décrivent la sémantique de la donnée. Par exemple :

<prenom>Nicolas</prenom>

La balise <prenom> est ce qu’on appelle une balise ouvrante, cela signifie que ce qui se trouve après (en l’occurrence la chaine « Nicolas ») fait partie de cette balise jusqu’à ce que l’on rencontre la balise fermante </prenom> qui est comme la balise ouvrante à l’exception du / précédant le nom de la balise.
Le XML est un fichier facile à lire par nous autres humains. On en déduit assez facilement que le fichier contient la chaine « Nicolas » et qu’il s’agit sémantiquement d’un prénom.
Une balise peut contenir des attributs permettant de donner des informations sur la donnée. Les attributs sont entourés de guillemets " et " et font partis de la balise. Par exemple :

<client nom="Nicolas" age="30"></client>

Ici, la balise client possède un attribut « nom » ayant la valeur « Nicolas » et un attribut « age » ayant la valeur « 30 ». Encore une fois, c’est très facile à lire pour un humain.
Il est possible que la balise n’ait pas de valeur, comme c’est le cas dans l’exemple ci-dessus. On peut dans ce cas-là remplacer la balise ouvrante et la balise fermante par cet équivalent :

<client nom="Nicolas" age="30"/>

Enfin, et nous allons terminer notre aperçu rapide du XML avec un dernier point. Il est important de noter que le XML peut imbriquer ses balises et qu’il ne peut posséder qu’un seul élément racine, ce qui nous permet d’avoir une hiérarchie de données. Par exemple nous pourrons avoir :

<listesDesClient>
  <client type="Particulier">
    <nom>Nicolas</nom>
    <age>30</age>
  </client>
  <client type="Professionel">
    <nom>Jérémie</nom>
    <age>40</age>
  </client>
</listesDesClient>

On voit tout de suite que le fichier décrit une liste de deux clients. Nous en avons un qui est un particulier, qui s’appelle Nicolas et qui a 30 ans alors que l’autre est un professionnel, prénommé Jérémie et qui a 40 ans.

À quoi cela nous sert-il ? À comprendre ce fameux fichier de droite. C’est le fichier XAML (prononcez « Zammel »). Le XAML est un langage qui permet de décrire des interfaces et en l’occurrence ici le code XAML (à droite dans Visual Studio) décrit l’interface que nous retrouvons au milieu. Cette zone est la prévisualisation du rendu du code écrit dans la partie droite. On appelle la zone du milieu, le concepteur (ou plus souvent le designer en anglais).
En fait, le fichier XAML contient des balises qui décrivent ce qui doit s’afficher sur l’écran du téléphone. Nous allons y revenir.

Nous allons donc devoir apprendre un nouveau langage pour pouvoir créer des applications sur Windows Phone : le XAML. Ne vous inquiétez pas, il est assez facile à apprendre et des outils vont nous permettre de simplifier notre apprentissage.

Ok pour le XAML si tu dis que ce n’est pas trop compliqué, mais le C# dans tout ça ?

Eh bien il arrive dans le fichier du même nom que le fichier XAML et il est suffixé par .cs. Nous le retrouvons si nous cliquons sur le petit triangle à côté du fichier XAML qui permet de déplier les fichiers (voir la figure suivante).

Le XAML et son code-behind
Le XAML et son code-behind

Il est juste en dessous, on l’appelle le code behind. Le code behind est le code C# qui est associé à l’écran qui va s’afficher à partir du code XAML. Il permet de gérer toute la logique associée au XAML.
Si vous ouvrez ce fichier C#, vous pouvez voir quelques instructions déjà créées en même temps que le XAML. Nous allons également y revenir.

Blend pour le design

Afin de faciliter la réalisation de jolis écrans à destination du téléphone, nous pouvons modifier le XAML. C'est un point que nous verrons plus en détail un peu plus loin. Il est possible de le modifier directement à la main lorsqu’on connaît la syntaxe, mais nous avons aussi à notre disposition un outil dédié au design qui le fait tout seul : Blend.

Microsoft Expression Blend est un outil professionnel de conception d'interfaces utilisateur de Microsoft. Une version gratuite pour Windows Phone a été installée en même temps que Visual Studio Express 2012 pour Windows Phone et permet de travailler sur le design de nos écrans XAML.
Nous verrons comment il fonctionne mais nous ne nous attarderons pas trop sur son fonctionnement car il mériterait un cours entier.

Ce qui est intéressant c’est qu’il est possible de travailler en même temps sur le même projet dans Visual Studio et dans Blend, les modifications se répercutant de l’un à l’autre. Faisons un clic droit sur le fichier XAML et choisissons de l’ouvrir dans Expression Blend (voir la figure suivante).

Démarrage de Blend depuis Visual Studio
Démarrage de Blend depuis Visual Studio

Blend s’ouvre alors et affiche à nouveau le rendu de notre écran (voir la figure suivante).

Interface de Blend
Interface de Blend

On peut voir également une grosse boîte à outils qui va nous permettre de styler notre application. Nous y reviendrons.

  • Pour développer pour Windows Phone, nous avons besoin de Visual Studio et du kit de développement pour Windows Phone.

  • Il existe une version totalement gratuite de Visual Studio permettant de réaliser des applications sous Windows Phone.

  • Un émulateur accompagne Visual Studio pour tester ses applications en mode développement.

  • Blend est l’outil de design permettant de styler son application, dont une version gratuite est fournie avec le kit de développement pour Windows Phone.

Exemple de certificat de réussite
Exemple de certificat de réussite