Les outils de développements
Ç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).
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).
On arrive sur une nouvelle page où nous allons enfin pouvoir passer en français (voir la figure suivante).
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).
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).
L’installation est plutôt classique et commence par l’acceptation du contrat de licence (voir la figure suivante).
Pour le SDK 7.1, il y a un écran supplémentaire pour choisir d’installer les outils maintenant (voir la figure suivante).
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.
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).
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).
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).
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).
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).
Allez dans le panneau de configuration, programmes, et choisissez d’activer des fonctionnalités Windows (voir la figure suivante).
Puis, installez hyper-V en cochant la case correspondante (voir la figure suivante).
Exécutons donc notre application en appuyant sur F5 qui nous permet de démarrer l’application en utilisant le débogueur.
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).
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
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).
Enfin, vous pouvez fermer l’application en arrêtant le débogueur en cliquant sur le carré (voir la figure suivante).
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 :
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
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 :
<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 :
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.
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).
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.
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.
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).
Blend s’ouvre alors et affiche à nouveau le rendu de notre écran (voir la figure suivante).
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.
Aucun commentaire:
Enregistrer un commentaire