Developpement Windows Phone - partie 1

  • Article

Cet article fait partie d’une série d’articles sur le développement Windows Phone. Il s’agit d’une traduction des articles se trouvant sur la MSDN.

Sommaire

Bien débuter et fondamentaux

Visuels et média

Travailler avec les données

Sondes et autres fonctionnalités spécifiques au téléphone

Bien démarrer (Hello World)

Windows Phone 7 inclut de nombreux outils pour vous aider à développer et publier des applications. Cette introduction vous décriera les outils de développement et comment commencer à développer votre première application pour Windows Phone.

Cette introduction contient les sections suivantes :

Note

Les exemples fournis dans ce guide démarrage s’exécutent dans le navigateur pour simuler le comportement de Silverlight sur Windows Phone. Le comportement réel peut être légèrement différent dans le simulateur Windows Phone que sur le téléphone lui-même.

 

Installer les outils de développement

Vous pouvez télécharger et installer tout ce qui est nécessaire au développement et à la publication d’application Windows Phone. Dans le tableau ci-dessous, sélectionnez la colonne qui vous correspond et cliquez sur les liens proposés pour installer les outils :

Développeur C#

Développeur Visual Basic

Si vous êtes un développeur C #, installer chacun des éléments suivants :

1. Windows Phone Developer Tools

2. Windows Phone Developer Tools January 2011 Update

Si vous êtes un développeur Visual Basic, vous devez disposer de Visual Studio 2010 Professional, Premium ou Intégrale installé pour pouvoir développer pour Windows Phone en Visual Basic. Visual Basic pour Windows Phone n’est pas supporté par Visual Studio 2010 Express pour Windows Phone.

Si vous êtes un développeur Visual Basic, installer chacun des éléments suivants :

1. Windows Phone Developer Tools

2. Windows Phone Developer Tools January 2011 Update

3. Microsoft Visual Basic for Windows Phone Developer Tools - RTW

Créer un nouveau projet

Après avoir installé les outils développeur Windows Phone, le moyen le plus simple de créer votre première application est d'utiliser Visual Studio.

1. Dans le menu Démarrer, lancez Microsoft Visual Studio 2010 Express for Windows Phone.

Dans le menu File, cliquez sur New Project

Cela ouvre la boite de dialogue New Project. Sur le côté gauche de la boite de dialogue se trouvent les différents types de projets. Lorsque vous sélectionnez Silverlight for Windows Phone, la partie centrale de cette boite de dialogue affiche les différents types d’applications que vous pouvez créer

2nvltu2t

3. Sur gauche, sélectionnez Silverlight for Windows Phone.

4. Au centre, sélectionnez Windows Phone Application template.

5. Nommez le projet HelloWorld_Phone and cliquez sur OK.

Un nouveau projet Silverlight for Windows Phone est créé et s’ouvre dans Visual studio.

xyyrn434

Par défaut, Visual Studio est divisé en trois volets. (En fonction de vos paramètres, les volets peuvent avoir l’air différents.) Sur la gauche se trouve le Designer, au milieu se trouve le XAML, et sur la gauche le Solution Explorer.

Dans le Solution Explorer, se trouvent de nombreux fichiers. Les fichiers que vous utiliserez dans ce tutoriel sont MainPage.xaml et MainPage.xaml.cs. MainPage.xaml définit l’interface graphique de votre application. XAML est un langage basé sur le XML et est utilisé pour créer et disposer des éléments graphiques. Pour plus d’information sur le XAML, allez voir la XAML Overview sur MSDN. Si vous dépliez MainPage.xaml, vous verrez un fichier de code-behind en C# nommé MainPage.xaml.cs. Un fichier de code-behind va de pair avec un fichier XAML à travers l’utilisation d’une classe partielle et contient la logique correspondant au contenu du fichier XAML. Pour plus de détails sur les fichiers de code-behind et les classes partielles, allez vois Code-Behind and Partial Classes sur MSDN. Séparer l’interface graphique du code permet de créer des interfaces utilisateur de façon déclarative en utilisant du markup XAML et d’utiliser ensuite un fichier différent de code-behind pour définir la logique d’interaction avec les évènements et de manipulation des objets que vous avez déclarés dans le XAML. Cette séparation simplifie l’interaction des designers et des développeurs, rendant leur collaboration sur un même projet bien plus efficace.

Ajouter un TextBlock

Vous allez ensuite ajouter un simple TextBlock qui affichera le texte "Hello, World!". Il y a plusieurs façons de réaliser cela, mais dans cette section nous utiliserons la Toolbox et la vue Design.

1. Si le fichier MainPage.xaml n’est pas déjà ouvert, double-cliquez sur MainPage.xaml dans le Solution Explorer.

2. Dans le menu View menu, cliquez sur Other Windows, et cliquez ensuite sur Toolbox. Le volet des outils s’affiche alors.

3. Agrandissez ou dockez le volet Toolbox afin que vous puissiez voir la Toolbox et le vue Design du téléphone.

4yfg2ivk

4. De la Toolbox, faites glisser un TextBlock sur l’écran du téléphone.

Remarquez qu’un élément TextBlock a été ajouté dans le contenu du Grid de la vue XAML.

XAML

  1. <!--ContentPanel - place additional content here-->
  2. <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
  3.     <TextBlock Height="30" HorizontalAlignment="Left" Margin="12,6,0,0" Name="textBlock1" Text="TextBlock" VerticalAlignment="Top" />
  4. </Grid>

5. Dans le menu View , cliquez sur Other Windows, et cliquez ensuite sur Properties Window. Le volet des propriétés s’affiche alors.

b5541tvg

6. Dans le vue Design, assurez-vous que le TextBlock est toujours sélectionné.

7. Dans la fenêtre des propriétés, modifiez la valeur de la propriété Text pour mettre Hello, World! .

8. Modifiez la propriété FontSize pour mettre 50.

9. Indiquez un Height de 70.

La vue Design doit se mettre à jour et doit maintenant ressembler à ceci :

qfb5bsx5

Exécuter votre première application

Maintenant que vous avez créé votre première application Silverlight pour Windows Phone, vous avez besoin de l’exécuter. Vous utiliserez l’émulateur Windows Phone intégré, qui simule un téléphone Windows Phone. En utilisant l’émulateur Windows Phone vous pouvez tester et déboguer votre application très rapidement sans avoir à déployer l’application sur un vrai téléphone.

Pour démarrer l’émulateur, vous avez juste besoin de démarrer votre application en debug. Visual Studio lancera l’émulateur et chargera votre application dans ce dernier.

1. Pour démarrer l’application en debug, appuyer sur la touche F5 ou Debug->Start Debugging.

Si des erreurs apparaissent lors de la compilation de votre application Visual Studio vous affichera leurs détails. Après quelques instants, une fenêtre d’émulateur, comme l’image ci-dessous, doit apparaitre :

z400g03b

Au premier lancement, l’émulateur prend quelques instants pour commencer le débogage. Pour accélérer les prochaines phases de débogage, ne fermez pas la fenêtre de l’émulateur. A la place, choisissez Debug->Stop Debugging pour arrêter le débogage. Ceci laissera l’émulateur fonctionner, et ainsi la prochaine phase de débogage commencera plus rapidement.

Pour stopper le débogage, sélectionnez Debug->Stop Debugging.

Exécuter votre application sur un Windows Phone

Pour exécuter votre application sur un Windows Phone, vous devez débloquer le téléphone avec le Windows Phone Developer Registration Tool. Cet utilitaire est accessible via le menu Démarrer sous le menu Windows Phone Developer Tools. En plus de cela, vous devez disposer d’un compte App Hub payant.

1. Si vous ne disposez pas d’un compte App Hub payant, enregistrez-vous maintenant sur App Hub, le portail officiel des développeurs Windows Phone.

2. Démarrez Zune sur votre ordinateur.

3. Connectez votre téléphone à votre ordinateur.

4. Démarrez le Windows Phone Developer Registration, saisissez votre Windows Live ID que vous voulez associer avec votre compte App Hub.

yddlhptc

5. Dans l’assistant d’enregistrement, saisissez les informations requises pour l’identification de votre téléphone.

Votre téléphone est alors débloqué et prêt à recevoir vos applications déployées via Visual Studio.

6. Dans Visual Studio, déployer sur votre téléphone est aussi simple que de sélectionner "Windows Phone 7 Device" (à la place de l’émulateur) dans la cible du déploiement.

p1bwc2i0

7. Après avoir sélectionné Windows Phone 7 Device dans le menu déroulant, vous pouvez déployer sur votre téléphone débloqué en utilisant la même procédure de déploiement et de débogage que ce que vous feriez avec l’émulateur.

Note

Pour que le déploiement se déroule sans souci, le téléphone doit être connecté à l’ordinateur, son écran doit être déverrouillé et le logiciel Zune doit être lancé.

Ajouter des images

En Silverlight, vous pouvez ajouter des images en utilisant le classe Shape. Vous pouvez créer de simple figures, comme des Rectangles, ou d’autres plus complexes, comme les Polygons. Les Brushes sont utilisés pour ajouter de la couleur sur les objets en Silverlight. Pour plus d’information sur les figures et les Brushes, allez voir Graphics QuickStart et le Brushes QuickStart.

Vous allez commencer par ajouter un StackPanel autour du TextBlock. Un Panel est un conteneur qui est utilisé pour regrouper et disposer un ensemble d’éléments graphiques. Chaque application doit avoir à minima un Panel. Un StackPanel dispose les éléments les uns à la suite des autres, soit de façon verticale, soit de façon horizontale, selon la valeur de l’Orientation. Les Grid et Canvas offrent plus de possibilités de disposition des éléments.

La forme que vous allez créer est une Ellipse. L’Ellipse devra apparaitre à la suite du TextBlock dans le StackPanel. Vous préciserez les tailles (Height et Width) de l’Ellipse ainsi que le remplissage (Fill). Pour le Fill, vous devez fournir le Brush qui peindra l’Ellipse.

Au lieu de travailler dans le vue Design, vous allez cette fois-ci travailler dans le vue XAML.

1. Fermez la fenêtre Toolbox.

2. Dans la vue XAML, localisez le TextBlock que vous venez d’ajouter.

3. Remplacez le TextBlock par le XAML suivant :

XAML

  1. <StackPanel>
  2.     <TextBlock FontSize="50" Text="Hello, World!" />
  3.     <Ellipse Fill="Blue" Height="150" Width="300"
  4.              Name="FirstEllipse" />
  5. </StackPanel>

nm1gtq2t

4. Appuyez sur F5 pour démarrer l’application.

L’image suivante de l’émulateur doit apparaitre. Vu qu’il n’y a encore aucune interaction prévue, l’application ne fait pas grand-chose pour le moment, mais vous allez ajouter d’autres éléments par la suite.

hm5ehxoa

Pour arrêter le débogage, sélectionnez Debug->Stop Debugging.

Ajouter un Bouton

La prochaine chose que vous allez faire est d’ajouter un Button Control à votre application. Les Controls sont un des moyens d’interagir avec les applications Silverlight. Silverlight possède une librairie de contrôle très riche, contenant Button, TextBox, ListBox, and beaucoup d’autres.

L’action d’ajouter un Button se décompose en deux étapes. La première est d’ajouter le Button dans le XAML. La deuxième étape consiste à ajouter la logique de gestion des évènements pour gérer les interactions avec l’utilisateur, comme par exemple le clic sur le Button.

Dans la vue XAM, ajoutez le XAML ci-dessous après la balise <Ellipse />.

XAML

  1. <Button Height="150"
  2.         Width="300"
  3.         Name="FirstButton"
  4.         Content="Tap" />

L’attribut Name donne le nom "FirstButton" au Button, ainsi vous pourrez accède au Button depuis le code. L’attribut Content indique le texte que apparaitra dans le Button. Les attributs Height et Widthdonneront la hauteur et largeur du bouton.

Les applications Silverlight gèrent les évènements. Lorsque certaines choses se produisent dans votre application, comme un clic sur un Button ou que l’application se charge, un évènement est lancé. Vous pouvez ajouter du code, appelé event handler, qui s’exécutera lorsque cet évènement se produira. Vous allez ici ajouter un event handler pour l’évènement Click.

Visual Studio peut créer pour vous les event handlers.

2. Dans la vue Design, sélectionnez le Button.

3. Dans la fenêtre de Propriétés, cliquez sur l’onglet Events. Une liste de tous les évènements du Button apparait.

qdaplduw

4. Double-cliquez sur l’évènement Click.

Le ficher de code-behind MainPage.xaml.cs s’ouvre et vous devriez voir l’ event handler FirstButton_Click.

5. Dans les accolades , ajoutez le code suivant à l’event handler.

C#

  1. private void FirstButton_Click(object sender, RoutedEventArgs e)
  2. {
  3.     if (FirstButton.Content as string == "Tap")
  4.     {
  5.         FirstButton.Content = "Tap Again";
  6.     }
  7.     else
  8.     {
  9.         FirstButton.Content = "Tap";
  10.     }
  11. }

Visual Basic

  1. Private Sub FirstButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
  2.     If (CType(FirstButton.Content, String) = "Tap") Then
  3.         FirstButton.Content = "Tap Again"
  4.     Else
  5.         FirstButton.Content = "Tap"
  6.     End If
  7. End Sub

La fonction FirstButton_Click effectue les actions suivantes. Quand le Button est cliqué, le texte qui est affiché change entre les deux valeurs "Tap" et "Tap Again".

l30jrxuy

6. Appuyez sur la touche F5 pour démarrer l’application.

L’exemple suivant vous montre l’exécution de l’event handler sur le click. Pour tester ce code, cliquez sur le bouton.

Dans le XAML du Button, notez qu’un attribut Click a été ajouté.

Get Microsoft Silverlight

Dans le XAML du Button, notez qu’un attribut Click a été ajouté.

XAML

  1. <StackPanel>
  2.     <TextBlock FontSize="50" Text="Hello, World!" />
  3.     <Ellipse Fill="Blue" Height="150" Width="300"
  4.              Name="FirstEllipse" />
  5.     <Button Height="150"
  6.             Width="300"
  7.             Content="Tap"
  8.             Name="FirstButton"
  9.             Click="FirstButton_Click" />
  10. </StackPanel>

Ajouter des Animations

La dernière chose que vous allez ajouter à votre application sont des animations. Vous allez créer une animation très simple qui écrasera l’Ellipse, puis qui lui rendra son apparence initiale, mais gardez à l’esprit que vous pouvez faire beaucoup plus avec les animations. Cette section est une simple introduction aux animations, il n’est pas nécessaire d’en maitriser tous les détails. Pour plus d’information sur les animations, jetez un œil à Animation Overview sur MSDN.

Pour créer une animation vous avez besoins de trois choses : Créer un StoryBoard, créer l’animation, et ensuite ajouter la code nécessaire pour démarrer l’animation.

Un StoryBoard est un container qui est utilisé pour regrouper les animations. A partir d’un StoryBoard, les animations peuvent être démarrées et arrêtées.

Les animations en Silverlight fonctionnent en changeant les valeurs de propriétés à travers le temps. La propriété StoryBoard.TargetName spécifie l’objet sur lequel l’animation va s’effectuer. Le Storyboard.TargetProperty spécifie la propriété de l’objet qui sera animée. La propriété To spécifie la valeur finale que prendra la propriété animée. La propriété AutoReverse spécifie si l’animation doit recommencer quand elle aura terminé, en recommençant de sa valeur initiale. La propriété Duration spécifie combien de temps va durer l’animation. Par exemple, si vous voulez une animation qui dure une seule seconde, vous devez affecter "00:00:01" (zéro heure: zéro minute: une seconde) à la Duration.

1. Dans le Solution Explorer, double-cliquez sur MainPage.xaml.

2. Dans la vue XAML, remplacez le StackPanel existant par le XAML suivant.

XAML

  1. <StackPanel>
  2.     <StackPanel.Resources>
  3.         <Storyboard x:Name="FirstStoryBoard">
  4.             <DoubleAnimation Storyboard.TargetName="FirstEllipse"
  5.                              Storyboard.TargetProperty="Width"
  6.                              To="1" AutoReverse="True"
  7.                              Duration="00:00:01" />
  8.         </Storyboard>
  9.     </StackPanel.Resources>
  10.     <TextBlock FontSize="50" Text="Hello, World!" />
  11.     <Ellipse Fill="Blue" Height="150" Width="300"
  12.              Name="FirstEllipse" />
  13.     <Button Height="150"
  14.             Width="300"
  15.             Name="FirstButton"
  16.             Content="Click"
  17.             Click="FirstButton_Click" />
  18. </StackPanel>

Ce XAML crée une section StackPanel.Resource qui contient un élément StoryBoard. Ce StoryBoard est nommé FirstStoryBoard afin que vous puissiez y accède depuis le code. L’animation change la propriété Width de l’Ellipse, cette propriété est de type Double, vous devez donc utiliser une DoubleAnimation. Le StoryBoard.TargetName pointe sur l’objet FirstEllipse. Le Storyboard.TargetProperty spécifie que la propriété de l’Ellipse à animer est son Width. La propriété To a la valeur de 1, le Width va donc diminuer de sa valeur actuelle de 200 jusqu’à la valeur cible de 1. La propriété AutoReverse est settee à True, l’animation se répètera donc. La Duration est définie à une seconde.

2sixq3e2

Maintenant vous devez démarrer l’animation. Pour démarrer l’animation, appelez la méthode Begin du StoryBoard.

3. Dans MainPage.xaml.cs, ajoutez un appel à la méthode Begin pour démarrer l’animation FirstStoryBoard lorsque le bouton FirstButton est cliqué.

C#

  1. private void FirstButton_Click(object sender, RoutedEventArgs e)
  2. {
  3.     if (FirstButton.Content as string == "Tap")
  4.     {
  5.         FirstButton.Content = "Tap Again";
  6.     }
  7.     else
  8.     {
  9.         FirstButton.Content = "Tap";
  10.     }
  11.     FirstStoryBoard.Begin();
  12. }

 

Visual Basic

  1. Private Sub FirstButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
  2.     If (CType(FirstButton.Content, String) = "Tap") Then
  3.         FirstButton.Content = "Tap Again"
  4.     Else
  5.         FirstButton.Content = "Tap"
  6.     End If
  7.     FirstStoryBoard.Begin()
  8. End Sub

4. Appuyez sur la touche F5 pour démarrer l’application.

L’exemple suivant vous montre l’animation crée. Pour visualiser cet exemple, cliquez sur le bouton.

Get Microsoft Silverlight

Publier sur le Marketplace

Lorsque vous aurez fini votre application, vous voudrez très certainement la distribuer au grand public en tant qu’application gratuite ou encore payante. Vous ferez cela en soumettant votre application au Marketplace Windows Phone. Pour apprendre comment faire cela, allez voir Publishing Your Application in the Marketplace.

A suivre

Maintenant que vous savez comment créer votre première application Windows Phone, jetez un œil aux User Experience Design Guidelines for Windows Phone. La totalité de ce document ne parlera pas de suite, mais vous voudrez sans doute y retourner de temps en temps pour rafraichir vos connaissances. Une fois que vous aurez parcouru le contenu, revenez ici pour continuer sur la partie suivante qui plonge dans le XAML, le langage déclaratif utilisé pour créer les interfaces utilisateur de vos applications : XAML QuickStart.

A voir aussi

 

 

Cliquez ici pour revenir au sommaire de la liste d’articles