Windows Phone 7 Development :Installation et prise en main des outils de développement

Le développement Windows Phone 7 se base sur des technologies éprouvées :Silverlight et XNA ainsi que sur un langage ergonomique et graphique nommé Metro. Créons dans cet article un nouveau premier projet. Cela nous permettra de faire le tour des outils qui permettent le développement d’application Windows Phone 7.

Comme pour toutes les technologies de développement proposées par Microsoft, il est possible de développer pour Windows Phone 7 à l’aide de Visual Studio 2010.Afin de pouvoir utiliser ces outils avec Windows Phone 7, vous devez au préalable installer les outils de développement pour cette plateforme. Ceux-ci sont disponibles sur la page suivante :

http://developer.windowsphone.com/windows-phone-7/[Fig.1].

Fig.1

Une fois les outils installés, vous avez deux possibilités : la première est d’utiliser la version de Visual Studio 2010 Express pour Windows Phone 7 qui vient d’être installée (si vous n’aviez pas d’autre version existante au préalable), la seconde est d’utiliser votre édition de Visual Studio 2010 Premium, Professional ou Ultimate). En plus d’un environnement de développement, les outils développeurs pour Windows Phone 7 installent les éléments suivants sur votre machine :

Le SDK Silverlight pour Windows Phone 7 : ce kit de développement logiciel vous permettra de créer des applications Silverlight pour la plateforme Windows Phone 7

Le XNA Game Studio 4.0 : il s’agit là du SDK vous permettant de développer des applications XNA (jeux vidéo, par exemple) destinées à être exécutées sur un terminal Windows Phone 7

Un ensemble de templates de projets pour Visual Studio 2010 vous permettant de commencer à développer plus rapidement

Un émulateur de terminal Windows Phone 7 vous permettant d’exécuter et déboguer vos applications sans avoir à les déployer continuellement au cours de vos développements. L’émulateur sera détaillé plus bas .

Votre premier projet…

Lancez votre version de Visual Studio 2010. Dans le menu File, choisissez New puis Project…  [Fig.2]

Fig.2

Fig.3

Dans la fenêtre qui s’ouvre, sélectionnez  Silverlight for Windows Phone 7 dans la zone de gauche. Comme vous pouvez le constater, plusieurs modèles de projets sont à votre disposition pour démarrer : [Fig.3]

Windows Phone Application : ce modèle vous permet de créer une application Silverlight classique pour Windows Phone 7

Windows Phone Databound Application : ce modèle vous permet de créer une application Silverlight de type liste pour Windows Phone 7. Il s’agit d’une application dont la première page est composée d’une liste d’éléments permettant à l’utilisateur de naviguer dans l’application en les sélectionnant.

Windows Phone Class Library : ce modèle vous permet de créer une librairie de classe pour  windows Phone 7.Dans la liste de gauche toujours, une autre section, XNA Game Studio 4.0, vous permet d’accéder à d’autres modèles de projets pour Windows Phone 7 .

Windows Phone Game (4.0) : ce modèle de projet vous permet de créer un jeu XNA pour Windows Phone 7.

Windows Phone Game Library : ce modèle de projet vous permet de créer une librairie de classe pour vos jeux XNA pour Windows Phone 7.

Windows Phone Panorama Application : ce modèle permet de construire une application se servant d’un panorama

Windows Phone Pivot Application : ce modèle permet de construire une application se servant d’un pivot.

Pour découvrir les outils de développement présents dans Visual Studio, retournez dans la catégorie  Silverlight for Windows Phone 7 et créez un projet de type Windows Phone Application.

Visual Studio met alors en place toute la structure du projet : [Fig.5]

Fig.5

La liste ci-dessous résume les principaux éléments qui ont été ajoutés à la solution :

• Les  références  Microsoft.Phone et  Microsoft.Phone.Interop sont les références spécifiques du Framework Silverlight pour Windows Phone 7.

• Les  images ApplicationIcon.png, Background.png et SplashScreenImage.jpg représentent respectivement l’icône de l’application, son fond et son écran d’accueil.

• Les fichiers App.xaml et App.xaml.cs représentent le point d’entrée de l’application. C’est également dans celle-ci que vous pourrez gérer les différents éléments du cycle de vie de celle-ci.

• La page MainPage.xaml constitue la page d’accueil de l’application.Comme vous avez pu le constater, le fichier MainPage.xaml est directement ouvert dans Visual Studio 2010 et laisse apparaître un nouveau designer .

Un ensemble de contrôles est également disponible depuis la boîte à outils de Visual Studio 2010 :

Fig.6

[Fig.6]. Comme toujours, il vous suffit de glisser / déposer les contrôles depuis celle-ci vers la surface de design afin que ceux-ci soient ajoutés au code XAML de la page.

Découverte de l’émulateur

Afin de pouvoir développer plus simplement et sans avoir nécessairement un terminal Windows Phone 7 sous la main, Microsoft vous propose un émulateur permettant l’exécution et le debug de vos applications, directement depuis Visual Studio 2010. Pour le lancer il vous suffit d’exécuter l’application que vous avez créée dans la partie précédente en vous rendant dans le menu Debug puis Start Debugging ou encore de presser la touche F5. Patientez pendant le chargement de l’émulateur. Cela peut prendre quelques minutes, selon votre machine. En effet, ce qu’il faut savoir c’est qu’il s’agit ici d’une vraie version de Windows Phone 7 s’exécutant dans une machine virtuelle, permettant ainsi d’exécu-ter les appliecations sur l’OS destiné à les accueillir ! [Fig.7]

fig7

Comme vous pouvez le voir, l’émulateur possède trois boutons :

• Le bouton « back » permettant à l’utilisateur de revenir en arriè-re lorsqu’il navigue dans ses applications.

• Le bouton « start » permettant à l’utilisateur de revenir à l’écran de démarrage de son téléphone.

• Le bouton « search » permettant à l’utilisateur de lancer une recherche à tout moment.

Les autres logiciels du développeur :

Lorsque vous posséderez un terminal Windows Phone 7, vous pourrez également déployer et débugger vos applications directement sur celui-ci. Pour cela, vous devrez avoir installé le  Zune Software qui permet de se connecter à un terminal. Ensuite, il vous suffira de choisir l’entrée Windows Phone 7 Device dans la barre d’outils d’exécution de Visual Studio 2010 et de lancer l’application : [Fig.8]

Fig.8

Si vous souhaitez partager et vendre vos applications sur le Market Place Windows Phone 7, un outil livré avec les outils développeurs Windows Phone 7 vous permet de vous enregistrer comme

développeur Windows Phone 7 auprès de Microsoft. Pour le lancer, ouvrez le menu démarrer et recherchez le logiciel Windows Phone Developer Registration puis lancez-le : [Fig.9]

Fig.9

Si un terminal était connecté à votre machine, vous auriez la possibilité de rentrer votre compte Windows Live et de vous enregistrer comme développeur Windows Phone 7 !

Expression Blend pour Windows Phone

Afin de pouvoir réaliser les interfaces graphiques de ses applications Silverlight, il est possible d’utiliser une version spéciale d’Expression Blend : « Expression Blend for Windows Phone ». [Fig.10]

Fig.10

Il s’agit d’une version « allégée » d’Expression Blend qui ne peut être utilisée qu’avec les projets Windows Phone. Ainsi, il n’est possible de créer que des projets de type Windows Phone. Une fois un projet créé, Expression Blend affiche l’interface graphique que l’on retrouve dans Visual Studio, à savoir une copie d’un téléphone avec une première page déjà développée (de façon simpliste, bien évidemment) .

Dès lors, toutes les techniques de développement et de design que vous avez pu être en mesure d’acquérir lors de vos développements (glisser/déposer, utilisation des assistants, etc.) pourront être réutilisées dans vos développements Silverlight pour Windows Phone. En effet, les outils sont les mêmes donc les techniques utilisées sont également les mêmes ! Parmi les grandes nouveautés communes à Silverlight « classique » et Silverlight pour Windows Phone, on retrouve les Behaviors, ces fameuses classes que vous pouvez utiliser pour ajouter, sans lignes de code (et donc en un rien de temps), des fonctionnalités à votre application (Article prochain !!).

Et l’avantage d’utiliser Expression Blend pour concevoir ses interfaces graphiques, c’est que ces fonctionnalités sont gérées directement ! Ainsi, un simple glisser/déposer d’un Behavior sur un contrôle de celui-ci se retrouve instantanément avec la fonctionnalité correspondante, en un clic de souris !

Si vous voulez concevoir votre application, il vous suffit de faire un ensemble d’opérations bien connues, les fameux « glisser/déposer ». Ainsi, si vous prenez un contrôle qui se situe dans la boîte à outils (par défaut située sur la partie gauche de l’application), il vous suffit de le faire glisser/déposer pour que celui-ci se retrouve dans l’interface graphique de votre application .

Outre le côté « déjà vu » de ce type de technique (c’est en effet ce qu’il est aussi possible de faire avec Visual Studio), l’un des points forts d’Expression Blend est la réutilisation des styles ! Ainsi, on constate que les contrôles que l’on fait glisser/déposer sur l’interface graphique héritent automatiquement du style sur fond noir avec une écriture blanche (style par défaut des applications Windows Phone). Bien sûr, étant donné qu’il s’agit là de Silverlight,cette notion de style peut parfaitement être redéfinie/surchargée, si vous souhaitez la personnaliser (aux couleurs de votre application, etc.).

Une autre des fonctionnalités que l’on apprécie dans les développements Silverlight pour Windows Phone (mais bien entendu aussi disponible pour du Silverlight « classique ») est la possibilité d’utiliser des données en « design-time ». En effet, afin de faciliter la collaboration entre le designer et le développeur (qui, parfois, sont la même et unique personne), Expression Blend offre la possibilité d’afficher des données fictives, qui ne seront présentes que lorsque l’application sera visualisée dans un outil de design tel qu’Expression Blend, Cider (l’éditeur WPF/Silverlight disponible avec Visual Studio).

Vous avez la possibilité de créer une nouvelle source de données fictive à partir de rien ou bien, pour avoir un rendu plus réaliste,créer votre source de données à partir d’une de vos classes ! Chacune des propriétés générées est entièrement personnalisable (type, longueur, etc.) .

Une fois la source de données créée, il suffit de la faire glisser/déposer sur l’interface graphique afin que le DataContext de l’élément cible, en mode design, soit correctement renseigné et permette d’offrir des données en mode design : [Fig.11]

Fig.11

Bonnes pratiques avec Windows Phone 7

Comme beaucoup de nouvelles technologies arrivant sur le marché, Windows Phone offre un très grand nombre de fonctionnalités aux développeurs : manipulations de l’ApplicationBar, prise de photos, gestion de l’Isolated Storage, etc. Cependant, il est toujours bon de se demander comment faire pour avoir à éviter de réinventer la roue lorsque l’on parle de développement d’applications. Fort heureusement, la technologie utilisée pour le développement d’applications Windows Phone est Silverlight. Ainsi, toutes les techniques acquises jusqu’à maintenant(HTML,PHP,JAVA..etc..) sont toujours valables.

Dès lors, l’utilisation de pattern de développement tel que le pattern MVVM (Model View View Model) est toujours d’actualité (si ce n’est plus !). La mise en place de tests unitaires, points très importants d’une application mais souvent négligée par bon nombre de développeurs, est également possible avec Silverlight pour Windows Phone ! Enfin, qui dit exécution de tests unitaires pense bien souvent (mais pas toujours !), à usine de développement logiciel.Qui n’a jamais rêvé d’avoir à sa disposition une chaîne complète d’intégration continue avec :

– Récupération des dernières sources sur le serveur

– Exécution automatique des tests unitaires

– Eventuellement, exécutions automatiques des tests d’interfaces graphiques (cette fonctionnalité n’est pas encore disponible pour Silverlight mais devrait être prochainement mise à disposition)

– Compilation des sources

– Dépôts des binaires sur un répertoire partagé

– Envoi d’un email à un (ou plusieurs) développeurs/testeurs.

Ce scénario, qui peut paraître idéal, est cependant possible avec l’exécution d’applications Silverlight sur Windows Phone. En effet,la grande problématique à l’heure actuelle concerne la version des outils de développement à installer sur le serveur. Fort heureusement, Justin Angel (développeur chez Microsoft Corporation dans l’équipe Silverlight) a posté, sur son blog, un article expliquant comment être en mesure de réaliser de l’intégration continue,pour Windows Phone, sans avoir besoin d’installer le moindre outil sur le serveur ! Pour voir le post en question, c’est ici : http://justi-nangel.net/TFS2010WP7ContinuousIntegration. Ensuite, toutes les techniques de développement que vous aviez acquises pour le moment pourront être réutilisées dans vos projets : l’objectif de Microsoft est de fournir une expérience de développement similaire à ce que les développeurs connaissaient en Windows Forms, ASP.NET, etc.

Conclusion

Microsoft a complété son offre en matière d’outillage pour le développement sur la plateforme Windows Phone 7. Un point d’importance est mis sur la facilité de prise en main de ces outils, faisant ainsi en sorte qu’un développeur ayant l’habitude des technologies clientes telles que WPF ou des technologies RIA telles que Silverlight puisse passer sans difficulté au développement Windows Phone 7. Enfin, la disponibilité d’outils annexes tels que l’émulateur ou encore les outils de déploiement sur périphériques réels  viennent encore faciliter les développements et permettent d’augmenter la productivité des développeurs et designers sans nuire à la qualité du code qu’ils produisent ! Vous connaissez à présent tous les outils qui vous permettront de développer des applications fiables, robustes et pérennes. Il ne vous reste plus qu’à les utiliser !

Bonne chance et bon code !

À propos elmagnif
Ingenior and Graphist

One Response to Windows Phone 7 Development :Installation et prise en main des outils de développement

  1. Lets Begin with the Mbéée Thx… Mbaye

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :