Introduction au développement Windows Mobile 7

Mobiletuts + couvrira toutes les principales plates-formes mobiles - iPhone, Windows, Android et Blackberry. Aujourd'hui, nous allons examiner le développement de Windows Phone 7. Windows Phone 7 est le dernier système d'exploitation mobile de Microsoft. C’est une rupture nette avec les anciens systèmes d’exploitation Windows Mobile, tels que WinMo 6.5, et offre aux développeurs .NET une chance de prendre part à l’explosion de l’application mobile survenue au cours des dernières années. Ce didacticiel présente la plate-forme Windows Phone 7, vous explique comment installer le kit de développement logiciel (SDK) et vous explique le code fondamental nécessaire pour créer une application simple..

A propos de la plateforme

Le développement de Windows Mobile 7 est réalisé à l'aide du framework .NET. Le framework .NET est un framework logiciel créé par Microsoft pour créer des applications Windows. Les programmeurs écrivent des applications à l'aide de l'un des langages pris en charge par le framework .NET, tels que C #, puis s'exécutent dans un environnement d'exécution appelé Common Language Runtime. Pour Windows Phone 7, vous pouvez adopter deux approches de développement distinctes lors de la création de votre application..

La première approche consiste à utiliser Silverlight pour Windows Phone. Silverlight a été initialement conçu comme un moyen pour les développeurs de créer des applications Internet riches. Le marché a beaucoup adopté ces dernières années, principalement en raison du fait que Netflix utilise Silverlight pour diffuser des vidéos et que NBC l’a utilisé pour sa retransmission en ligne des Jeux Olympiques. Une application Silverlight combine un balisage déclaratif (appelé XAML) pour construire l’interface utilisateur et un code écrit dans un langage .NET afin de contrôler le comportement d’une application. Si vous développez une application axée sur les données pour Windows Phone 7, vous devriez probablement utiliser Silverlight..

Vous pouvez également utiliser le framework XNA pour développer votre application Windows Phone 7. XNA est la structure de développement de jeux de Microsoft utilisée depuis quelques années pour créer des applications Windows et Xbox 360. Si vous créez un jeu pour Windows Phone 7, vous utiliserez probablement le framework XNA. Le framework XNA est assez puissant, mais ce pouvoir s'accompagne d'une courbe d'apprentissage considérable et de cycles de développement plus longs..

Mise en place

Commençons par nous assurer que votre environnement de développement est correctement configuré. Vous devez exécuter Windows Vista ou Windows 7 et disposer d’une carte graphique compatible DirectX 10 sur votre ordinateur. Après avoir vérifié que vous remplissez ces conditions, rendez-vous sur http://bit.ly/9FXxQC pour télécharger les outils de développement..

Faites défiler jusqu'au bas de la page et téléchargez le fichier nommé VM_BOOT \ vm_web.exe. Une fois le fichier téléchargé, double-cliquez dessus pour installer le package complet des outils de développement Windows Phone. Le forfait comprend:

  • Visual Studio 2010 Express pour Windows Phone
  • Windows Phone Emulator
  • Silverlight pour Windows Phone
  • XNA 4.0 Game Studio

Votre ordinateur va probablement redémarrer au moins une fois pendant l’installation des outils. Une fois que vous avez installé les outils de développement sur votre système, vous êtes prêt à commencer..

Ouverture de Visual Studio

L'application que vous allez créer dans ce tutoriel est simple. Il affiche un simple bouton sur lequel vous pouvez appuyer. Lorsque vous appuyez dessus, le bouton tourne autour de l'interface du téléphone. Nous allons développer cette application en utilisant Silverlight pour Windows Phone. Cela devrait prendre moins de 10 minutes pour créer.

Pour commencer, ouvrez Microsoft Visual Studio 2010 Express pour Windows Phone. Le moyen le plus simple de le trouver est d’ouvrir le menu Démarrer et de commencer à taper «Visual Studio». L’application doit apparaître dans la liste des résultats de la recherche, de la même manière que:

Cliquez sur l'élément Visual Studio 2010 pour ouvrir l'environnement de développement. Si vous ouvrez l'application pour la première fois, le démarrage peut prendre quelques minutes, car Visual Studio initialisera certains paramètres à votre place..

Créer votre projet

Lorsque vous ouvrez Visual Studio, vous serez accueilli avec la page de démarrage de l'application. Cette page contient beaucoup de contenu, notamment des astuces de développement, des actualités récentes et des actions liées au projet. Il est parfois utile de parcourir le contenu ici pour en savoir plus sur la plate-forme, mais pour l'instant, cliquez simplement sur le lien «Nouveau projet…» dans la barre latérale gauche..

Une boîte de dialogue apparaîtra pour vous guider dans la création de votre nouveau projet. Assurez-vous que l'élément “Windows Phone Application” est sélectionné comme modèle de projet. Ensuite, donnez un nom à votre projet. Pour ce didacticiel, je vous recommande d'appeler votre projet «Rotating_Button». Enfin, vérifiez que la case «Créer un répertoire pour la solution» est cochée. Cela aide à organiser vos efforts de développement. Vos paramètres doivent correspondre aux miens:

Cliquez sur «OK» pour créer votre nouveau projet..

Navigation dans l'éditeur d'interface utilisateur

Le modèle que vous avez sélectionné vous fournit une application totalement opérationnelle. Pour le voir en action, appuyez simplement sur CTRL + F5 pour compiler l'application et lancez-la dans Windows Phone Emulator. L'émulateur démarre avec une seule page contenant un titre d'application et un titre de page..

Cette interface utilisateur par défaut ne convient tout simplement pas à notre application, alors apportons quelques modifications. Lors de la création du projet, Visual Studio aurait dû ouvrir le fichier MainPage.xaml à modifier. Sinon, double-cliquez sur le nom du fichier dans l'explorateur de solutions pour l'ouvrir..

Vous devriez voir une vue partagée. Sur un côté de l'environnement de développement, vous pouvez voir à quoi ressemblera le fichier actuel lors de l'exécution de votre application. C'est le mode conception. De l'autre côté, vous avez le balisage XAML qui déclare à quoi votre interface devrait ressembler. Toutes les modifications que vous apportez d'un côté seront représentées de l'autre. Ceci est similaire à un éditeur HTML WYSIWYG tel que Dreamweaver.

La première chose à faire est de supprimer tout ce qui se trouve à l'intérieur de la grille de mise en page afin de pouvoir fournir notre propre balisage. Vous devriez voir une balise de grille nommée LayoutRoot. Supprimer tout dans cette balise. Vous allez vous retrouver avec le code suivant:

 

La vue en mode conception doit afficher un écran vide à ce stade..

Création de la disposition de votre application

Vous devez maintenant ajouter l'interface utilisateur pour votre application. Notre application consiste en un seul bouton qui tournera autour d'une grille. La grille est 2 × 2, alors allons-y et déclarons que la grille de mise en page doit avoir deux lignes et deux colonnes. Modifiez le marquage de votre grille de présentation comme suit:

         

Ajout du bouton

Une fois que vous avez défini votre grille de présentation, il est temps de créer le bouton qui sera exploité par vos utilisateurs. Vous voulez que le bouton commence dans la zone supérieure gauche de la grille, vous déclarerez donc qu'il va dans la rangée 0 et la colonne 0.

En XAML, vous indiquez à un élément de se placer dans une grille en le déclarant, puis en lui affectant les index de ligne et de colonne appropriés. À l'intérieur de votre grille de présentation, ajoutez un bouton à l'aide du balisage suivant:

Ce balisage indique que le bouton doit se positionner dans la colonne et la ligne 0, qu'il doit s'étendre horizontalement et verticalement dans la cellule de grille qu'il occupe et qu'il doit comporter le texte «Tap Me!».

Le code d'interface utilisateur de votre application devrait maintenant ressembler à ceci:

         

À ce stade, vous pouvez lancer votre application et voir que votre interface utilisateur est en place. Comme précédemment, appuyez sur CTRL + F5 pour compiler et lancer votre application dans l'émulateur Windows Phone. Si vous avez tout fait correctement, un bouton de votre émulateur est fermement imbriqué dans le coin supérieur gauche..

Vous pouvez appuyer sur le bouton en cliquant dessus avec votre souris, mais rien ne se passera. Nous y remédierons en ajoutant un code de gestion d'événement..

Ajout de la gestion des événements

Retournez dans Visual Studio et assurez-vous que MainPage.xaml est ouvert en mode conception / code. Vous devez ajouter un attribut de gestion d'événement au bouton que vous avez créé. Modifiez la déclaration du bouton en ajoutant un attribut ManipulationStarted. Assurez-vous que vous permettez à Visual Studio de créer une fonction de gestion des événements pour vous. Votre balisage de bouton devrait maintenant ressembler à ceci:

Maintenant, ouvrez le fichier code derrière pour MainPage.xaml. Il s’appelle MainPage.xaml.cs et vous pouvez le trouver dans l’explorateur de solutions en cliquant sur la flèche en regard de MainPage.xaml..

À l'intérieur de MainPage.xaml.cs, vous verrez le gestionnaire d'événements créé par Visual Studio. Visual Studio l'a probablement nommée Button_ManipulationStarted et, pour les besoins de cette application, cela devrait aller. Changez la déclaration de votre fonction comme suit:

void privé Button_ManipulationStarted (expéditeur d'objet, ManipulationStartedEventArgs e) Button b = expéditeur en tant que Button; int col = Grid.GetColumn (b); int row = Grid.GetRow (b); if (col == rangée) Grid.SetColumn (b, ++ col% 2);  else Grid.SetRow (b, ++ row% 2); 

La première chose que fait cette méthode est de créer une nouvelle variable de type Button et de lui assigner une référence à la variable d'expéditeur. Cela est important car Button dérive de UIElement et les quelques opérations suivantes nécessitent un objet UIElement en tant que paramètre. Ensuite, la méthode obtient l'index de colonne et de ligne actuel à l'aide d'une méthode statique de la classe Grid. Enfin, la méthode utilise un algorithme simple pour déterminer où déplacer le bouton et modifier l'index de ligne ou de colonne, le cas échéant. Vous savez que si les index des lignes et des colonnes sont identiques, la colonne doit être modifiée. Si les index des lignes et des colonnes sont différents, la ligne doit être modifiée. Dans les deux cas, vous utilisez une autre méthode statique de la classe Grid pour définir la ligne ou la colonne du bouton. L'index approprié est déterminé à l'aide de mathématiques simples.

À ce stade, nous en avons terminé avec l'exemple d'application. Appuyez sur CTRL + F5 pour compiler et lancer votre application, puis essayez de cliquer sur votre bouton. Vous le verrez se déplacer dans la grille chaque fois que vous cliquez. Essayez d’utiliser les commandes de l’émulateur pour changer l’orientation du téléphone et vous verrez que l’application s’adapte sans aucun problème..

Apprendre plus

Nous venons de parler du développement de Windows Phone 7 dans ce tutoriel. Bien que vous soyez maintenant familiarisé avec les bases de la création d’une application avec Silverlight, vous voudrez probablement en savoir plus sur le développement de XAML, Silverlight, XNA et Windows Phone 7 en général. Heureusement, il existe déjà plusieurs ressources vers lesquelles vous pouvez vous tourner:

  • Centre de développement Windows Phone
  • Centre de développement XNA
  • Livre Windows Phone 7 de Charles Petzold
  • Démo de Scott Gu's Mix 10 sous Windows Phone 7