Jean-Francois Lavidalle's blog https://docs.microsoft.com/archive/blogs/jflavidalle/feed.xml Wed, 17 Apr 2019 04:05:43 GMT en-US hourly 1 Developpement Windows Phone - partie 25 https://docs.microsoft.com/archive/blogs/jflavidalle/developpement-windows-phone-partie-25 Tue, 06 Sep 2011 13:25:00 GMT https://blogs.msdn.microsoft.com/jflavidalle/2011/09/06/developpement-windows-phone-partie-25/ 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

Détection de Mouvements (Accéléromètre )

Silverlight pour Windows Phone contient un namespace dédié à la gestion et l’exploitation en temps réel des données de l’accéléromètre du téléphone. L’accéléromètre mesure l’intensité et la direction de la force d’accélération appliquée sur le téléphone. Cette force est exprimée sous forme de variable décimale dont les valeurs s’étendent de -1.0 à 1.0. Cette valeur d’intensité est fournie pour les axes X, Y et Z du téléphone, correspondant à la force d’accélération subie par le téléphone respectivement en largeur, longueur et profondeur. Pour déterminer la direction de la force d’accélération, ces valeurs doivent être comparées les unes aux autres. Bien que le calcul de la direction ne soit pas couvert dans ce tutoriel, nous verrons comment récupérer les valeurs fournies par l’accéléromètre afin que la comparaison de ces valeurs soit simple lorsque vous utiliserez l’accéléromètre dans vos applications ou des jeux.

Cette application est une application Silverlight pour Windows Phone qui reçoit des données provenant directement du téléphone Windows Phone 7, et qui représente graphiquement ces données sur un canvas. L’étude de cette application dans ce tutoriel se découpe en plusieurs sections :

Téléchargez le code source complet de ce tutoriel, hébergé dans la Silverlight pour Windows Phone Code Gallery.

 

Démonstration Vidéo

Pour voir un exemple vidéo de l’utilisation de l’application détaillée dans ce tutoriel ainsi que du développement tel que décrit vous pouvez regarder la vidéo suivante. La page web de cette vidéo sur Channel 9 propose plusieurs formats et qualités, vous pouvez ainsi la regarder en haute définition ou la télécharger pour la lire sur des périphériques différents d’un ordinateur.

 

Créer l’interface utilisateur pour l’affichage des données de l’accéléromètre

Pour représenter les valeurs actuellement fournies par l’accéléromètre de façon pertinente, il est très utile d’afficher à la fois les valeurs (numériques) à l’instant précis mais aussi les dernières valeurs (sous forme de graphique). Pour faire cela, nous allons créer une interface utilisateur (UI) contenant les éléments suivants :

  • 3 TextBlock avec des noms significatifs pour les valeurs représentées pour les axes X, Y et Z.
  • Un Canvas avec un nom significatif sur lequel nous ajouterons de petits rectangles pour chaque point dessiné
  • Un Button avec un nom significatif qui sera utilisé pour démarrer/arrêter l’accéléromètre.
  • Les TextBlocks nécessaires pour les labels des valeurs capturées depuis l’accéléromètre.
  • 3 Rectangles qui seront coloriés avec différentes couleurs et qui serviront de légende pour les axes.

La disposition de ces éléments peut ressembler à ceci :

clip_image003

XAML
  1. <Grid x:Name="LayoutRoot" Background="Transparent">
  2.     <Grid.RowDefinitions>
  3.         <RowDefinition Height="Auto"/>
  4.         <RowDefinition Height="*"/>
  5.     </Grid.RowDefinitions>
  6.     <!--TitlePanel contains the name of the application and page title-->
  7.     <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
  8.         <TextBlock x:Name="ApplicationTitle" Text="JoMul's Demo"
  9.                    Style="{StaticResource PhoneTextNormalStyle}"/>
  10.         <TextBlock x:Name="PageTitle" Text="Accelerometer" Margin="9,-7,0,0"
  11.                    Style="{StaticResource PhoneTextTitle1Style}"/>
  12.     </StackPanel>
  13.     <!--ContentPanel - place additional content here-->
  14.     <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
  15.         <TextBlock Height="30" HorizontalAlignment="Left" Margin="46,20,0,0"
  16.                    Name="textBlock1" Text="X:" VerticalAlignment="Top" />
  17.         <TextBlock Height="30" HorizontalAlignment="Left" Margin="46,56,0,0"
  18.                    Name="textBlock2" Text="Y:" VerticalAlignment="Top" />
  19.         <TextBlock Height="30" HorizontalAlignment="Left" Margin="47,92,0,0"
  20.                    Name="textBlock3" Text="Z:" VerticalAlignment="Top" />
  21.         <Rectangle Height="20" HorizontalAlignment="Left" Margin="18,25,0,0"
  22.                    Name="rectangle1" Fill="Red" StrokeThickness="1"
  23.                    VerticalAlignment="Top" Width="16" />
  24.         <Rectangle Fill="Blue" Height="20" HorizontalAlignment="Left"
  25.                    Margin="18,60,0,0" Name="rectangle2" StrokeThickness="1"
  26.                    VerticalAlignment="Top" Width="16" />
  27.         <Rectangle Fill="Green" Height="20" HorizontalAlignment="Left"
  28.                    Margin="18,95,0,0" Name="rectangle3" StrokeThickness="1"
  29.                    VerticalAlignment="Top" Width="16" />
  30.         <TextBlock Height="30" HorizontalAlignment="Left" Margin="82,20,0,0"
  31.                    Name="xreadout" Text="1.0" VerticalAlignment="Top" />
  32.         <TextBlock Height="30" HorizontalAlignment="Left" Margin="82,56,0,0"
  33.                    Name="yreadout" Text="1.0" VerticalAlignment="Top" />
  34.         <TextBlock Height="30" HorizontalAlignment="Left" Margin="82,92,0,0"
  35.                    Name="zreadout" Text="1.0" VerticalAlignment="Top" />
  36.         <Button Content="PAUSE" Height="97" HorizontalAlignment="Left"
  37.                 Margin="143,25,0,0" Name="PlayOrPause" VerticalAlignment="Top"
  38.                 Width="285" Click="PlayOrPause_Click" />
  39.         <Canvas Height="400" HorizontalAlignment="Left" Margin="18,140,0,0"
  40.                 Name="Log" VerticalAlignment="Top" Width="400"
  41.                 Background="White" />
  42.         <TextBlock Height="30" HorizontalAlignment="Left" Margin="419,326,0,0"
  43.                    Name="textBlock4" Text="0" VerticalAlignment="Top" Width="30" />
  44.         <TextBlock Height="30" HorizontalAlignment="Left" Margin="419,128,0,0"
  45.                    Name="textBlock5" Text="1.0" VerticalAlignment="Top" />
  46.         <TextBlock Height="30" HorizontalAlignment="Left" Margin="419,526,0,0"
  47.                    Name="textBlock6" Text="-1.0" VerticalAlignment="Top" />
  48.     </Grid>
  49. </Grid>

 

Lire les données de l’accéléromètre en temps réel

Silverlight pour Windows Phone utilise l’assembly Microsoft.Devices.Sensors pour gérer les données de l’accéléromètre. Cette assembly doit être référencée par votre projet avant de pouvoir utiliser dans votre application les types, évènements ou méthodes qui la composent.

Pour ajouter Microsoft.Devices.Sensors à votre application :

1. Dans le Solution Explorer, faites un clic droit sur le nœud References de votre projet, et sélectionner ensuite Add Reference.

2. Sélectionnez Microsoft.Devices.Sensors dans la liste, et cliquez sur OK.

3. Ajoutez le code suivant au début de chaque fichier source qui devra utiliser les classes et méthodes liées à l’accéléromètre.

C#
  1. using Microsoft.Devices.Sensors;

 

Visual Studio
  1. Imports Microsoft.Devices.Sensors

L’étape suivant est d’ajouter un membre de type Accelerometer à la classe dont les méthodes devront utiliser les données de l’accéléromètre.

C#
  1. public partial class MainPage : PhoneApplicationPage
  2. {
  3.     // Constructor
  4.     Accelerometer accelerometer = new Accelerometer();
  5.     ...

Visual Basic
  1. Partial Public Class MainPage
  2.     Inherits PhoneApplicationPage
  3.     ' Constructor
  4.     Private accelerometer As New Accelerometer()
  5.     ..

Ce membre devra être visible dans toute la classe, car deux méthodes doivent être utilisées pour lire les données de l’accéléromètre :

1. Un event handler qui est appelé lorsque l’accéléromètre lève l’évènement ReadingChanged.

2. Une méthode s’occupant d’associer l’event handler à l’évènement ReadingChanged.

Commençons par la première. Tous les event handlers prennent au moins deux paramètres en argument : un "object" qui référence l’objet qui a levé l’évènement (dans notre cas l’instance de la classe Accelerometer définie en membre de classe), et un "event args" dont les propriétés contiennent les données relatives à l’évènement. Notre event handler pour l’évènement ReadingChanged de l’Accelerometer ressemblera à ceci :

C#
  1. void myHandler(object sender, AccelerometerReadingEventArgs e)
  2. {
  3.     // TODO: Code here
  4. }

Visual Basic
  1. Private Sub myHandler(sender As Object, e As AccelerometerReadingEventArgs)
  2.     ' TODO: Code here
  3. End Sub

Nous avons besoin d’initialiser le membre de type Accelerometer et de lier l’évènement ReadingChanged à myHandler (par souci de simplicité et uniquement pour ce tutoriel nous allons faire ceci dans la fonction principale).

C#
  1. public MainPage()
  2. {
  3.     InitializeComponent();
  4.     accelerometer.Start();
  5.     accelerometer.ReadingChanged += new
  6.     EventHandler<AccelerometerReadingEventArgs>(myHandler);
  7. }

Visual Basic
  1. Public Sub New()
  2.     InitializeComponent()
  3.     accelerometer.Start()
  4.     accelerometer.ReadingChanged += New EventHandler(Of AccelerometerReadingEventArgs)(myHandler)
  5. End Sub

Nous nous trouverons alors dans une impasse. Nous avons besoin de mettre à jour l’UI avec les données provenant de l’accéléromètre ; mais comme l’évènement ReadingChanged est levé depuis le thread de l’accéléromètre, la méthode myHandler sera aussi exécutée dans ce thread. Or nous souhaitons que la méthode myHandler puisse mettre à jour l’UI avec les valeurs de l’accéléromètre, et l’UI est gérée dans son propre thread, la rendant inaccessible. Heureusement, la solution à cette problématique est une simple ligne de code utilisant l’objet Dispatcher pour appeler une fonction sur le thread UI qui fera la mise à jour pour nous en lui passant l’objet AccelerometerReadingEventArgs qui contient les données que l’on veut afficher. Nous appellerons cette fonction updateMyScreen. myHandler ressemble maintenant à ceci :

C#
  1. void myHandler(object sender, AccelerometerReadingEventArgs e)
  2. {
  3.     Deployment.Current.Dispatcher.BeginInvoke(() => updateMyScreen(e));
  4. }

 

Visual Studio
  1. Private Sub myHandler(sender As Object, e As AccelerometerReadingEventArgs)
  2.     Deployment.Current.Dispatcher.BeginInvoke(Function() updateMyScreen(e))
  3. End Sub

Vous êtes maintenant prêt à brancher les données de l’accéléromètre à l’UI. Ceci est rendu simple par les propriétés de l’objet AccelerometerReadingEventArgs qui contiennent les valeurs pour les axes X, Y et Z. Nous allons terminer cette section en mettant en place un affichage très simple des données de l’accéléromètre : une simple zone de texte contenant la valeur. updateMyScreen, qui s’exécute sur le thread UI est appelé à chaque fois que l’évènement ReadingChanged est levé, a juste besoin de mettre à jour la propriété Text du TextBlock correspondant à chaque axe.

C#
  1. void updateMyScreen(AccelerometerReadingEventArgs e)
  2. {
  3.     // updates the textblocks
  4.     xreadout.Text = e.X.ToString("0.00");
  5.     yreadout.Text = e.Y.ToString("0.00");
  6.     zreadout.Text = e.Z.ToString("0.00");
  7. }

Visual Basic
  1. Private Sub updateMyScreen(e As AccelerometerReadingEventArgs)
  2.     ' updates the textblocks
  3.     xreadout.Text = e.X.ToString("0.00")
  4.     yreadout.Text = e.Y.ToString("0.00")
  5.     zreadout.Text = e.Z.ToString("0.00")
  6. End Sub

L’objet AccelerometerReadingEventArgs représente le force d’accélération exercée selon les axes X, Y et Z sous forme de double (valeur numérique à virgule flottante). Ces valeurs sont converties en string avec une précision à deux chiffres avec la virgule en utilisant la méthode ToString à laquelle on passe l’argument de format "0.00".

Vous pouvez maintenant compiler l’application et visualiser les données de l’accéléromètre à l’écran. Nous avons vu les éléments de base de la lecture des données de l’accéléromètre, nous allons en plus de cela ajouter une représentation graphique utilisant des éléments Rectangle et le Canvas qui a été ajouté à l’UI précédemment ce qui vous aidera a réellement voir ce que l’accéléromètre est en train de faire lorsque vous essaierez d’utiliser ses données dans vos applications. Il est fortement conseillé de continuer ce tutoriel ; toutefois si vous ne souhaitez qu’accéder aux données brutes, vous pouvez vous arrêter là.

 

Dessiner les données de l’accéléromètre

Le composant graphique Rectangle est déjà prêt à être utilisé en tant que pixel, ce qui va nous rendre la tâche plus simple que ce que vous pourriez penser. Un graphe ne sera qu’une suite de Rectangles consciencieusement disposes auxquels on donnera une couleur en utilisant la propriété Fill. Nous « peindrons » ces rectangles sur le Canvas blanc que nous avons mis en place dans la première section. Les propriétés Top et Left du Rectangle détermineront leur position sur le canvas, et nous pouvons même faire de ces valeurs des valeurs relatives au Canvas en référençant le Canvas dans la méthode SetValue du Rectangle.

Sur le graphique, nous allons dessiner trois lignes de couleurs différentes, chacune représentant un axe de l’accéléromètre. Ces lignes seront composées de Rectangle adjacents. Pour chacun de ces rectangles, nous allons utiliser deux valeurs pour déterminer leur position : le temps passé, que nous déterminerons en utilisant un simple accumulateur incrémenté de 1, et bien sur la donnée retournée par l’accéléromètre récupéré par l’objet AccelerometerReadingEventArgs.

L’évènement ReadingChanged va piloter la progression du graphe exactement comme il pilotait la représentation textuelle dans la section précédente. L’évènement ReadingChangedo est uniquement levé lorsque l’état de l’accéléromètre est « started », après l’appel à la méthode Start de l’objet Accelerometer. Ceci se produira en synchronisation avec le cycle natif de rafraichissement de l’application (30 frames par secondes par défaut), et est très fiable tel que va le démonter le graphique.

Comme vous vous en doutez, la création des rectangles doit se faire sur le thread UI, vous devez donc étendre la méthode updateMyScreen. Avant de faire cela, commençons par le plus simple : mettre en place l’accumulateur. Evidemment, cet accumulateur doit être en dehors du scope de la méthode updateMyScreen, nous en ferons donc un membre de classe, tel l’objet Accelerometer :

C#
  1. public partial class MainPage : PhoneApplicationPage
  2. {
  3.     // Constructor
  4.     Accelerometer accelerometer = new Accelerometer();
  5.     double iterator = 0;
  6.     ...
  7. }

Visual Basic
  1. Partial Public Class MainPage
  2.     Inherits PhoneApplicationPage
  3.     ' Constructor
  4.     Private accelerometer As New Accelerometer()
  5.     Private iterator As Double = 0
  6. ...

Notre accumulateur sera de type double pour éviter de gâcher des cycles CPU à convertir plus tard sa valeur en position sur le Canvas. Il s’augmentera toutefois par palier de 1, ce qui est ce que l’on attend de lui. Lorsque sa valeur augmentera de 1, la position horizontale que nous assignerons aux éléments Rectangle sera décalée vers la droite de 1 pixel, permettant ainsi de disposer ces rectangles de gauche à droite à l’écran qui, à terme, dessinera une ligne.

Note

Il est important de noter que nous utiliserons un Canvas de 400x400 pixels.

Mettons maintenant à jour la méthode updateMyScreen pour mettre en place le dessin. Ceci ce fait en plusieurs phases :

1. Convertir les valeurs retournées par l’accéléromètre (qui vont de la valeur la plus faible de -1.0 à un maximum de 1.0 et une valeur moyenne de 0) dans une position verticale qui sera utilisée pour placer le Rectangle sur le Canvas (qui vont de la valeur la plus faible de 400 à un ‘maximum’ de 0 et un milieu de 200). Comme pour l’accumulateur, la valeur retournée sera stockée en tant que double pour pouvoir être utilisé directement par l’objet Canvas.

2. Les éléments Rectangle qui seront utilisés en tant que pixel pour dessiner les lignes doivent être créés, avoir une taille de 1 pixel et être colorés, avant d’être dessinés. Nous avons donc trois nouveaux Rectangles par mise à jour de ReadingChanged, chacun représentant un des trois axes de l’accéléromètre.

3. Les valeurs converties retournées par l’accéléromètre de l’étape 1 sont utilisées pour la position verticale des Rectangle sur le Canvas, et la valeur de l’accumulateur est utilisée pour la position horizontale du Rectangle sur le Canvas. Ils sont passés au Rectangle par la méthode SetValue.

4. Les trois nouveaux Rectangles sont dessinés sur le Canvas en faisant des Rectangles des "enfants" (children) du Canvas. Ceci est accompli par l’utilisation de la méthode Add de la propriété Children du Canvas.

5. Si vous êtes en dehors de l’espace horizontal disponible sur le Canvas (c’est à dire lorsque l’accumulateur a atteint la valeur 399), vous pouvez vider le Canvas et recommencer depuis le côté gauche (en vidant la propriété Children du Canvas et en réinitialisant l’accumulateur à zéro), ou sinon vous incrémentez l’accumulateur de 1.

La fonction updateMyScreen ressemble alors à ceci :

C#
  1. void updateMyScreen(AccelerometerReadingEventArgs e)
  2. {
  3.     // updates the textblocks
  4.     xreadout.Text = e.X.ToString("0.00");
  5.     yreadout.Text = e.Y.ToString("0.00");
  6.     zreadout.Text = e.Z.ToString("0.00");
  7.     //draws on the canvas:
  8.     double currentXOnGraph = Math.Abs((e.X * 200) - 200);
  9.     double currentYOnGraph = Math.Abs((e.Y * 200) - 200);
  10.     double currentZOnGraph = Math.Abs((e.Z * 200) - 200);
  11.     Rectangle xPoint = new Rectangle();
  12.     Rectangle yPoint = new Rectangle();
  13.     Rectangle zPoint = new Rectangle();
  14.     xPoint.Fill = new SolidColorBrush(Colors.Red);
  15.     yPoint.Fill = new SolidColorBrush(Colors.Blue);
  16.     zPoint.Fill = new SolidColorBrush(Colors.Green);
  17.     // set the pixel size
  18.     xPoint.Width = 1;
  19.     xPoint.Height = 2;
  20.     yPoint.Width = 1;
  21.     yPoint.Height = 2;
  22.     zPoint.Width = 1;
  23.     zPoint.Height = 2;
  24.     // These pixels will be "pasted into" the canvas by setting their position
  25.     // according to the currentX/Y/Z-on-graph values. To set their position
  26.     // relative to the canvas, pass the canvas properties on to the pixels via
  27.     // the SetValue method. Use a generic iterator to determine the distance
  28.     // the pixel should be from the left side of the canvas.
  29.     xPoint.SetValue(Canvas.LeftProperty, iterator);
  30.     xPoint.SetValue(Canvas.TopProperty, currentXOnGraph);
  31.     yPoint.SetValue(Canvas.LeftProperty, iterator);
  32.     yPoint.SetValue(Canvas.TopProperty, currentYOnGraph);
  33.     zPoint.SetValue(Canvas.LeftProperty, iterator);
  34.     zPoint.SetValue(Canvas.TopProperty, currentZOnGraph);
  35.     // finally, associate pixels with the canvas.
  36.     Log.Children.Add(xPoint);
  37.     Log.Children.Add(yPoint);
  38.     Log.Children.Add(zPoint);
  39.     if (iterator == 399)
  40.     {
  41.         Log.Children.Clear();
  42.         iterator = 0;
  43.     }
  44.     else
  45.     {
  46.         iterator++;
  47.     }
  48. }

Visual Basic
  1. Private Sub updateMyScreen(e As AccelerometerReadingEventArgs)
  2.     ' updates the textblocks
  3.     xreadout.Text = e.X.ToString("0.00")
  4.     yreadout.Text = e.Y.ToString("0.00")
  5.     zreadout.Text = e.Z.ToString("0.00")
  6.     'draws on the canvas:
  7.     Dim currentXOnGraph As Double = Math.Abs((e.X * 200) - 200)
  8.     Dim currentYOnGraph As Double = Math.Abs((e.Y * 200) - 200)
  9.     Dim currentZOnGraph As Double = Math.Abs((e.Z * 200) - 200)
  10.     Dim xPoint As New Rectangle()
  11.     Dim yPoint As New Rectangle()
  12.     Dim zPoint As New Rectangle()
  13.     xPoint.Fill = New SolidColorBrush(Colors.Red)
  14.     yPoint.Fill = New SolidColorBrush(Colors.Blue)
  15.     zPoint.Fill = New SolidColorBrush(Colors.Green)
  16.     ' set the pixel size
  17.     xPoint.Width = 1
  18.     xPoint.Height = 2
  19.     yPoint.Width = 1
  20.     yPoint.Height = 2
  21.     zPoint.Width = 1
  22.     zPoint.Height = 2
  23.     ' These pixels will be "pasted into" the canvas by setting their position
  24.     ' according to the currentX/Y/Z-on-graph values. To set their position
  25.     ' relative to the canvas, pass the canvas properties on to the pixels via
  26.     ' the SetValue method. Use a generic iterator to determine the distance
  27.     ' the pixel should be from the left side of the canvas.
  28.     xPoint.SetValue(Canvas.LeftProperty, iterator)
  29.     xPoint.SetValue(Canvas.TopProperty, currentXOnGraph)
  30.     yPoint.SetValue(Canvas.LeftProperty, iterator)
  31.     yPoint.SetValue(Canvas.TopProperty, currentYOnGraph)
  32.     zPoint.SetValue(Canvas.LeftProperty, iterator)
  33.     zPoint.SetValue(Canvas.TopProperty, currentZOnGraph)
  34.     ' finally, associate pixels with the canvas.
  35.     Log.Children.Add(xPoint)
  36.     Log.Children.Add(yPoint)
  37.     Log.Children.Add(zPoint)
  38.     If iterator = 399 Then
  39.         Log.Children.Clear()
  40.         iterator = 0
  41.     Else
  42.         iterator += 1
  43.     End If
  44. End Sub

Enfin, pour avoir une chance d’observer les données, et d’en arrêter la visualisation, nous devons écouter l’évènement Play/Pause du bouton. Dans Visual Studio, double-cliquez tout simplement sur le bouton dans le designer et l’évènement OnClick sera lié automatiquement à une nouvelle fonction nommée convenablement. Vous pouvez aussi écrire cela vous-même. Dans tous les cas, comme l’évènement ReadingChanged va mettre à jour le graphe pour nous, la seule chose à faire dans l’évènement Play/Pause et de démarrer ou arrêter l’accéléromètre. La fonction ressemblera à ceci :

C#
  1. private void PlayOrPause_Click(object sender, RoutedEventArgs e)
  2. {
  3.     if (PlayOrPause.Content.ToString() == "PAUSE")
  4.     {
  5.         PlayOrPause.Content = "PLAY";
  6.         accelerometer.Stop();
  7.     }
  8.     else if (PlayOrPause.Content.ToString() == "PLAY")
  9.     {
  10.         accelerometer.Start();
  11.         PlayOrPause.Content = "PAUSE";
  12.     }
  13. }

Visual Basic
  1. Private Sub PlayOrPause_Click(sender As Object, e As RoutedEventArgs)
  2.     If PlayOrPause.Content.ToString() = "PAUSE" Then
  3.         PlayOrPause.Content = "PLAY"
  4.         accelerometer.[Stop]()
  5.     ElseIf PlayOrPause.Content.ToString() = "PLAY" Then
  6.         accelerometer.Start()
  7.         PlayOrPause.Content = "PAUSE"
  8.     End If
  9. End Sub

Exécuter ce code affichera un graphe contenant trois lignes ainsi que l’affichage textuel des données de l’accéléromètre. Bien sûr, pour réellement visualiser les données de l’accéléromètre, vous aurez besoin de déployer cette application sur un téléphone Windows Phone. Il est toutefois possible de simuler l’accéléromètre si vous ne disposez pas d’un téléphone.

A voir

 

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

]]> Developpement Windows Phone - partie 22 https://docs.microsoft.com/archive/blogs/jflavidalle/developpement-windows-phone-partie-22 Tue, 06 Sep 2011 13:22:00 GMT https://blogs.msdn.microsoft.com/jflavidalle/2011/09/06/developpement-windows-phone-partie-22/ 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

Accéder à un Web Service REST

Representational State Transfer (REST) fait référence à un style d’architecture pour exposer des ressources sur le web pouvant être accédées par des clients. De nombreuses ressources, comme les blogs, les cartes, les produits sont exposés en tant que service REST sur le Web. Silverlight fournit des classes qui rendent très simple l’appel à des services REST depuis une application Windows Phone. Ce tutoriel explique comment appeler et travailler avec des services REST.

Ce tutoriel contient les sections suivantes :

Note

Les exemples fournis dans ce guide de 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 ou sur le téléphone lui-même.

 

Consommer un Service REST

Les appels aux services REST se fait un utilisant les verbes standards HTTP (GET, POST, PUT, et DELETE). Les ressources sont identifiées par une URI. Une réponse contient une représentation, habituellement en XML ou JavaScript Object Notation (JSON), de la ressource spécifiée. Les requêtes sont sans états (stateless), ce qui signifie que toutes les informations nécessaire à l’exécution de la requête doivent être inclues dans chaque requête.

Un aspect important de l’appel de services REST est de s’assurer que l’URI correcte est utilisée lorsque vous tentez d’accéder à une ressource. La plupart du temps les compagnies fournissent une liste des prérequis d’un appel, contenant les paramètres et les valeurs qui doivent être passées. Par exemple, pour appeler le web service Bing, vous pouvez vous référer au Bing API guidelines.

Silverlight pour Windows Phone fournit plusieurs classes pour consommer des services REST. Il faut toutefois garder à l’esprit que Windows Phone utilise Silverlight 3, ce qui implique que les fonctions de réseau de Silverlight 4 ne sont pas disponibles pour les clients Windows Phone. Pour plus d’information sur les différentes de fonctionnalités réseau entre Silverlight pour Windows Phone et Silverlight pour Windows, jetez un œil à Networking in Silverlight for Windows Phone.

Pour consommer un service REST depuis une application cliente Windows Phone, vous pouvez soit utiliser la classe WebClient ou les classes HttpWebRequest/HttpWebResponse. Avec ces deux options, les requêtes sont asynchrones. Toutefois, WebClient est le plus simple des deux.

WebClient utilise un système simple basé sur des évènements pour faire des requêtes et en récupérer les réponses. Pour utiliser WebClient, vous devez appeler la méthode Async appropriée et vous abonner à l’évènement Completed correspondant. Le tableau ci-dessous contient quelques-unes des méthodes et évènements de WebClient que vous pouvez utiliser, en fonction de l’action et du type de donnée.

Action

Type de Donnée

Méthodes et évènements

GET

String

Méthode DownloadStringAsync
Evènement DownloadStringCompleted

GET

Stream

Méthode OpenReadAsync
Evènement OpenReadCompleted

POST

String

Méthode UploadStringAsync
Evènement UploadStringCompleted

POST

Stream

Méthode OpenWriteAsync
Evènement OpenWriteCompleted

La classe HttpWebRequest vous permet d’avoir un plus grand contrôle sur le message de la requête, tel que les messages HTTP PUT et DELETE. Pour plus d’information sur l’utilisation des classes the HttpWebRequest/HttpWebResponse , jetez un œil à la classe HttpWebRequest.

 

Exemple d’appel de Service REST

L’exemple ci-dessous illustre l’usage de la classe WebClient pour envoyer une requête depuis une application Windows Phone vers le service de recherche Bing. Dans cet exemple, vous pouvez changer le texte recherché en utilisant la liste déroulante, ce qui met à jour l’URI de recherche. Lorsque vous cliquez sur le bouton Search!, une requête est envoyée au service de recherché Bing. En plus du texte recherché, l’URI utilisée contient l’information indiquant que le résultat de la requête doit être au format XML. Les résultats sont parsés et affichés dans la liste.

Get Microsoft Silverlight

Note

Bien que cet exemple contienne un Bing Application ID dans l’URI pour effectuer la requête, l’Application ID utilisé n’est pas affiché dans le code. Pour obtenir un Application ID servant à utiliser le service de recherche Bing, allez voir Getting Started with Bing Api Version 2.

Note sur la sécurité

Lorsque vous vous connectez à un service web qui nécessite une clef, ne stockez pas cette clef dans l’application qui s’exécutera sur un téléphone. À la place, créez un web service proxy qui identifiera l’utilisateur et appellera le service externe avec la clef. Pour plus d’information sur les recommandations de sécurité, jetez un œil à Web Service Security for Windows Phone.

Vous trouverez ci-dessous le markup et le code de cet exemple.

 

XAML
  1. <phone:PhoneApplicationPage
  2.             x:Class="WindowsPhoneApplication1.MainPage"
  3.             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5.             xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  6.             xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  7.             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  8.             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  9.             mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
  10.             FontFamily="{StaticResource PhoneFontFamilyNormal}"
  11.             FontSize="{StaticResource PhoneFontSizeNormal}"
  12.             Foreground="{StaticResource PhoneForegroundBrush}"
  13.             SupportedOrientations="Portrait" Orientation="Portrait"
  14.             shell:SystemTray.IsVisible="False">
  15.     <!--LayoutRoot is the root grid where all page content is placed-->
  16.     <Grid x:Name="LayoutRoot" Background="Transparent">
  17.         <Grid.Resources>
  18.             <Style x:Key="ComboBoxItemStyle" TargetType="ComboBoxItem" >
  19.                 <Setter Property="Foreground" Value="Black"/>
  20.                 <Setter Property="Background" Value="LightGray"/>
  21.             </Style>
  22.             <Style x:Key="ComboBoxStyle" TargetType="ComboBox" >
  23.                 <Setter Property="Foreground" Value="Black"/>
  24.                 <Setter Property="Background" Value="Gray"/>
  25.             </Style>
  26.         </Grid.Resources>
  27.         <Grid.RowDefinitions>
  28.             <RowDefinition Height="Auto"/>
  29.             <RowDefinition Height="*"/>
  30.         </Grid.RowDefinitions>
  31.         <!--TitlePanel contains the name of the application and page title-->
  32.         <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
  33.             <TextBlock x:Name="ApplicationTitle" Text="REST CLIENT"
  34.                        Style="{StaticResource PhoneTextNormalStyle}"/>
  35.             <TextBlock x:Name="PageTitle" Text="bing search"
  36.                        Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"
  37.                        Height="99" Width="453" />
  38.         </StackPanel>
  39.         <!--ContentPanel - place additional content here-->
  40.         <Grid x:Name="ContentPanel" Margin="12,139,12,0" Grid.RowSpan="2">
  41.             <Button Content="Search!" Height="89" HorizontalAlignment="Left"
  42.                     Margin="264,140,0,0" Name="button1"
  43.                     VerticalAlignment="Top" Width="189" Click="button1_Click" />
  44.             <ComboBox Height="50" Style="{StaticResource ComboBoxStyle}"
  45.                       HorizontalAlignment="Left" Margin="6,159" Name="comboBox1"
  46.                       ItemContainerStyle="{StaticResource ComboBoxItemStyle}"
  47.                       VerticalAlignment="Top" Width="235" ItemsSource="{Binding}"
  48.                       SelectionChanged="comboBox1_SelectionChanged" />
  49.             <TextBlock Height="36" HorizontalAlignment="Left" Margin="12,120"
  50.                        Name="textBlock2" Text="Search Topic:" VerticalAlignment="Top" Width="121" />
  51.             <TextBlock Height="23" HorizontalAlignment="Left" Margin="12,1,0,0"
  52.                        Name="textBlock3"
  53.                        Text="URI:" VerticalAlignment="Top" />
  54.             <TextBlock Height="86" HorizontalAlignment="Left" Margin="6,28"
  55.                        Name="uriTextBlock" TextWrapping="Wrap" Text="{Binding}"
  56.                        VerticalAlignment="Top" Width="447" />
  57.             <TextBlock Height="23" HorizontalAlignment="Left" Margin="12,242,0,0"
  58.                        Name="textBlock5"
  59.                        Text="Results:" VerticalAlignment="Top" />
  60.             <ListBox Height="352" HorizontalAlignment="Left" Margin="6,271,0,0" Name="listBox1"
  61.                      VerticalAlignment="Top" Width="444" ItemsSource="{Binding}" >
  62.                 <ListBox.ItemTemplate>
  63.                     <DataTemplate>
  64.                         <Border BorderBrush="{StaticResource PhoneForegroundBrush}" Width="418" BorderThickness="2"
  65.                                 Margin="2">
  66.                             <StackPanel>
  67.                                 <TextBlock Text="{Binding Path=Title}" TextWrapping="Wrap" />
  68.                                 <TextBlock Text="{Binding Path=Url}" TextWrapping="Wrap"/>
  69.                             </StackPanel>
  70.                         </Border>
  71.                     </DataTemplate>
  72.                 </ListBox.ItemTemplate>
  73.             </ListBox>
  74.         </Grid>
  75.     </Grid>
  76. </phone:PhoneApplicationPage>

C#
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Net;
  5. using System.Windows;
  6. using System.Windows.Controls;
  7. using System.Windows.Documents;
  8. using System.Windows.Input;
  9. using System.Windows.Media;
  10. using System.Windows.Media.Animation;
  11. using System.Windows.Shapes;
  12. using Microsoft.Phone.Controls;
  13. using System.Xml.Linq;
  14. namespace WindowsPhoneApplication1
  15. {
  16.     public partial class MainPage : PhoneApplicationPage
  17.     {
  18.         // Constructor
  19.         String requestString =
  20.         "http://api.bing.net/xml.aspx?AppId='YourAppId'&Query={0}&Sources=Web&Version=2.0&Market=en-us&Adult=Strict";
  21.         string UriNoAppId =
  22.         "http://api.bing.net/xml.aspx?AppId='YourAppId'&Query={0}&Sources=Web&Version=2.0&Market=en-us&Adult=Strict";
  23.         public MainPage()
  24.         {
  25.             InitializeComponent();
  26.             List<string> searchTopics = new List<string>() { "Microsoft", "Silverlight", "Windows Phone 7" };
  27.             comboBox1.DataContext = searchTopics;
  28.             comboBox1.SelectedIndex = 0;
  29.             // Create the WebClient and associate a handler with the OpenReadCompleted event.
  30.             wc = new WebClient();
  31.             wc.OpenReadCompleted += new OpenReadCompletedEventHandler(wc_OpenReadCompleted);
  32.         }
  33.         // Call the topic service at the Bing search site.
  34.         WebClient wc;
  35.         private void CallToWebService()
  36.         {
  37.             // Call the OpenReadAsyc to make a get request, passing the url with the selected search string.
  38.             wc.OpenReadAsync(new Uri(String.Format(requestString, comboBox1.SelectedItem.ToString())));
  39.         }
  40.         void wc_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
  41.         {
  42.             XElement resultXml;
  43.             // You should always check to see if an error occurred. In this case, the application
  44.             // simply returns.
  45.             if (e.Error != null)
  46.             {
  47.                 return;
  48.             }
  49.             else
  50.             {
  51.                 XNamespace web = "http://schemas.microsoft.com/LiveSearch/2008/04/XML/web";
  52.                 try
  53.                 {
  54.                     resultXml = XElement.Load(e.Result);
  55.                     // Search for the WebResult node and create a SearchResults object for each one.
  56.                     var searchResults =
  57.                     from result in resultXml.Descendants(web + "WebResult")
  58.                     select new SearchResult
  59.                     {
  60.                         // Get the Title, Description and Url values.
  61.                         Title = result.Element(web + "Title").Value,
  62.                         Description = result.Element(web + "Description").Value,
  63.                         Url = result.Element(web + "Url").Value
  64.                     };
  65.                     // Set the data context for the listbox to the results.
  66.                     listBox1.DataContext = searchResults;
  67.                 }
  68.                 catch (System.Xml.XmlException ex)
  69.                 {
  70.                     textBlock2.Text = ex.Message;
  71.                 }
  72.             }
  73.         }
  74.         private void button1_Click(object sender, RoutedEventArgs e)
  75.         {
  76.             CallToWebService();
  77.         }
  78.         // Update the textblock as the combo box selection changes.
  79.         private void comboBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)
  80.         {
  81.             uriTextBlock.DataContext = string.Format(UriNoAppId, e.AddedItems[0]);
  82.         }
  83.     }
  84.     // Simple class to hold the search results.
  85.     public class SearchResult
  86.     {
  87.         public string Title { get; set; }
  88.         public string Url { get; set; }
  89.         public string Description { get; set; }
  90.     }
  91. }

Visual Basic
  1. Imports System.Collections.Generic
  2. Imports System.Linq
  3. Imports System.Net
  4. Imports System.Windows
  5. Imports System.Windows.Controls
  6. Imports System.Windows.Documents
  7. Imports System.Windows.Input
  8. Imports System.Windows.Media
  9. Imports System.Windows.Media.Animation
  10. Imports System.Windows.Shapes
  11. Imports Microsoft.Phone.Controls
  12. Imports System.Xml.Linq
  13. Namespace WindowsPhoneApplication1
  14.     Partial Public Class MainPage
  15.         Inherits PhoneApplicationPage
  16.         ' Constructor
  17.         Private requestString As [String] = "http://api.bing.net/xml.aspx?AppId='YourAppId'&Query={0}&Sources=Web&Version=2.0&Market=en-us&Adult=Strict"
  18.         Private UriNoAppId As String = "http://api.bing.net/xml.aspx?AppId='YourAppId'&Query={0}&Sources=Web&Version=2.0&Market=en-us&Adult=Strict"
  19.         Public Sub New()
  20.             InitializeComponent()
  21.             Dim searchTopics As New List(Of String)() From { _
  22.             "Microsoft", _
  23.             "Silverlight", _
  24.             "Windows Phone 7" _
  25.             }
  26.             comboBox1.DataContext = searchTopics
  27.             comboBox1.SelectedIndex = 0
  28.             ' Create the WebClient and associate a handler with the OpenReadCompleted event.
  29.             wc = New WebClient()
  30.             AddHandler wc.OpenReadCompleted, New OpenReadCompletedEventHandler(AddressOf wc_OpenReadCompleted)
  31.         End Sub
  32.         ' Call the topic service at the Bing search site.
  33.         Private wc As WebClient
  34.         Private Sub CallToWebService()
  35.             ' Call the OpenReadAsyc to make a get request, passing the url with the selected search string.
  36.             wc.OpenReadAsync(New Uri([String].Format(requestString, comboBox1.SelectedItem.ToString())))
  37.         End Sub
  38.         Private Sub wc_OpenReadCompleted(sender As Object, e As OpenReadCompletedEventArgs)
  39.             Dim resultXml As XElement
  40.             ' You should always check to see if an error occurred. In this case, the application
  41.             ' simply returns.
  42.             If e.[Error] IsNot Nothing Then
  43.                 Return
  44.             Else
  45.                 Dim web As XNamespace = "http://schemas.microsoft.com/LiveSearch/2008/04/XML/web"
  46.                 Try
  47.                     resultXml = XElement.Load(e.Result)
  48.                     ' Search for the WebResult node and create a SearchResults object for each one.
  49.                     ' Get the Title, Description and Url values.
  50. Dim searchResults = From result In resultXml.Descendants(web & "WebResult")New SearchResult() With { _
  51. Key .Title = result.Element(web & "Title").Value, _
  52. Key .Description = result.Element(web & "Description").Value, _
  53. Key .Url = result.Element(web & "Url").Value _
  54. }
  55.                     ' Set the data context for the listbox to the results.
  56.                     listBox1.DataContext = searchResults
  57.                 Catch ex As System.Xml.XmlException
  58.                     textBlock2.Text = ex.Message
  59.                 End Try
  60.             End If
  61.         End Sub
  62.         Private Sub button1_Click(sender As Object, e As RoutedEventArgs)
  63.             CallToWebService()
  64.         End Sub
  65.         ' Update the textblock as the combo box selection changes.
  66.         Private Sub comboBox1_SelectionChanged(sender As Object, e As SelectionChangedEventArgs)
  67.             uriTextBlock.DataContext = String.Format(UriNoAppId, e.AddedItems(0))
  68.         End Sub
  69.     End Class
  70.     ' Simple class to hold the search results.
  71.     Public Class SearchResult
  72.         Public Property Title() As String
  73.             Get
  74.                 Return m_Title
  75.             End Get
  76.             Set(value As String)
  77.                 m_Title = Value
  78.             End Set
  79.         End Property
  80.         Private m_Title As String
  81.         Public Property Url() As String
  82.             Get
  83.                 Return m_Url
  84.             End Get
  85.             Set(value As String)
  86.                 m_Url = Value
  87.             End Set
  88.         End Property
  89.         Private m_Url As String
  90.         Public Property Description() As String
  91.             Get
  92.                 Return m_Description
  93.             End Get
  94.             Set(value As String)
  95.                 m_Description = Value
  96.             End Set
  97.         End Property
  98.         Private m_Description As String
  99.     End Class
  100. End Namespace

 

Détecter la connectivité réseau

Pour obtenir une bonne expérience utilisateur, vous devez vérifier que le téléphone dispose d’une connexion à Internet avant de tenter un appel de service web. Vous pouvez utiliser la méthode NetworkInterface.GetIsNetworkAvailable pour connaitre l’état de la connexion à Internet. Si le retour est la valeur false, vous devrez alors soit afficher un message à l’utilisateur pour lui demander de se connecter à un réseau, ou informer l’utilisateur que les appels aux services web ne peuvent être effectués. Pour un exemple d’utilisation de cette méthode, jetez un œil à NetworkInterface.GetIsNetworkAvailable.

Note

Un appel à la méthode NetworkInterface.GetIsNetworkAvailable peut retourner la valeur true sur l’émulateur même si aucune connectivité n’est disponible, vous devrez donc tester votre code sur un téléphone.

A Voir

 

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

]]> Developpement Windows Phone - partie 19 https://docs.microsoft.com/archive/blogs/jflavidalle/developpement-windows-phone-partie-19 Tue, 06 Sep 2011 13:19:00 GMT https://blogs.msdn.microsoft.com/jflavidalle/2011/09/06/developpement-windows-phone-partie-19/ 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

Récupérer des données dans vos Applications Windows Phone

Il existe plusieurs façons de stocker et récupérer des données dans vos applications Silverlight pour Windows Phone 7 applications. Ce tutoriel va vous donner des pistes pour déterminer quelle approche est la plus adaptée en fonction de vos prérequis. De plus, ce tutoriel contient des liens vers d’autres sujets contenant plus d’informations.

Ce tutoriel contient les sections suivantes :

Sources de Données

Les données peuvent être présentes à plusieurs endroits. Par exemple, des données en lecture seule peuvent être stockées dans un fichier local dans vos applications. Les données spécifiques à l’utilisateur de l’application peuvent être stockées dans un endroit appelé l’isolated storage ou bien les données peuvent être stockées sur internet et accessibles à travers un web services.

clip_image003[1]

Fichiers Locaux

Vous pouvez utiliser des fichiers, comme des fichiers texte ou XML, pour stocker des données en lecture seule localement. Les fichiers locaux peuvent être compilés en tant que ressources (Resources Files) ou fichiers de contenu (Content Files).

Fichiers de ressource

Les fichiers de ressource sont contenus dans l’assembly du projet. Vous pouvez utiliser des fichiers de ressource dans vos projets d’applications et de librairies, et ensuite déployer vos assemblies à l’intérieur ou encore à l’extérieur de votre package d’application (.xap). L’avantage d’un fichier de ressource est que le fichier sera toujours disponible depuis l’application. Toutefois, votre application mettra peut-être un peu plus de temps à démarrer lorsque vous utilisez ce type de fichier. Vous indiquez qu’un fichier est un fichier de ressource en affectant sa propriété Build Action dans Visual Studio à Resource. Vous pouvez accéder à un fichier de ressource en utilisant la méthode Application.GetResourceStream. Par exemple, allez voir Application.GetResourceStream.

Vous utiliserez un fichier de ressource lorsque vous aurez typiquement les conditions suivantes :

  • Le temps de démarrage de l’application n’est pas important.
  • Vous n’aurez pas besoin de mettre à jour le contenu du resource file après qu’il ait été compilé dans l’assembly.
  • Vous souhaitez simplifier la distribution de l’application en diminuant le nombre de dépendances.

Fichiers de contenu

Pour des raisons de performances, les fichiers de contenu sont souvent préférés aux fichiers de ressources dans les applications pour Windows Phone. Les fichiers de contenu sont inclus dans le package de vos applications (.xap) sans être inclus dans une assembly. Si ils ne sont pas compilés dans une assemby, les assemblies sont compilées avec des metadatas contenant une association avec chaque fichier de contenu. Les fichiers de contenu peuvent être partagés par plusieurs assemblies d’un même package. Vous indiquez qu’un fichier est une fichier de contenu en affectant sa propriété Build Action dans Visual Studio à Content. Vous pouvez accéder à un fichier de contenu à partir du fichier du package de l’application. Pour voir un exemple qui utilise la méthode XElement.Load pour accéder à un fichier de contenu, jetez un œil à Loading an XML File topic.

Vous utiliserez une fichier de contenu lorsque vous aurez typiquement les conditions suivantes :

  • Vous voulez pouvoir mettre à jour le contenu du fichier de contenu sans avoir besoin de recompiler l’assembly qui l’utilise.
  • Le temps de démarrage de l’application est un critère important.

Isolated Storage

Si vous avez besoin de stocker et récupérer des informations spécifiques à l’utilisateur, vous pouvez utiliser l’isolated storage. Dans les applications Silverlight pour Windows Phone, il n’y a pas d’accès direct au système de fichier du système d’exploitation. Toutefois, vous pouvez utiliser l’isolated storage pour stocker et récupérer des données localement sur le téléphone de l’utilisateur. Il y a deux façons d’utiliser l’isolated storage. La première façon est de sauvegarder et récupérer les données sous forme de clef/valeur en utilisant la classe IsolatedStorageSettings. La seconde façon est de sauvegarder et récupérer des fichiers en utilisant la classe IsolatedStorageFile. Pour plus d’information sur comment utiliser l’isolated storage, jetez un œil à Isolated Storage QuickStart.

Terminologie des Web Services

Travailler avec des services web peut être perturbant à cause des différents types de services, formats, et technologies. Il est préférable d’avoir une connaissance même basique de la terminologie utilisée. Le tableau ci-dessous contient quelques termes qui sont utilisés lorsque l’on fait référence à des services web.

Terme

Description

web service

Bloc logique qui fournit des données et services à d’autres applications. Les applications accèdent à des web services en utilisant les protocoles et formats de données standards du web tels que HTTP, XML, and SOAP, et ce indépendamment de l’implémentation de chaque web service.

REST

(Representational State Transfer Protocol) Un protocole pour exposer des ressources sur le web accessible par des clients.

POX

(Plain Old XML) Un terme utilisé pour décrire du simple XML.

JSON

(JavaScript Object Notation) Un format concis pour l’échange de données. Il a été désigné pour être lisible par un être humain, mais aussi parsé simplement par un ordinateur.

OData

(Open Data Protocol) Un protocole web pour requêter et mettre à jour des données.

SOAP

(Simple Object Access Protocol) Un protocole concis pour échanger des données structurées dans un environnement distribué.

.

Technologies des Web Services

Il y a de nombreuses technologies réseaux et Web services que vous pouvez utiliser pour consommer des données dans vos applications Silverlight pour Windows Phone. Ces technologies contiennent :

  • Classes HTTP
  • Services WCF
  • WCF Data Services (OData services)
  • Windows Azure Services

Classes HTTP

Vous pouvez accéder à des web services ou des ressources sur un serveur directement depuis une application Silverlight pour Windows Phone en utilisant les classes HttpWebRequest/HttpWebResponse ou WebClient dans le namespace System.Net. Ces classes fournissent l’ensemble des fonctionnalités requises pour envoyer n’importe quel type de requête sur n’importe quel web service disponible avec le protocole HTTP. Silverlight n’offre pas la possibilité d’héberger des services basés sur HTTP, ces classes sont donc utilisées lorsque l’application sur le téléphone accède à des services web existants. Vous utiliserez ces classes lorsque le service HHTP que vous voulez utiliser est hébergé par une autre personne, que vous n’avez pas la main dessus et que ce service utilise le format XML ou JSON. Gardez toutefois à l’esprit que la sérialisation JSON est limitée sur Windows Phone. Vous pouvez utiliser ces classes pour construire une requête, en assurant ainsi que la requête suit le format attendu par le service. Si toutefois vous créez le service en vous basant sur un modèle de données existant, Silverlight offre des solutions complètes plus productives en utilisant WCF, tel que décrit dans la prochaine section. Pour plus d’information sur l’utilisation de la classe WebClient pour accéder à des services web, jetez un œil à Building a REST Web Service Client QuickStart. Pour plus d’informations sur les restrictions de sécurité et l’accès aux services web en utilisant les classes HttpWebRequest/HttpWebResponse ou WebClient , jetez un œil à Connecting to Web and Data Services for Windows Phone et HTTP Communication and Security with Silverlight.

Services WCF

Windows Communication Foundation (WCF) est un framework pour créer et accéder à des services web. WCF vous permet d’exposer une classe en tant que service et d’échanger des objets entre Silverlight et ce service. Dans un application Silverlight pour Windows Phone vous pouvez utiliser SLsvcUtil.exe ou utiliser la fonction Add Service Reference de Visual Studio pour générer un proxy local pour le service. Pour plus d’information, jetez un œil à Networking in Silverlight for Windows Phone. Pour plus d’information sur l’utilisation de l’outil SLsvcUtil, jetez un œil sur Using SLsvcUtil.exe to Access a Service. Le proxy vous permet d’accéder au service à travers une classe locale. Les services WCF supportent plusieurs protocoles (dont HTTP et TCP) et de nombreux formats, tels que SOAP, XML et Atom. Pour plus d’information, jetez un œil à How to: Access a Service from Silverlight.

WCF Data Services (OData services)

WCF Data Services, anciennement appelé ADO.NET Data services, est un framework vous permettant d’accéder à des données de votre modèle de donnée existant sous forme de ressources REST (representational state transfer). WCF Data Services expose les données sous forme de flux ODATA (Open Data Protocol). En plus de cela, et si votre application Silverlight pour Windows Phone interagit avec Sharepoint, Sharepoint 2010 expose ses données en tant que WCF Data Services. WCF Data Services gère tout le mécanisme de communication HTTP, de sérialisation ainsi que d’autres tâches qui doivent être habituellement mises en œuvre lorsqu’un modèle de données doit être exposé à travers un service. Cela veut dire que vos applications peuvent accéder à ces données à travers le protocole HTTP standard pour exécuter des requetés ainsi que créer, mettre à jour et supprimer des données à travers WCF Data Service, y compris entre différents domaines. Les fonctionnalités ODATA pour Windows Phone sont inclues dans la bibliothèque Client OData sur Codeplex. Pour plus d’information sur la façon de générer un proxy et d’écrire un client pour un service ODATA, jetez un œil à Open Data Protocol (OData) Overview for Windows Phone et How to: Consume an OData Service for Windows Phone.

Windows Azure Storage Services

Vous pouvez utiliser Windows Azure pour stocker et récupérer des données que vous voulez utiliser dans vos applications Windows Phone, cela est particulièrement utile quand on sait que l’espace de stockage sur le téléphone st limité. La plateforme Windows Azure fournit plusieurs options pour stocker des données pour des applications Windows Phone. Windows Azure storage fournit un espace de stockage persistant et durable dans le cloud et pouvant augmenter ou diminuer sa disponibilité en fonction de la demande. La façon d’accéder au Windows Azure storage est très similaire à la façon d’accéder à un service web. Pour plus d’information sur l’utilisation de Windows Azure storage services dans vos applications Windows Phone, jetez un œil à Storing Data in the Windows Azure Platform for Windows Phone.

Choisir l’approche à utiliser

Une fois que vous connaitrez les prérequis de votre application, vous pourrez décider quelle est l’approche la plus adaptée. Le tableau ci-dessous donne une liste de scénarios et l’approche recommandée.

Scenario

Approche Recommandée

Vous voulez inclure des données en lecture seule dans l’assembly.

Fichier de ressource locale

Vous voulez mettre à jour des données en lecture seule sans recompiler.

Fichier de contenu local

Vous voulez stocker des données propres à l’utilisateur.

Isolated storage

Vous voulez accéder à des données d’un service externe en REST ou en POX.

Classes HTTP

Vous voulez accéder à un flux RSS.

Classes HTTP

Vous voulez accéder à un service SOAP.

Services WCF, en utilisant un proxy

Vous voulez exposer une classe existante à travers un service pour l’utiliser depuis Silverlight.

Services WCF

Vous voulez accéder à des données depuis un service qui expose un flux OData.

WCF Data Services

Vous avez besoin de stocker et lire une grande quantité de données.

Windows Azure storage services

A Voir

 

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

]]> Developpement Windows Phone - partie 16 https://docs.microsoft.com/archive/blogs/jflavidalle/developpement-windows-phone-partie-16 Tue, 06 Sep 2011 13:16:00 GMT https://blogs.msdn.microsoft.com/jflavidalle/2011/09/06/developpement-windows-phone-partie-16/ 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

Vidéo et Audio

Silverlight pour Windows Phone inclut la prise en charge de la lecture de fichiers audio et vidéo files. Ce tutoriel vous montrera comment intégrer ces médias dans vos applications.

Ce tutoriel contient les sections suivantes :

Note

Les exemples fournis dans ce tutoriel 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 ou sur le téléphone lui-même.

 

L’objet MediaElement

Ajouter des médias à une application Silverlight pour Windows Phone est aussi simple que d’ajouter un MediaElement à votre markup et fournir un Uniform Resource Identifier (URI) vers le média devant être lu. Assurez-vous que l’extension du média correspond bien à son contenu, sinon le média ne sera pas lu.

L’exemple suivant créée un MediaElement et affecte l’URI d’un fichier vidéo à sa propriété Source. Note: Si vous ajoutez la vidéo au projet sous Visual Studio, assurez-vous que la propriété de la vidéo soit bien en tant que Ressource. Le MediaElement sera lu lorsque la page sera chargée. Cliquez sur l’exemple pour relancer la lecture de la vidéo.

Note

Lorsque vous ajoutez un MediaElement au XAML, donnez-lui toujours un nom. Sinon, la sécurité de la Media Library ne sera peut-être pas validée pendant la soumission sur le Windows Marketplace. Pour plus d’information, jetez un œil à Security for Windows Phone.

 

XAML
  1. <MediaElement Name="media" Source="Silverlight.wmv" />

Get Microsoft Silverlight

Pour ajouter un fichier vidéo à votre application, effectuez les actions suivantes sous Visual Studio :

1. Sous le menu Project, sélectionnez Add Existing Item.

2. Sélectionnez le fichier vidéo désiré, cliquez ensuite sur Add.

3. Dans le Solution Explorer, sélectionnez le fichier image qui a été ajouté.

4. Dans la fenêtre de Properties, changez la propriété Build Action pour la valeur Resource.

Note

L’objet MediaElement peut lire les Windows Media Video (WMV), Windows Media Audio (WMA), et les fichiers MP3. Pour une liste détaillée des formats et protocole, jetez un œil à Supported Media Codecs for Windows Phone dans la documentation MSDN de Silverlight.

Les propriétés de MediaElement

L’objet MediaElement propose plusieurs propriétés spécifiques aux médias. La liste suivante décrit les propriétés les plus couramment utilisées.

  • AutoPlay: Indique si le MediaElement doit commencer la lecture automatiquement. La valeur par défaut est True.
  • IsMuted: Indique si le MediaElement est joué en silence. Une valeur à True coupe le son du MediaElement. La valeur par défaut est False.
  • Stretch: Indique comment la vidéo doit être étirée pour remplir l’objet MediaElement. Les valeurs possibles sont None, Uniform, UniformToFill, et Fill. La valeur par défaut est Fill. L’image ci-dessous illustre les différentes valeurs possibles de la propriété Stretch.
    clip_image003
  • Volume: Indique le volume de la partie audio de l’objet MediaElement entre 0 et 1, avec 1 étant le plus fort. La valeur par défaut est 0.5.

En plus de ses propriétés spécifiques pour les médias, MediaElement possède aussi toutes les propriétés de UIElement, telle que l’Opacity et Clip. Pour une liste complète des propriétés de MediaElement, jetez un œil à la MediaElement reference page dans la documentation MSDN de Silverlight documentation.

Contrôler la lecture du média

Vous pouvez contrôler la lecture en utilisant les méthodes Play, Pause, et Stop de l’objet MediaElement. Lorsqu’un objet MediaElement est en lecture, toutes les autres lectures de médias sur le téléphone Windows Phone sont arrêtées.

L’exemple suivant créer un objet MediaElement ainsi que les boutons pour arrêter, mettre en pause et lancer la lecture du média. Pour lancer cet exemple, cliquez sur un des boutons contrôlant la lecture du média.

Get Microsoft Silverlight

XAML

XAML
  1. <Grid>
  2.     <Grid.ColumnDefinitions>
  3.         <ColumnDefinition Width="*" />
  4.         <ColumnDefinition Width="*" />
  5.         <ColumnDefinition Width="*"/>
  6.         <ColumnDefinition Width="*"/>
  7.     </Grid.ColumnDefinitions>
  8.     <Grid.RowDefinitions>
  9.         <RowDefinition Height="*" />
  10.         <RowDefinition Height="Auto" />
  11.     </Grid.RowDefinitions>
  12.     <MediaElement x:Name="media"
  13.                   Source="Silverlight.wmv"
  14.                   Grid.Column="0"
  15.                   Grid.Row="0"
  16.                   Grid.ColumnSpan="3" />
  17.     <!-- Stops media playback.-->
  18.     <Button Click="StopMedia"
  19.             Grid.Column="0"
  20.             Grid.Row="1"
  21.             Content="Stop" />
  22.     <!-- Pauses media playback. -->
  23.     <Button Click="PauseMedia"
  24.             Grid.Column="1"
  25.             Grid.Row="1"
  26.             Content="Pause" />
  27.     <!-- Begins media playback. -->
  28.     <Button Click="PlayMedia"
  29.             Grid.Column="2"
  30.             Grid.Row="1"
  31.             Content="Play" />
  32. </Grid>

C#
  1. private void StopMedia(object sender, RoutedEventArgs e)
  2. {
  3.     media.Stop();
  4. }
  5. private void PauseMedia(object sender, RoutedEventArgs e)
  6. {
  7.     media.Pause();
  8. }
  9. private void PlayMedia(object sender, RoutedEventArgs e)
  10. {
  11.     media.Play();
  12. }

Visual Basic
  1. Private Sub StopMedia(sender As Object, e As RoutedEventArgs)
  2.     media.[Stop]()
  3. End Sub
  4. Private Sub PauseMedia(sender As Object, e As RoutedEventArgs)
  5.     media.Pause()
  6. End Sub
  7. Private Sub PlayMedia(sender As Object, e As RoutedEventArgs)
  8.     media.Play()
  9. End Sub

Note

En plus de l’arrêt, la pause ou la lecture du media, vous pouvez aussi effectuer une avance rapide vers un emplacement spécifique en affectant la propriété Position d’un objet MediaElement.

A Voir

 

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

]]> Developpement Windows Phone - partie 13 https://docs.microsoft.com/archive/blogs/jflavidalle/developpement-windows-phone-partie-13 Tue, 06 Sep 2011 13:13:00 GMT https://blogs.msdn.microsoft.com/jflavidalle/2011/09/06/developpement-windows-phone-partie-13/ 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

Publier Votre Application sur le Marketplace

Le Marketplace Windows Phone vous permet de publier vos applications afin que d’autres utilisateurs puissent télécharger et installer vos applications. Vous soumettez votre application pour publication à partir du site App Hub, à ce moment-là votre application va passer par un processus de certification pour assurer qu’elle se conforme bien aux prérequis. Lorsque votre application est certifiée, des pages du marketplace sont générées pour afficher les informations de votre application sur le téléphone et le logiciel Zune.

L’image ci-dessous montre comment une application du marketplace est affichée dans Zune.

clip_image002

Il existe de très nombreuses ressources sur la façon d’utiliser le MarketPlace, ce tutoriel se limitera donc à résumer les conditions clefs et à fournir des pointeurs vers les autres ressources. Si vous avez des questions, vous devriez consulter les ressources officielles listées à la fin de ce tutoriel.

Ce tutoriel contient les sections suivantes :

Procédure de soumission sur le Marketplace

Avant de pouvoir soumettre une application à la publication, vous devez avoir effectué les opérations suivantes :

  • Vous abonner sur le site App Hub. Pour plus d’information, jetez un œil sur membership. Un compte App Hub est aussi nécessaire pour tester votre application sur un téléphone physique.
  • Créer une version définitive, en release de votre application et la tester complètement. Pour plus d’information, jetez un œil sur Deploying and Testing on a Physical Windows Phone Device.
  • Créer les illustrations de votre application qui seront affichées sur le Marketplace, tel que décrit dans la section suivante.
  • Sélectionner une catégorie et une sous-catégorie. Pour plus d’information, jetez un œil sur category lists dans la FAQ.
  • Sélectionner le prix de votre application. Votre application peut être gratuite ou facturée entre 0,99€ et 499,99€, dont vous toucherez 70%. Pour plus d’information, jetez un œil à la FAQ pricing. Vous pouvez aussi proposer une version gratuite d’essai avec l’option d’acheter l’application plus tard. Pour plus d’information, jetez un œil à Creating Trial Applications for Windows Phone.
  • Définir les méta-données suivantes pour votre application : un nom unique, un titre, un numéro de version, une description détaillée, des mots clefs, l’URL du site et de la licence, ainsi que l’adresse email du support. Pour plus d’information, jetez un œil à App Hub Application Submission Walkthrough.

Lorsque vous aurez complété ces tâches, vous pourrez soumettre votre application, ses images et metadatas en utilisant la submission page du site AppHub. Si vous avez préparé tous les prérequis, la procédure de soumission ne devrait pas prendre beaucoup de temps. Toutefois, il n’est pas nécessaire de dérouler la totalité de la procédure en une seule fois ; App Hub sauvegardera votre avancement à chaque étape.

Si votre application n’est pas conforme au prérequis de certification, vous recevrez par email un rapport détaillant les problèmes rencontrés pour que vous puissiez les corriger et soumettre à nouveau votre application. Si l’application passe le test de validation, elle sera publiée automatiquement si vous avez choisi cette option à la dernière étape de la procédure de soumission. Sinon, vous pouvez publier votre application quand vous le souhaitez depuis votre app list.

Vous pouvez suivre le nombre de teléchargement de votre application depuis la page des rapports. Pour plus d’information, jetez un œil à reporting FAQ. Si vous vendez votre application, vous recevrez un paiement mensuel tant que vous dépassez le palier de 200€. Pour plus d’information, jetez un œil à la FAQ de paiement.

Images de l’Application

Lorsque vous soumettez votre application, vous pouvez fournir plusieurs images pour illustrer la page marketplace de votre application. Ces images sont la première impression que les utilisateurs potentiels recevront, passez donc suffisamment de temps à vous assurer qu’elles sont esthétiques. Vous pouvez trouver des artwork gratuits sur Internet ou en faire créer par un designer.

Vous aurez besoin des images suivantes pour la page marketplace de votre application.

Note

N’utilisez pas d’images PNG transparentes pour ces images.

 

Image

Taille (pixels)

Format

Petite icône de votre application. C’est l’icône qui sera utilisée pour afficher votre application dans la liste des applications du téléphone.

Grande icône de votre application. C’est l’icône qui sera utilisée pour afficher votre application lorsque l’utilisateur épingle votre application sur l’écran principal du téléphone.

99 x 99

173 x 173

PNG

PNG

Grande image utilisée pour l’affichage de votre page marketplace.

200 x 200

PNG

Image de fond de votre page marketplace.

1000 x 800

PNG

Captures d’écrans de votre application (au minimum 1, mais jusqu’à 8) pour illustrer votre page marketplace.

480 x 800

PNG

Pour plus d’information sur la création de captures d’écran en utilisant l’émulateur Windows Phone, jetez un œil à How to: Create Screenshots for Windows Phone Marketplace.

Information Additionnelle

Pour plus de détails sur n’importe quel aspect de la soumission d’application, la certification, l’hébergement, le marketing, les mises à jour, la procédure de paiement ainsi que le reporting, jetez un œil aux ressources suivantes :

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

]]> Developpement Windows Phone - partie 10 https://docs.microsoft.com/archive/blogs/jflavidalle/developpement-windows-phone-partie-10 Tue, 06 Sep 2011 13:10:00 GMT https://blogs.msdn.microsoft.com/jflavidalle/2011/09/06/developpement-windows-phone-partie-10/ 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

Navigation

La navigation dans Windows Phone peut être définie comme la capacité qu’à l’utilisateur d’avancer dans différentes pages de contenu. Le modèle de navigation dans Windows Phone vous permet de créer des applications basées sur des vues qui possèdent le même look and feel que Windows Phone. Ce tutoriel vous montre comment créer une navigation entre différentes pages dans vos applications.

Ce tutorial contient les sections suivantes :

 

Frames et Pages

L’expérience de navigation dans Windows Phone est similaire à l’expérience de navigation en Silverlight, mais elle a été étendue pour supporter des scénarios spécifiques au téléphone. Le modèle de navigation dans Windows Phone est basé sur un contrôle PhoneApplicationFrame. PhoneApplicationFrame contient un ou plusieurs contrôles PhoneApplicationPage entre lesquels l’utilisateur peut naviguer. PhoneApplicationFrame est le contrôle de navigation principal et supporte la navigation depuis et vers une page. PhoneApplicationPage encapsule le contenu qui peut être navigué à travers un PhoneApplicationFrame.

clip_image004[1]

Une page est une collection d’états persistants. Il peut être considéré comme une page Silverlight qui contient du contenu ou des liens vers d’autres pages. Une application peut aussi contenir des pop-ups, des boites de dialogue, un écran de login, ou un splash screen qui contient usuellement un état persistant.

Seulement se déplacer entre deux pages est considéré comme de la navigation dans Windows Phone. Se déplacer d’une page de login ou d’un splash screen à la Home page n’est pas considéré comme de la navigation et ne peut donc être considéré comme une transition.

 

Navigation entre Pages

La façon la plus simple de mettre en place une navigation par page est d’utiliser un contrôle HyperlinkButton . Vous pouvez utiliser se propriété NavigationUri pour naviguer vers une page. L’exemple suivant illustre comment naviguer vers une page nommée SecondPage.xaml.

XAML
  1. <HyperlinkButton NavigateUri="SecondPage.xaml" />

Si vous ne souhaitez pas utiliser un HyperlinkButton, vous pouvez mettre en place une navigation en utilisant la classe NavigationService. Cette classe contient plusieurs propriétés, méthodes et évènements qui vous aideront avec la navigation. Vous pouvez utiliser la méthode NavigationService.Navigate pour naviguer vers une page spécifique. Pour naviguer depuis une page vers une autre page, effectuez les étapes suivantes.

1. Créez une application Windows Phone dans Visual Studio.

2. Ajoutez une page Windows Phone en mode portrait nommée SecondPage.xaml vers laquelle vous pourrez naviguer depuis MainPage.

3. Utilisez la méthode NavigationService.Navigate pour naviguer vers SecondPage.xaml.

4. Utilisez la méthode NavigationService.GoBack pour revenir à MainPage.xaml.

L’exemple suivant crée deux pages appelées home page et second.page. Vous pouvez naviguer depuis la home page vers la seconde page en cliquant sur le bouton Go to the second page dans la home page. Ceci est fait en utilisant la méthode NavigationService.Navigate avec l’URI de la seconde page (qui est /SecondPage.xaml) dans l’évènement du Click du bouton. Vous pouvez revenir à la home page en cliquant sur le bouton "Go Back to Main Page" dans la seconde page. Ceci est fait en appelant la méthode NavigationService.GoBack dans l’évènement du click du bouton. La méthode NavigationService.GoBack navigue vers l’entrée la plus récente dans l’historique de navigation, dans notre cas, la home page. Avant d’appeler la méthode NavigationService.GoBack, vous devez vérifier la valeur de la propriété NavigationService.CanGoBack pour déterminer s’il existe des éléments dans l’historique de navigation.

Astuce

Bien que la méthode NavigationService.GoBack ait été utilisée dans notre exemple pour revenir à la home page, un clic sur le bouton Retour du téléphone navigue lui aussi vers la page précédente.

XAML pour MainPage.xaml
  1. <Grid x:Name="LayoutRoot" Background="Transparent">
  2.     <Grid.RowDefinitions>
  3.         <RowDefinition Height="Auto"/>
  4.         <RowDefinition Height="*"/>
  5.     </Grid.RowDefinitions>
  6.     <!--TitlePanel contains the name of the application and page title-->
  7.     <StackPanel x:Name="TitlePanel" Grid.Row="0"
  8.                 Margin="12,17,0,28">
  9.         <TextBlock x:Name="ApplicationTitle" Text="Navigation"
  10.                    Style="{StaticResource PhoneTextNormalStyle}"/>
  11.         <TextBlock x:Name="PageTitle" Text="home page"
  12.                    Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
  13.     </StackPanel>
  14.     <!--ContentPanel - place additional content here-->
  15.     <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
  16.         <Button x:Name="MyButton" Height="100" Width="350"
  17.                 Click="MyButton_Click" Content="Go to Second Page"/>
  18.     </Grid>
  19. </Grid>

 

C# pour MainPage.xaml.cs
  1. private void MyButton_Click(object sender, RoutedEventArgs e)
  2. {
  3.     NavigationService.Navigate(new Uri("/SecondPage.xaml",
  4.     UriKind.RelativeOrAbsolute));
  5. }

Visual Basic pour MainPage.xam
  1. Private Sub MyButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
  2.     NavigationService.Navigate(New Uri("/SecondPage.xaml", UriKind.RelativeOrAbsolute))
  3. End Sub

XAML pour SecondPage.xaml
  1. <Grid x:Name="LayoutRoot" Background="Transparent">
  2.     <Grid.RowDefinitions>
  3.         <RowDefinition Height="Auto"/>
  4.         <RowDefinition Height="*"/>
  5.     </Grid.RowDefinitions>
  6.     <!--TitlePanel contains the name of the application and page title-->
  7.     <StackPanel x:Name="TitlePanel" Grid.Row="0"
  8.                 Margin="12,17,0,28">
  9.         <TextBlock x:Name="ApplicationTitle" Text="Navigation"
  10.                    Style="{StaticResource PhoneTextNormalStyle}"/>
  11.         <TextBlock x:Name="PageTitle" Text="second page"
  12.                    Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
  13.     </StackPanel>
  14.     <!--ContentPanel - place additional content here-->
  15.     <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
  16.         <Button x:Name="BtnBack" Content="Go Back to Home Page"
  17.                 Click="BtnBack_Click" Height="100" Width="350"/>
  18.     </Grid>
  19. </Grid>

C# pour SecondPage.xaml.cs
  1. private void BtnBack_Click(object sender, RoutedEventArgs e)
  2. {
  3.     if (NavigationService.CanGoBack)
  4.         NavigationService.GoBack();
  5. }

Visual Basic pour SecondPage.x
  1. Private Sub BtnBack_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
  2.     If NavigationService.CanGoBack Then
  3.         NavigationService.GoBack()
  4.     End If
  5. End Sub

L’illustration ci-dessous montre la home page et la seconde page de l’exemple précédent. La navigation est mise en place à travers l’utilisation des méthodes NavigationService.Navigate et NavigationService.GoBack.

clip_image006

Transmettre des données entre Pages

Souvent, vous aurez besoin de passer des données d’une page à une autre lors de la navigation entre ces pages. Par exemple, vous aurez peut-être besoin de transmettre le texte saisi par l’utilisateur sur la home page pour l’afficher dans la seconde page. Vous pouvez utiliser la méthode NavigationService.Navigate pour naviguer vers la seconde page et passer la chaine de caractère entrée dans la home page à la seconde page dans l’URI en utilisant une query string. Vous pouvez alors surcharger la méthode Page.OnNavigatedTo dans SecondPage.xaml.cs pour analyser le requête de navigation venue de la home page et en extraire la string data. L’exemple suivant illustre le passage de donnée d’un page à une autre en utilisant les méthodes NavigationService.Navigate et Page.OnNavigatedTo.

XAML pour MainPage.xaml
  1. <Grid x:Name="LayoutRoot" Background="Transparent">
  2.     <Grid.RowDefinitions>
  3.         <RowDefinition Height="Auto"/>
  4.         <RowDefinition Height="*"/>
  5.     </Grid.RowDefinitions>
  6.     <!--TitlePanel contains the name of the application and page title-->
  7.     <StackPanel x:Name="TitlePanel" Grid.Row="0"
  8.                 Margin="12,17,0,28">
  9.         <TextBlock x:Name="ApplicationTitle" Text="Navigation"
  10.                    Style="{StaticResource PhoneTextNormalStyle}"/>
  11.         <TextBlock x:Name="PageTitle" Text="home page"
  12.                    Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
  13.     </StackPanel>
  14.     <!--ContentPanel - place additional content here-->
  15.     <StackPanel x:Name="ContentPanel" Grid.Row="1"
  16.                 Margin="12,0,12,0">
  17.         <TextBox x:Name="MyTB" Height="80"
  18.                  Width="350" />
  19.         <Button x:Name="MyButton" Content="Go to Second Page"
  20.                 Height="80" Width="350" Click="MyButton_Click"/>
  21.     </StackPanel>
  22. </Grid>

C# pour MainPage.xaml.cs
  1. private void MyButton_Click(object sender, RoutedEventArgs e)
  2. {
  3.     NavigationService.Navigate(new Uri("/SecondPage.xaml?msg=" +
  4.     MyTB.Text, UriKind.RelativeOrAbsolute));
  5. }

Visual Basic pour MainPage.xam
  1. Class MainWindow
  2.     Private Sub MyButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
  3.         NavigationService.Navigate(New Uri(("/SecondPage.xaml?msg=" + MyTB.Text), UriKind.RelativeOrAbsolute))
  4.     End Sub

XAML pour SecondPage.xaml
  1. <Grid x:Name="LayoutRoot" Background="Transparent">
  2.     <Grid.RowDefinitions>
  3.         <RowDefinition Height="Auto"/>
  4.         <RowDefinition Height="*"/>
  5.     </Grid.RowDefinitions>
  6.     <!--TitlePanel contains the name of the application and page title-->
  7.     <StackPanel x:Name="TitlePanel" Grid.Row="0"
  8.                 Margin="12,17,0,28">
  9.         <TextBlock x:Name="ApplicationTitle" Text="Navigation"
  10.                    Style="{StaticResource PhoneTextNormalStyle}"/>
  11.         <TextBlock x:Name="PageTitle" Text="second page"
  12.                    Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
  13.     </StackPanel>
  14.     <!--ContentPanel - place additional content here-->
  15.     <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
  16.         <TextBlock x:Name="MyTBl" FontSize="25"/>
  17.     </Grid>
  18. </Grid>

C# pour SecondPage.xaml.cs
  1.  
  2. protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
  3. {
  4.     base.OnNavigatedTo(e);
  5.     string msg = "";
  6.     if (NavigationContext.QueryString.TryGetValue("msg", out msg))
  7.         MyTBl.Text = msg;
  8. }

Visual Basic pour SecondPage.x
  1. Protected Overrides Sub OnNavigatedTo(ByVal e As System.Windows.Navigation.NavigationEventArgs)
  2.     MyBase.OnNavigatedTo(e)
  3.     Dim msg As String = ""
  4.     If NavigationContext.QueryString.TryGetValue("msg", msg) Then
  5.         MyTBl.Text = msg
  6.     End If
  7. End Sub

L’illustration ci-dessous montre la home page et la second page de l’exemple précédent. La chaine de caractère saisie dans la zone de saisie est passée à la seconde page, qui l’affiche dans un text block.

clip_image008

Astuce

Pour les pages qui affichent plusieurs sections de contenu, vous pouvez afficher différents sets de contenu sans utiliser de mécanisme de navigation tout simplement en re-binding les contrôles de votre page sur un nouveau DataContext.

 

Application Bar

L’Application Bar est un ensemble de un à quatre boutons qui peut être affiché au bas de l’écran du téléphone en mode portrait ou sur le côté en mode paysage. Il s’agit du menu système qui est utilisé dans Windows Phone 7, et les boutons de l’Application Bar sont utilisés pour fournir à l’utilisateur un accès rapide aux fonctions les plus utilisées de l’application.

L’illustration ci-dessous montre une Application Bar dans Windows Phone 7, dans son état déplié.

clip_image010

Les boutons avec une icône dans l’Application Bar sont appelés icon buttons. Vous pouvez avoir un maximum de quatre icon buttons. Si vous essayez d’ajouter plus de quatre icon buttons une exception sera levée au démarrage de votre application. L’ ellipsis dans le coin en haut à droite de l’Application Bar est utilisé pour déplier et replier l’ Application Bar. Le texte des icon buttons n’apparait que si l’ Application Bar est dans son état déplié. Vous pouvez utiliser l’évènement Click pour exécuter l’action lorsque l’utilisateur clique sur l’icon button.

En plus de la ligne d’icon buttons, l’Application Bar peut aussi fournir un ou plusieurs éléments de menu basés sur du texte. Ces éléments sont affichés en tant que liste sous les icon buttons lorsque l’utilisateur clique sur l’ ellipsis à droite des icon buttons ou sur l’espace vide à gauche des icon buttons. Dans l’illustration précédente, about et settings sont des éléments de menu. Cette liste de menu n’est pas hiérarchique, il ne s’agit donc pas d’un sous-menu de l’icon buttons. Les éléments de menu sont plutôt utilisés pour les actions de l’application qui sont utilisées moins fréquemment et pour les actions qui sont plus difficiles à représenter par une icône et qui nécessitent donc une représentation textuelle.

L’illustration ci-dessous montre l’Application Bars en état plié et déplié. Avec et sans élément de menu.

clip_image012

Vous pouvez ajouter une Application Bar à votre application Windows Phone en utilisant le classe ApplicationBar. Vous pouvez ajouter l’ Application Bar soit depuis le XAML ou depuis le C#. Si vous choisissez de créer l’ Application Bar entièrement en XAML, le template de projet Windows Phone qui est fourni avec les Windows Phone Developer Tools inclut une implémentation de l’ Application Bar dans le fichier MainPage.xaml. Tout ce que vous avez besoin de faire c’est de décommenter la définition de l’ Application Bar et de modifier le code pour utiliser les icônes et les menus textuels que vous souhaitez.

Dans l’exemple suivant le template de l’Application Bar par défaut a été modifié pour créer trois icon buttons (new, folders, et sync) et deux éléments de menu (settings et add email account).

XAML
  1. <phone:PhoneApplicationPage.ApplicationBar>
  2.     <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
  3.         <shell:ApplicationBarIconButton x:Name="newButton"
  4.                                         IconUri="/Images/appbar.new.rest.png" Text="new"
  5.                                         Click="newButton_Click"/>
  6.         <shell:ApplicationBarIconButton x:Name="folderButton"
  7.                                         IconUri="/Images/appbar.folder.rest.png" Text="folders"
  8.                                         Click="folderButton_Click"/>
  9.         <shell:ApplicationBarIconButton x:Name="syncButton"
  10.                                         IconUri="/Images/appbar.refresh.rest.png" Text="sync"
  11.                                         Click="syncButton_Click"/>
  12.         <shell:ApplicationBar.MenuItems>
  13.             <shell:ApplicationBarMenuItem Text="settings"/>
  14.             <shell:ApplicationBarMenuItem Text="add email account"/>
  15.         </shell:ApplicationBar.MenuItems>
  16.     </shell:ApplicationBar>
  17. </phone:PhoneApplicationPage.ApplicationBar>

L’illustration montre le résultat de l’exemple précédent.

clip_image014

Notez que l’exemple précédent utilise des images pour les icon buttons. Pour des guidelines sur la création d’images des icon buttons des Application Bar, et une liste d’images prête que vous pouvez utiliser dans vos applications, jetez un œil sur Application Bar Best Practices for Windows Phone.

L’Application Bar n’est pas un contrôle Silverlight et ne supporte pas le data binding. Cela signifie que les chaines de caractères utilisées par les labels des boutons doivent être définies en dur dans le XAML et ne peuvent être localisées. Si vous prévoyez de localiser votre application ou si vous êtes plus à l’aise en C#, vous pouvez créer l’Application Bar depuis le code, ou utiliser le C# pour modifier par code les valeurs des textes au moment de l’exécution.

L’exemple suivant montre comment créer une Application Bar par code. Tout d’abord, vous créez l’Application Bar en utilisant la classe ApplicationBar. Vous pouvez alors créer les icon buttons en utilisant la classe ApplicationBarIconButton et ajouter ces icon buttons à l’Application Bar en utilisant la méthode ApplicationBar.Buttons.Add. Vous pouvez créer des éléments de menu en utilisant ApplicationBarMenuItem et ajouter ces derniers à l’Application Bar en utilisant la méthode ApplicationBar.MenuItems.Add.

C#
  1. public void MainPage()
  2. {
  3.     InitializeComponent();
  4.     //Create the ApplicationBar
  5.     ApplicationBar = new ApplicationBar();
  6.     ApplicationBar.IsVisible = true;
  7.     ApplicationBar.IsMenuEnabled = true;
  8.     //Create the icon buttons and setting its properties
  9.     ApplicationBarIconButton newButton = new ApplicationBarIconButton(new Uri
  10.     ("/Images/appbar.add.rest.png", UriKind.Relative));
  11.     newButton.Text = "new";
  12.     newButton.Click += new EventHandler(newButton_Click);
  13.     ApplicationBarIconButton folderButton = new ApplicationBarIconButton(new Uri
  14.     ("/Images/appbar.folder.rest.png", UriKind.Relative));
  15.     folderButton.Text = "folders";
  16.     folderButton.Click += new EventHandler(folderButton_Click);
  17.     ApplicationBarIconButton syncButton = new ApplicationBarIconButton(new Uri
  18.     ("/Images/appbar.sync.rest.png", UriKind.Relative));
  19.     syncButton.Text = "sync";
  20.     syncButton.Click += new EventHandler(syncButton_Click);
  21.     //Add the icon buttons to the Application Bar
  22.     ApplicationBar.Buttons.Add(newButton);
  23.     ApplicationBar.Buttons.Add(folderButton);
  24.     ApplicationBar.Buttons.Add(syncButton);
  25.     //Create menu items
  26.     ApplicationBarMenuItem settingsMenuItem = new ApplicationBarMenuItem
  27.     ("settings");
  28.     settingsMenuItem.Click += new EventHandler(settingsMenuItem_Click);
  29.     ApplicationBarMenuItem addaccountMenuItem = new ApplicationBarMenuItem
  30.     ("add email account");
  31.     addaccountMenuItem.Click += new EventHandler(addaccountMenuItem_Click);
  32.     //Add the menu items to the Application Bar
  33.     ApplicationBar.MenuItems.Add(settingsMenuItem);
  34.     ApplicationBar.MenuItems.Add(addaccountMenuItem);
  35. }

Visual Basic
  1. {publicMainPage
  2. InitializeComponent
  3. 'Create the ApplicationBar
  4. ApplicationBar = New ApplicationBar
  5. ApplicationBar.IsVisible = true
  6. ApplicationBar.IsMenuEnabled = true
  7. 'Create the icon buttons and set its properties
  8. Dim newButton As ApplicationBarIconButton = New ApplicationBarIconButton(New Uri("/Images/appbar.add.rest.png", UriKind.Relative))
  9. newButton.Text = "new"
  10. AddHandler newButton.Click, AddressOf Me.newButton_Click
  11. Dim folderButton As ApplicationBarIconButton = New ApplicationBarIconButton(New Uri("/Images/appbar.folder.rest.png", UriKind.Relative))
  12. folderButton.Text = "folders"
  13. AddHandler folderButton.Click, AddressOf Me.folderButton_Click
  14. Dim syncButton As ApplicationBarIconButton = New ApplicationBarIconButton(New Uri("/Images/appbar.sync.rest.png", UriKind.Relative))
  15. syncButton.Text = "sync"
  16. AddHandler syncButton.Click, AddressOf Me.syncButton_Click
  17. 'Add the icon buttons to the Application Bar
  18. ApplicationBar.Buttons.Add(newButton)
  19. ApplicationBar.Buttons.Add(folderButton)
  20. ApplicationBar.Buttons.Add(syncButton)
  21. 'Create menu items
  22. Dim settingsMenuItem As ApplicationBarMenuItem = New ApplicationBarMenuItem("settings")
  23. AddHandler settingsMenuItem.Click, AddressOf Me.settingsMenuItem_Click
  24. Dim addaccountMenuItem As ApplicationBarMenuItem = New ApplicationBarMenuItem("add email account")
  25. AddHandler addaccountMenuItem.Click, AddressOf Me.addaccountMenuItem_Click
  26. 'Add the menu items to the Application Bar
  27. ApplicationBar.MenuItems.Add(settingsMenuItem)
  28. ApplicationBar.MenuItems.Add(addaccountMenuItem)

L’Application Bar peut être définie localement ou globalement. Une Application Bar locale peut être seulement utilisée par la page qui le défini. Cette approche est utile si différentes pages de votre application possèdent différentes actions possibles. Par exemple, si vous créez une application d’email, la page de la boite de réception va sans doute avoir des actions telles que create new email et sync, et la page d’un nouvel email va avoir des actions comme send ou delete. Il est donc censé d’avoir des Application Bar différentes pour la page de la boite de réception et celle d’un nouvel email.

Une Application Bar global peut être partagée entre les différentes pages de votre application. Une Application Bar global est créée en tant que ressource d’application dans le fichier App.xaml. Pour créer une Application Bar global, vous devrez effectuer les actions suivantes.

  • Ajouter la définition XAML de l’Application Bar dans la section <Application.Resources> du fichier App.xaml.
  • Ajouter l’attribut suivant dans le nœud <phone:PhoneApplicationPage> de chaque page dans laquelle vous voudrez utiliser l’ Application Bar :
XAML
  1. ApplicationBar="{StaticResource GlobalAppMenuBar}"

Pour plus d’information sur l’ Application Bar, jetez un œil au Application Bar for Windows Phone.

Bouton Retour

Chaque téléphone Windows Phone inclut un bouton physique Retour. Ce bouton permet à l’utilisateur de naviguer vers la page précédente d’un application et vers d’autres applications. Par exemple, vous pouvez cliquer sur un lien dans une de votre application d’emails pour ouvrir un web browser, et appuyer tout naturellement sur le bouton physique Retour pour retourner dans votre application d’emails. Ceci permet une expérience utilisateur bien plus consistante à travers différentes applications, qu’elles soient des applications externes ou inclut dans le Windows Phone. Windows Phone permet cela en maintenant un historique de vos actions de navigation. Ceci est aussi appelé back-stack.

L’illustration suivante montre le bouton physique de bouton Retour, le bouton Démarrer, et le bouton Rechercher.

clip_image016

Vous pouvez surcharger le bouton Retour pour le personnaliser et faire ce que vous souhaitez. Toutefois, lorsque vous faites cela, vous devez garder à l’esprit ce que l’utilisateur considère comme "retour". Par exemple, si vous affichez une boite de dialogue dans votre application, vous avez peut-être surchargé l’action retour pour sortir de l’application, mais l’utilisateur s’attend peut être à fermer uniquement la boite de dialogue.

Vous pouvez surcharger le comportement du bouton Retour en surchargeant la méthode PhoneApplicationPage.OnBackKeyPress.

L’exemple suivant contient un text box. Si vous saisissez du texte dans le text box et que vous appuyez sur le bouton physique Retour, une boite de dialogue s’affiche avec le message "You are about to discard your changes. Continue". Ce comportement est implémenté en surchargeant la méthode PhoneApplicationPage.OnBackKeyPress.

C#
  1. protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)
  2. {
  3.     base.OnBackKeyPress(e);
  4.     if (MyTB.Text != string.Empty)
  5.     {
  6.         var result = MessageBox.Show("You are about to discard your changes. Continue?",
  7.         "Warning", MessageBoxButton.OKCancel);
  8.         if (result != MessageBoxResult.OK)
  9.         {
  10.             e.Cancel = true;
  11.         }
  12.     }
  13. }

Visual Basic
  1. Protected Overrides Sub OnBackKeyPress(ByVal e As System.ComponentModel.CancelEventArgs)
  2.     MyBase.OnBackKeyPress(e)
  3.     If (MyTB.Text <> String.Empty) Then
  4.         Dim result As var = MessageBox.Show("You are about to discard your changes. Continue?", "Warning", MessageBoxButton.OKCancel)
  5.         If (result <> MessageBoxResult.OK) Then
  6.             e.Cancel = True
  7.         End If
  8.     End If
  9. End Sub

L’illustration ci-dessous montre le résultat de l’exemple précédent. Si l’utilisateur appuie sur le bouton Retour alors qu’il y a du texte dans le text box, un message s’affiche.

clip_image018

Gardez ces bonnes pratiques à l’esprit lorsque vous surchargez le bouton Retour :

  • Pensez à ce que "retour" signifie pour l’utilisateur dans le contexte de l’application.
  • Si l’utilisateur appuie sur le bouton Retour une deuxième fois, vous devez laisser le comportement par défaut s’effectuer.
  • Essayez de ne pas trop utiliser les boutons Retour pour les navigations locales.
  • Pour implémenter des interfaces transitoires, comme un écran de login, utilisez le contrôle de Popup de Silverlight pour afficher du contenu qui couvre une partie de l’écran au lieu d’implémenter une page séparée qui nécessite une navigation. Vous pouvez ajouter la méthode PhoneApplicationPage.OnBackKeyPress à votre code et affecter true à e.Cancel (comme montré dans l’exemple précédent) pendant que la pop-up est visible pour permettre à l’utilisateur d’utiliser le bouton Retour pour fermer la pop-up.

 

A voir

 

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

]]> Developpement Windows Phone - partie 7 https://docs.microsoft.com/archive/blogs/jflavidalle/developpement-windows-phone-partie-7 Tue, 06 Sep 2011 13:07:00 GMT https://blogs.msdn.microsoft.com/jflavidalle/2011/09/06/developpement-windows-phone-partie-7/ 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

Disposition à l’écran

Silverlight pour Windows Phone 7 fournit un système de layout qui permet de spécifier comment les contrôles sont disposés à l’écran. Ce tutoriel décrit comment construire une interface utilisateur qui s’adapte automatiquement aux différentes résolutions d’écran.

Ce tutorial contient les sections :

 

Aperçu des Layout

Le Layout (mise en page) est le processus de dimensionnement et de positionnement des objets dans vos applications Silverlight pour Windows Phone. Pour disposer des objets visuels, vous devez les placer dans un contrôle Panel ou dans un autre container d’objets. Silverlight offre de nombreux contrôles de Panel comme le Canvas, le StackPanel, et le Grid, qui servent de containers pour placer et positionner et les contrôles.

Le système de Layout de Silverlight pour Windows Phone supporte le système de positionnement absolu et le positionnement dynamique. Dans un positionnement absolu, les contrôles sont positionnés selon des coordonnées x/y explicites (par exemple en utilisant un Canvas). Dans un positionnement dynamique, l’interface utilisateur se redimensionne automatiquement en fonction de l’espace disponible (par exemple, en utilisant un StackPanel ou un Grid).

 

Layout Absolu

Dans un positionnement en Layout Absolu, les éléments sont placés dans le panel de Layout à une position exacte relative à leur élément parent. Le positionnement absolu ne prend pas en compte la place disponible à l’écran. Si votre application nécessite un positionnement absolu des éléments graphiques, vous devrez désigner plusieurs écrans selon leurs tailles ou utiliser une mise à l’échelle comme alternative.

Silverlight pour Windows Phone fournit un contrôle de Canvas qui supporte le positionnement absolu. Par défaut, lorsque vous créez un projet d’application, le layout panel utilisé est un Grid. Pour créer un layout utilisant le positionnement absolu, vous devez remplacer ce Grid par un Canvas.

Pour disposer des contrôles dans un Canvas, vous devez préciser les attached properties suivantes sur le contrôle lui-même. Lorsque vous utilisez le designer dans Visual Studio, ces propriétés sont mises à jour lorsque vous déplacez les contrôles sur la surface de design.

 

 

Positionnement Dynamique

Lorsque vous utilisez le positionnement dynamique, l’interface utilisateur s’affiche quel que soit la résolution de l’écran. Vous disposez les contrôles enfants en précisant comment ils doivent être disposés et comment ils doivent effectuer un retour à la ligne par rapport à leur parent. Par exemple, vous pouvez disposer des contrôles dans un panel et préciser qu’ils doivent s’afficher de façon horizontale. Pour utiliser le redimensionnement automatique ou proportionnel, vous devez spécifier les valeurs des propriétés Height et Width. Voici les paramètres recommandés pour un positionnement dynamique :

  • Affecter la valeur Auto aux propriétés Height et Width du contrôle. Lorsque vous utilisez cette valeur pour des contrôles contenus dans un layout par Grid, le contrôle va remplir la totalité de l’espace disponible dans la cellule le contenant. Le dimensionnement Auto est supporté par les contrôles, le Grid et le StackPanel.
  • Pour les contrôles qui contiennent du texte, supprimez les valeurs des propriétés Height et Width, et précisez les valeurs des propriétés MinWidth ou MinHeight. Ceci empêchera le texte de se compresser à une taille qui le rendrait illisible.
  • Pour affecter des tailles proportionnelles pour les éléments RowDefinition et ColumnDefinition dans un Grid, utilisez les valeurs relatives Height et Width. Par exemple, pour spécifier qu’une colonne est cinq fois plus large qu’un autre, utilisez "*" et "5*" pour les propriétés Width des éléments ColumnDefinition.

Dimensionnement Auto et Star

Le dimensionnement Auto est utilisé pour permettre aux contrôles de prendre toute la place disponible dans leur conteneur, même si le conteneur change de taille. Le dimensionnement Starest utilisé pour répartir l’espace disponible entre plusieurs ligne et colonnes d’une grille en fonction de coefficients. En XAML, la valeur star est indiqués par * (ou n*). Par exemple, si vous disposez d’une grille avec quatre colonnes, vous pouvez affecter les valeurs suivantes en largeur de colonnes :

Column_1

Auto

La colonne va se redimensionner en fonction de son contenu.

Column_2

*

Une fois que la largeur des colonnes Auto a été calculée, la colonne prend une partie de l’espace restant. La Column_2 sera deux fois moins large que la Column_4.

Column_3

Auto

La colonne va se redimensionner en fonction de son contenu.

Column_4

2*

Une fois que la largeur des colonnes Auto a été calculée, la colonne prend une partie de l’espace restant. La Column_4 sera deux fois moins plus que la Column_2.

Pour plus d’information sur le dimensionnement Auto et Star, jetez un œil à l’énumération GridUnitType.

 

Contrôles de Panel

Les contrôles de Layout fournis avec Silverlight pour Windows Phone sont le Canvas, le StackPanel, et le Grid.

Canvas

Le Canvas définit une zone dans laquelle vous pouvez explicitement positionner des éléments enfants par des coordonnées relatives à la zone délimitée par le Canvas. Le Canvas est utile pour des scenarios dans lesquels les éléments de l’interface qu’il contient ne bougeront jamais.

Vous pouvez positionner un contrôle dans un Canvas en précisant ses coordonnées x et y. Les coordonnées x et y sont spécifiées en utilisant les propriétés attachées Canvas.Left et Canvas.Top. Canvas.Left indique la distance entre l’objet et la bordure gauche du Canvas (la coordonnée x), et le Canvas.Top indique la distance entre l’objet et la bordure du haut du Canvas (la coordonnée y).

Le XAML suivant illustre le positionnement d’un rectangle à 30 pixels de la gauche et à 200 pixels du haut d’un Canvas.

 

XAML
  1. <Canvas Background="Transparent">
  2.     <Rectangle Canvas.Left="30" Canvas.Top="200"
  3.                Fill="red" Width="200" Height="200" />
  4. </Canvas>

Ce XAML produit quelque chose similaire à cette illustration.

clip_image004

StackPanel

Le StackPanel est un contrôle de layout simple qui dispose les éléments enfants selon une ligne qui peut être orientée horizontalement ou verticalement. Vous pouvez utiliser la propriété Orientation pour préciser la direction que doivent prendre les éléments enfants. Par défaut, la propriété Orientation est à la valeur Vertical. Les StackPanels sont typiquement utilisés dans des scenarios dans lesquels vous voulez mettre en page une petite sous-partie de votre interface.

Le XAML suivant illustre la création d’un StackPanel vertical.

 

XAML
  1. <StackPanel Margin="20">
  2.     <Rectangle Fill="Red" Width="50" Height="50" Margin="5" />
  3.     <Rectangle Fill="Blue" Width="50" Height="50" Margin="5" />
  4.     <Rectangle Fill="Green" Width="50" Height="50" Margin="5" />
  5.     <Rectangle Fill="Purple" Width="50" Height="50" Margin="5" />
  6. </StackPanel>

Ce XAML produit quelque chose similaire à cette illustration.

clip_image006

Grid

Le contrôle Grid est le plus flexible des contrôles de layout, il supporte le positionnement des contrôles dans des layout multi-lignes ou multi colonnes. Vous pouvez spécifier les lignes et colonnes d’un Grid en utilisant les propriétés Grid.RowDefinitions et Grid.ColumnDefinitions déclarées directement dans le contrôle Grid. Vous pouvez positionner un contrôle dans une cellule spécifique du Grid en utilisant les propriétés attachées Grid.Column et Grid.Row. Vous pouvez répartir la place disponible entre les colonnes et les lignes en utilisant le dimensionnement Auto ou Star. Le dimensionnement Auto et Star ont été expliqués plus tôt dans ce tutoriel. Le contenu peut s’étendre que plusieurs lignes ou colonnes en utilisant les propriétés attachées RowSpan et ColumnSpan.

Les éléments enfants d’un Grid sont dessinés dans leur ordre d’apparition dans le markup ou dans le code. Ainsi, il est possible de définir l’ordre de profondeur (aussi appelé z-index) pour des éléments qui ont les mêmes coordonnées. Pour plus d’information, jetez un œil au ZIndex.

Le XAML suivant illustre la création d’un Grid de trois lignes et de deux colonnes. La hauteur de la première et de la troisième des lignes est juste assez haute pour afficher le texte. La taille de la deuxième ligne remplit le reste de l’espace disponible. La largeur du conteneur est partagée équitablement entre toutes les colonnes.

 

XAML
  1. <Grid ShowGridLines="True" Margin="12,0,12,0">
  2.     <Grid.RowDefinitions>
  3.         <RowDefinition Height="auto" />
  4.         <RowDefinition />
  5.         <RowDefinition Height="auto" />
  6.     </Grid.RowDefinitions>
  7.     <Grid.ColumnDefinitions>
  8.         <ColumnDefinition Width="*" />
  9.         <ColumnDefinition Width="*" />
  10.     </Grid.ColumnDefinitions>
  11.     <TextBox Text="1st row 1st column" TextWrapping="Wrap" Grid.Column="0" Grid.Row="0" />
  12.     <TextBox Text="3rd row 1st column" TextWrapping="Wrap" Grid.Column="0" Grid.Row="2" />
  13.     <Button Content="1st row 3rd column" FontSize="17" Grid.Column="1" Grid.Row="0" />
  14.     <Button Content="3rd row 2nd column" FontSize="17" Grid.Column="1" Grid.Row="2" />
  15. </Grid>

Ce XAML produit quelque chose similaire à cette illustration.

clip_image008

Si vous créez un layout complexe qui n’est pas facilement réalisable avec un Canvas, un StackPanel, ou un Grid, vous pouvez créer votre propre custom panel, qui vous permettra de définir le comportement que vous voulez pour la disposition des éléments enfants. Pour faire cela, dérivez de la classe Panel et surchargez les méthodes MeasureOverride et ArrangeOverride. Pour plus d’information, jetez un œil à Custom Panels.

A voir

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

]]> Developpement Windows Phone - partie 4 https://docs.microsoft.com/archive/blogs/jflavidalle/developpement-windows-phone-partie-4 Tue, 06 Sep 2011 13:04:00 GMT https://blogs.msdn.microsoft.com/jflavidalle/2011/09/06/developpement-windows-phone-partie-4/ 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

Les types de Contrôles

Il y a plusieurs types de contrôles que vous pouvez utiliser dans les applications Windows Phone7. Quelques-uns de ces contrôles sont aussi disponibles dans Silverlight et d’autres ne sont disponibles que pour Windows Phone. Ce tutoriel liste les contrôles disponibles sur les applications Silverlight pour Windows Phone et détaille comment utiliser ces contrôles.

Ce tutorial contient les sections suivantes :

 

Contrôles de Navigation

Les applications Silverlight pour Windows Phone sont basées sur un modèle par page dans lequel l‘utilisateur navigue dans différentes pages de contenu. Ce modèle est basé sur un contrôle de frame qui contient les contrôles de pages dans lesquels l’utilisateur navigue. Les pages contiennent des contrôles de mise en page (layout) qui, à leur tour, contiennent d’autres contrôles. Pour plus d’information sur les frames et la navigation par page, jetez un œil à Frame and Page Navigation Overview for Windows Phone. La table ci-dessous contient la liste des contrôles utilisés pour naviguer dans les applications pour Windows Phone.

Contrôle

Emplacement

Notes

PhoneApplicationFrame

Microsoft.Phone assembly

Le contrôle principal des applications Silverlight pour Windows Phone. Ce contrôle supporte la navigation entre pages.

PhoneApplicationPage

Microsoft.Phone assembly

Encapsule le contenu cible de la navigation via PhoneApplicationFrame.

L’illustration ci-dessous montre les frames et pages.

clip_image004

Contrôles de Layout et de Grouping

Des contrôles qui contiennent d’autres contrôles sont souvent qualifiés de contrôles de Layout. Les contrôles de Layout sont des containers pour d’autres contrôles et des objets visuels. Comme le nom le suggère, les contrôles de Layout sont utilisés pour positionner ces ensembles d’objets contenus à l’écran. Un contrôle de Layout est utilisé en tant que layout root de votre application au sein d’une page. Tous les autres objets de votre interface sont contenus dans cette racine. Vous pouvez utiliser d’autres contrôles de Layout à l’intérieur même de la racine de Layout selon vos besoins. Lorsque vous créez une nouvelle application Windows Phone, un contrôle de Grid qui sert de racine de Layout est automatiquement créé. Vous ajouterez d’autres contrôles à la zone de contenu. De plus, vous devrez prendre en compte le support du mode portrait et paysage de votre application lorsque vous choisirez les contrôles de Layout de votre application. Pour plus de détails sur l’orientation, jetez un œil à Screen Orientations QuickStart.

La plupart des contrôles de Layout dérivent de la classe Panel. Quelques exemples de contrôles de Layout qui dérivent du panel sont le StackPanel, Canvas, et le Grid. Il y deux autres contrôles, Panorama et Pivot, que vous pouvez utiliser pour gérer la disposition des contrôles dans vos applications. Les contrôles Pivot et Panorama dérivent d’ItemsControl et ont été créés spécifiquement pour les applications Silverlight pour Windows Phone. Ces contrôles sont différents des contrôles items classiques, car ils sont censés contenir un faible nombre d’éléments au contraire des contrôles d’items classiques qui peuvent contenir des listes plus importantes. Ces contrôles permettent à l’utilisateur de naviguer intuitivement entre leurs différents items.

La table suivante contient la liste des contrôles qui sont utilisés pour la disposition et le regroupement des éléments dans les applications Windows Phones.

Contrôle

Emplacement

Notes

Border

Silverlight System.Windows assembly

Ajoute une bordure, un fond, ou les deux, à un autre contrôle.

Canvas

Silverlight System.Windows assembly

Fournit une surface pour afficher les éléments enfant à des coordonnées bien précises.

ContentControl

Silverlight System.Windows assembly

Représente un container contenant uniquement un enfant. Le contrôle enfant est un objet, l’enfant peut donc contenir un contrôle de Layout avec des enfants additionnels.

Grid

Silverlight System.Windows assembly

Fournit une surface découpée en lignes et en colonnes pour afficher les éléments enfants. Vous définissez le nombre de lignes et de colonnes, et vous assignez ensuite les objets à une ligne ou une colonne spécifique dans la grille.

Panorama

Microsoft.Phone.Controls assembly

Crée une vue panoramique des éléments qui peuvent être affichés côté à côté. Seulement pour Silverlight pour Windows Phone.

Pivot

Microsoft.Phone.Controls assembly

Fourni une façon simple de visualiser de grands ensembles d’éléments dans une application. Ce contrôle peut être utilise comme interface de navigation pour filtrer de grands ensembles d’éléments et basculer entre différentes vues. Seulement pour Silverlight pour Windows Phone.

StackPanel

Silverlight System.Windows assembly

Fourni une surface pour afficher les éléments enfants en ligne, verticalement ou horizontalement.

VirtualizingStackPanel

Silverlight System.Windows assembly

Fourni un contrôle stack panel qui arrange son contenu visible à l’écran, créant les éléments graphiques nécessaires. VirtualizingStackPanel a de meilleures performances que le StackPanel lorsqu’il s’agit d’afficher de larges ensembles d’éléments.

ScrollViewer

Silverlight System.Windows assembly

Fourni une surface scrollable pour afficher les éléments enfants.

Pour plus d’information sur les contrôles de layout en Silverlight, jetez un œil sur Layout QuickStart. Pour plus d’information sur les contrôles Pivot et Panorama, jetez un œil à Pivot Control Overview et Panorama Control Overview.

L’image suivante montre quelques une des contrôles de Layout utilisée en mode portrait et paysage. Dans cette image un StackPanel et un Canvas sont contenus dans un Grid, qui utilise un système de disposition par colonne et ligne.

clip_image006

L’image suivante montre le contrôle Panorama et comment il peut être utilisé pour affiche une vue sur du contenu horizontal.

clip_image008

Contrôles de texte

Les contrôles de texte affichent classiquement du contenu textuel. Il y a différents types des contrôles de tests pour différents usages. Pour plus d’information, jetez un œil au Text QuickStart. Le tableau ci-dessous contient la liste des contrôles de textes utilisés dans les applications pour Windows Phone.

Contrôle

Emplacement

Notes

TextBlock

Silverlight System.Windows assembly

Utilisez ce contrôle pour affiche un texte simple, en lecture seule. Le contenu est affecté à travers la propriété Text.

TextBox

Silverlight System.Windows assembly

Utilise habituellement pour les saisies de texte de petite taille. Toutefois, vous pouvez aussi l’utiliser pour des saisies plus importantes sur plusieurs lignes. Le contenu est affecté à travers la propriété Text.

PasswordBox

Silverlight System.Windows assembly

Masque le texte saisi par l’utilisateur. Le contenu est disponible dans la propriété Password et est masque via la propriété PasswordChar.

L’image suivante illustre ces contrôles.

clip_image010

Boutons et contrôles de Sélection

Les boutons et les contrôles de sélection proposent à l’utilisateur de choisir et de naviguer rapidement dans l’application. La plupart des boutons et des contrôles de sélections dérivent de ContentControl, ce qui veut dire que vous pouvez ajouter du contenu à travers la propriété Content. La propriété Content est de type Object, il y a donc très peu de restrictions sur ce que ce type de contrôle peut contenir. Puisque beaucoup de classes dérivant de Object peuvent contenir d’autres contrôles, vous pouvez créer des hiérarchies de contrôles dans un ContentControl. Par exemple, vous pouvez affecter dans la propriété Content d’un bouton, un StackPanel qui contiendra lui-même une image et du texte. Le tableau ci-dessous contient la liste des contrôles boutons.

Contrôle

Emplacement

Notes

Button

Silverlight System.Windows assembly

Un contrôle qui répond aux interactions de l’utilisateur et déclenche un évènement Click. Le contenu est affecté via la propriété Content.

HyperlinkButton

Silverlight System.Windows assembly

Représente un bouton qui contient un lien hypertexte. Quand il est cliqué, l’ HyperlinkButton permet à l’utilisateur d’aller sur un page Web dans l’application elle-même, ou sur une page Web qui est externe à l’application courante. Le contenu est affecté via la propriété Content et l’URL de navigation est affectée via la propriété NavigateUri.

La table suivante contient la liste des contrôles de sélection.

Contrôle

Emplacement

Notes

CheckBox

Silverlight System.Windows assembly

Représente un contrôle que l’utilisateur peut sélectionner ou vider. Un CheckBox peut aussi proposer un état indéterminé. Le contenu est affecté via la propriété Content.

RadioButton

Silverlight System.Windows assembly

Permet à l’utilisateur de sélectionner une option parmi une liste. Lorsque des RadioButtons sont regroupés ensemble ils sont mutuellement exclusifs. Le contenu est affecté via la propriété Content.

Slider

Silverlight System.Windows assembly

Représente un contrôle que permet à l’utilisateur de sélectionner une valeur dans un intervalle. La propriété Value détermine la position dans l’intervalle.

L’image suivante illustre les boutons et les contrôles de sélection.

clip_image012

Contrôles de liste

Le tableau ci-dessous contient la liste des contrôles que vous pouvez utiliser pour afficher des listes d’éléments. Pour plus de détails sur les options d’affichage des listes d’éléments, jetez un œil à la section Toolkit Controls plus loin dans ce tutorial.

Contrôle

Emplacement

Notes

ListBox

Silverlight System.Windows assembly

Affiche la liste des éléments que l’utilisateur peut sélectionner par un clic. Le contenu est affecté via la propriété Items ou ItemsSource. L’apparence de chaque élément peut être personnalisée en utilisant un DataTemplate.

L’image ci-dessous illustre un contrôle ListBox qui affiche une liste d’éléments.

clip_image014

Contrôles pour Images, Cartes et Medias

Afficher des ressources, comme des images, des cartes ou encore des medias est une composante importante à la création d’applications riches pour Windows Phone. La table ci-dessous contient la liste des contrôles qui permettent d’afficher des ressources comme des images, des cartes ou des medias.

Contrôle

Emplacement

Notes

Image

Silverlight System.Windows assembly

Affiche une image. Le contenu est affecté via une propriété Source. Les applications Windows Phone supportent les images au format PNG et JPG.

Map

Bing assembly

Affiche une carte Bing Maps. Vous pouvez glisser/déposer le contrôle depuis la ToolBox sur la surface de votre application, mais pour que le contrôle fonctionne il faut que vous disposiez d’une clef Bing Maps Key pour votre application. Pour plus d’informations, jetez un œil à Getting a Bing Maps Key. Vous indiquez le type de cartes que vous souhaitez à travers la propriété Mode, et le niveau de zoom en utilisant le propriété ZoomLevel.

MediaElement

Silverlight System.Windows assembly

Utilisez ce contrôle pour lire du contenu Audio ou Vidéo. Le contenu est affecté via la propriété Source. Pour des raisons de performance, vous ne devez pas utiliser ce contrôle pour ajouter des effets audio à vos applications. Il est alors préférable d’utiliser la classe SoundEffect du framework XNA.

L’image ci-dessous est une illustration des contrôles Image, Cartes, et MediaElement affichant du contenu.

clip_image016

Contrôles HTML

Vous pouvez utiliser le contrôle WebBrowser pour afficher du contenu HTML dans vos applications. Il y a des différences entre le contrôle WebBrowser pour Silverlight et le contrôle WebBrowser pour Windows Phone. Pour plus d’informations, jetez un œil aux Differences Between the Desktop and Device WebBrowser Controls for Windows Phone.

Le tableau ci-dessous contient la liste des contrôles permettant d’afficher du HTML.

Contrôle

Emplacement

Notes

WebBrowser

Microsoft.Phone.Controls assembly

Affiche du contenu HTML. Le contenu est affecté via la propriété Source.

Contrôle WebBrowser

L’image ci-dessous illustre le contrôle WebBrowser affichant du contenu HTML.

clip_image018

Contrôles de Progress et de Message

Une application bien conçue donne des informations à l’utilisateur sur son état, par exemple une Progress bar pour les opérations longues ou un message d’erreur indiquant quel est le problème. Le tableau ci-dessous contient la liste des contrôles que vous pouvez utiliser pour afficher l’avancement et des messages à l’utilisateur.

Contrôle

Emplacement

Notes

ProgressBar

Silverlight System.Windows assembly

Affiche l’avancement d’une opération. Vous pouvez utiliser ce contrôle pour indiquer l’avancement exact d’une opération ou simplement indiquer que l’opération est en cours sans plus de précisions. Utiliser ce contrôle dans un mode indéterminé peut avoir un impact sur les performances de l’application. Microsoft fournit un contrôle alternatif non supporté nommé PerformanceProgressBar.

Popup

Silverlight System.Windows assembly

Affiche du contenu en surimpression au-dessus d’un contenu existant. Ceci est utile pour afficher temporairement du contenu à vocation unique. Typiquement, vous créerez un UserControl que vous placerez dans la propriété Child du Popup. Vous placerez ensuite la valeur true dans la propriété IsOpen du contrôle Popup. Une alternative moins flexible est l’utilisation du composant MessageBox.

L’image ci-dessous illustre le contrôle Popup qui contient un TextBlock, un Button, et une ProgressBar dans ses états classique et indéterminé.

clip_image020

Contrôles du Toolkit

Vous pouvez trouver des contrôles supplémentaires dans le Silverlight pour Windows Phone Toolkit sur CodePlex. Le site contient les contrôles, le code source et des exemples. Le tableau ci-dessous contient la liste des contrôles qui sont actuellement dans le toolkit. Le toolkit contient aussi des composants additionnels, comme les transitions de pages et un service de gestures.

Contrôle

Emplacement

Notes

AutoCompleteBox

Microsoft.Phone.Controls.Toolkit assembly

Représente un contrôle qui fournit une zone de texte pour la saisie utilisateur et une liste déroulante qui contient les choix possibles basés sur ce que l’utilisateur a saisi dans la zone de texte. Très similaire à l’AutoCompleteBox disponible en Silverlight.

ListPicker

Microsoft.Phone.Controls.Toolkit assembly

Combine une zone de texte qui affiche la sélection courante et une liste déroulante dans lesquelles l’utilisateur peut faire sa sélection.

LongListSelector

Microsoft.Phone.Controls.Toolkit assembly

Fournit un menu déroulant avancé qui supporte le regroupement d’éléments et la visualisation.

ContextMenu

Microsoft.Phone.Controls.Toolkit assembly

Fournit un menu contextuel. Utilisé pour fournir un menu lorsque l’utilisateur touche ou reste appuyé sur un contrôle.

DatePicker

Microsoft.Phone.Controls.Toolkit assembly

Permet à l’utilisateur de sélectionner une date.

TimePicker

Microsoft.Phone.Controls.Toolkit assembly

Permet à l’utilisateur de sélectionner une heure.

ToggleSwitch

Microsoft.Phone.Controls.Toolkit assembly

Fournit un texte et un interrupteur on/off.

WrapPanel

Microsoft.Phone.Controls.Toolkit assembly

Fournit un contrôle de Layout qui positionne les éléments enfants de façon séquentielle jusqu’à ce qu’il n’y a plus de place, et construit ensuite une nouvelle ligne pour les enfants. Les éléments enfants se disposent sur la nouvelle ligne.

A voir

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

]]> Developpement Windows Phone - partie 1 https://docs.microsoft.com/archive/blogs/jflavidalle/developpement-windows-phone-partie-1 Tue, 06 Sep 2011 13:01:00 GMT https://blogs.msdn.microsoft.com/jflavidalle/2011/09/06/developpement-windows-phone-partie-1/ 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. 

  2.     If (CType(FirstButton.Content, String) = "Tap") Then
    3. 

  3.         FirstButton.Content = "Tap Again"
    4. 

  4.     Else
    5. 

  5.         FirstButton.Content = "Tap"
    6. 

  6.     End If
    7. 

  7. End Sub
    8. 









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. 

  2.     <TextBlock FontSize="50" Text="Hello, World!" />
    3. 

  3.     <Ellipse Fill="Blue" Height="150" Width="300"
    4. 

  4.              Name="FirstEllipse" />
    5. 

  5.     <Button Height="150"
    6. 

  6.             Width="300"
    7. 

  7.             Content="Tap"
    8. 

  8.             Name="FirstButton"
    9. 

  9.             Click="FirstButton_Click" />
    10. 

  10. </StackPanel>
    11. 







 


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. 

  2.     <StackPanel.Resources>
    3. 

  3.         <Storyboard x:Name="FirstStoryBoard">
    4. 

  4.             <DoubleAnimation Storyboard.TargetName="FirstEllipse"
    5. 

  5.                              Storyboard.TargetProperty="Width"
    6. 

  6.                              To="1" AutoReverse="True"
    7. 

  7.                              Duration="00:00:01" />
    8. 

  8.         </Storyboard>
    9. 

  9.     </StackPanel.Resources>
    10. 

  10.     <TextBlock FontSize="50" Text="Hello, World!" />
    11. 

  11.     <Ellipse Fill="Blue" Height="150" Width="300"
    12. 

  12.              Name="FirstEllipse" />
    13. 

  13.     <Button Height="150"
    14. 

  14.             Width="300"
    15. 

  15.             Name="FirstButton"
    16. 

  16.             Content="Click"
    17. 

  17.             Click="FirstButton_Click" />
    18. 

  18. </StackPanel>
    19. 









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. 

  2. {
    3. 

  3.     if (FirstButton.Content as string == "Tap")
    4. 

  4.     {
    5. 

  5.         FirstButton.Content = "Tap Again";
    6. 

  6.     }
    7. 

  7.     else
    8. 

  8.     {
    9. 

  9.         FirstButton.Content = "Tap";
    10. 

  10.     }
    11. 

  11.     FirstStoryBoard.Begin();
    12. 

  12. }
    13. 







 






Visual Basic


    

  1. Private Sub FirstButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    2. 

  2.     If (CType(FirstButton.Content, String) = "Tap") Then
    3. 

  3.         FirstButton.Content = "Tap Again"
    4. 

  4.     Else
    5. 

  5.         FirstButton.Content = "Tap"
    6. 

  6.     End If
    7. 

  7.     FirstStoryBoard.Begin()
    8. 

  8. End Sub
    9. 







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
]]>
    
    
      Internet Explorer 9 Les outils de développement en détails - Partie 5 : Performance et analyse des échanges réseaux
      https://docs.microsoft.com/archive/blogs/jflavidalle/internet-explorer-9-les-outils-de-dveloppement-en-dtails-partie-5-performance-et-analyse-des-changes-rseaux
      Sun, 04 Sep 2011 23:44:00 GMT
      
      https://blogs.msdn.microsoft.com/jflavidalle/2011/09/04/internet-explorer-9-les-outils-de-dveloppement-en-dtails-partie-5-performance-et-analyse-des-changes-rseaux/
      
      Ce billet fait partie d'une série sur les Developer Tools inclus avec Internet Explorer (et ce depuis la version 8) visant à vous aider à améliorer vos sites Web grâce à des outils d'examen de contenu, à diagnostiquer des problèmes, à améliorer les performances, et bien plus encore:



Si vous ne connaissez pas les outils de développement (encore appelés F12 Tools ou encore Developer Tools), je vous recommande de commencer par lire le billet d'introduction.


Performance et analyse des échanges réseaux avec IE9


Jusqu’à présent, nous nous sommes focalisés sur l’expérience côté client, mias il est important de savoir comment votre application exploite les ressources réseaux.


Réduire la taille de téléchargement, trouver le contenu manquant ou redirigé, l'amélioration de l'utilisation du cache, et bien plus encore peuvent améliorer les performances (perçues et réelles) et de réduire vos factures de bande passante.


 


L'onglet Réseau


L'onglet Réseau, nouveau dans Internet Explorer 9, offre un moyen simple de capturer et d’analyser le trafic réseau et les requêtes de cache. Vous pouvez obtenir rapidement un rapport sur les demandes et les réponses, y compris les entêtes, le timing et bien d’autres détails.


«Attendez, est-ce Fiddler sous IE?"


Fiddler Session at MIX11 Non, mais ...


Fiddler est un proxy web de débogage développé par Eric Laurent (qui se trouve être également un PM de l'équipe Internet Explorer.) Alors que vous trouverez des similitudes avec Fiddler dans certains cas, ils sont très différents sous d’autres aspects.


Eric a donné une session sur Fiddler au MIX11 , et a passé du temps (vers 12:30 dans la vidéo) à décrire les principales différences avec les outils de développement F12. L'enregistrement de la session et les slides sont disponibles gratuitement.


Vous pouvez également en entendre plus sur la participation d’Eric au 116ème épisode du «Code de Herding" podcast .


Création d'une session de capture


Pour commencer, lancez les outils de développement F12 (Outils –> "Outils de développement F12" ou tout simplement appuyez sur la touche F12) et cliquez sur l'onglet Réseau. Cliquez sur "Démarrer la capture" et naviguez vers une page (dans ce cas, la page d’accueil IETestDrive) :


Network capture session


Vue résumée


Par défaut, le trafic capturé est représenté en vue résumée, avec les champs suivants:


    

  • URL
    • 

  • Méthode – la méthode HTTP (GET, POST, etc)
    • 

  • Résultat – le code retour de la réponse HTTP (200, 301, 304, etc) Il existe de nombreux codes, comprenant les redirections et les erreurs. Par exemple, recherchez des erreur 404, indiquant que l'URL est erronée ou le contenu non disponible.
    • 

  • Type - le type de contenu
    • 

  • Reçu(s) - Taille des données reçues
    • 

  • Ecoulé - Durée de la requête
    • 

  • Initiateur - Cause de la demande (voir Initiateurs de Requêtes ci-dessous)
    • 

  • Minutage - Graphique du timing requête/réponse (voir ci-dessous Timings de Requêtes)
    • 



Cliquez sur n'importe quelle entête de champ pour le trier, et faites un clic droit pour les options telles que l’affichage des données en octets ou les temps en millisecondes :


Summary view options


Double-cliquez ou sélectionnez un élément et cliquez sur "Atteindre la vue détaillée" pour plus de détails.


Vue détaillée


Detailed view


Il y a sept catégories de détails pour chaque demande:


Detailed view categories


    

  • En-têtes de demande
    • 

  • Corps de demande - Le contenu (le corps) de la demande, s’il existe.
    • 

  • En-têtes de réponse
    • 

  • Corps de réponse - le contenu (le corps) de la réponse. Présenté sous forme de texte (s’il s’agit de script, css, etc) ou graphiquement si possible (de type image)
    • 

  • Cookies - Les cookies envoyés ou reçus pour la demande
    • 

  • Initiateur - Ce qui a poussé la demande. Voir Initiateurs de requête ci-dessous.
    • 

  • Minutage - répartition détaillée du timing. Voir Minutage de requête ci-dessous.
    • 



Vous pouvez parcourir les éléments avec les boutons Précédent Previous button (CTRL + ,) et Suivant Next button (CTRL + .) , et appuyez sur "Retour à la vue résumée" pour revenir à la vue initiale.


Minutage de requête


Le minutage de requête peut sembler un peu complexe au premier abord, mais il assez simple une fois quelques notions maitrisées.


Commençons avec une requête simple d’une image de la home page IETestDrive (après effacement du cache - voir plus loin), montrant les détails du minutage pour le fichier GraySwooshWatermark.png :


Timings tab


Zoom sur le côté gauche :


Timings detail


Le cycle requête/réponse est composé de sept composantes :


    

  • Attente - Temps depuis le début de la navigation sur la page jusqu’au moment où la requête a commencé.
    • 

  • Début – Le temps depuis la création de la requête jusqu’au début de son envoi.
    • 

  • Demande – Le temps depuis de début de l’envoie de la requête jusqu’au début de la réception de la réponse. Aussi connu comme le temps de premier octet.
    • 

  • Réponse – Le temps depuis le temps du premier octet jusqu’à l'achèvement de la réception de la réponse.
    • 

  • Ecart – Délai entre l'achèvement de la réception de la réponse et l’évènement page load.
    • 

  • DOMContentLoaded – Timing de l'évènement DOMContentLoaded.
    • 

  • Load (event) – Timing de l'évènement page load.
    • 



Cliquez dans la liste ou sur le schéma pour mettre en évidence chaque composant de minutage.


    

  • Astuce: Si vous oubliez, les descriptions ci-dessus sont présentés dans les outils de développement F12 lorsque vous cliquez sur chaque.
    • 



DOMContentLoaded vs. Page Load


Pourquoi les évènements DOMContentLoaded et page Load sont différent? DOMContentLoaded se déclenche lorsque la page et les scripts sont chargés. Cela peut se produire avant que les autres demandes (par exemple les images) sont terminées, à ce moment là l'évènement page Load est levé.


La différence entre ceux-ci peut être importantes, surtout lors du téléchargement de grands illustrations, publicités ou autres contenus, de sorte qu'il peut être utile de lier les scripts de la page à l'évènement DOMContentLoaded plutôt qu’au page Load.


Pour une bonne démonstration de ceci en situation, lancez le DOMContentLoaded exemple du site IETestDrive :


DOMContentLoaded example


Lancez-le deux fois pour voir l'impact que la mise en cache du navigateur a sur le delta entre les évènements.


Analyser le trafic en cours


Jusqu'ici, nous nous sommes focalisés sur le profilage d'utilisation du réseau liée au chargement d’une page initiale, mais les outils de développement F12 peuvent également suivre les demandes en cours, telles que les demandes de contenu supplémentaire et les appels basées sur Ajax.


Pour voir cela en situation nous allons exécuter le Texas Hold'em exemple à partir du site IETestDrive .


Exécutez l'exemple et sur l'onglet Réseau, cliquez sur "Démarrer la capture". Ensuite, passez la souris sur le bouton "START", mais ne cliquez pas encore:


Texas Hold'em example


Vous verrez qu’une demande pour une image (buttonGeneric_Hover.png) a été faite au moment où le curseur survolait ​​le bouton:


Image request


Initiateurs de requête


Pourquoi IE9 a attendu pour télécharger cette image? Pour avoir plus d’informations, double-cliquez (ou survolez pour obtenir une infobulle) sur la zone Initiateur. Ci-dessous une capture montrant la valeur "background-image" :


Image request Initiator details


L'initiateur nous indique ce qui a incité IE9 à faire la requête. Dans ce cas, le CSS précise un fond alternatif au moment du survol du bouton, mais IE défère le téléchargement de l'image jusqu'à ce que l'évènement hover soit exécuté. (Comme indiqué dans la partie 2 , vous pouvez sélectionner le bouton et afficher l'onglet Styles CSS pour voir la règle de survol input.actionButton:hover.)


Maintenant cliquez sur le bouton "START" et vous verrez trois requêtes de plus :


Additional requests


Les requêtes ont été pour le background d'un autre élément, et les deux premières cartes jouées. Cliquez sur "Atteindre la vue détaillée" ou double-cliquez sur des requêtes des carte, puis choisissez l’onglet "Corps de réponse" :


Response body for a playing card


A nouveau, pour voir pourquoi la demande a été faite, cliquez sur l’onglet "Initiateur" :


Card image request initiator


Nous voyons cette fois-ci que le JavaScript changé l'attribut src de l'élément img (dans ce cas de «Hearts_Queen.png»), ce qui a abouti à une requête de téléchargement de l'image.


Du HTML au CSS et aux scripts, il y a beaucoup d'initiateurs demande possible. Voici quelques exemples courants :


    

  • background-image
    • 

  • click
    • 

  • @font-face
    • 

  • <frame>
    • 

  • frame navigate
    • 

  • <img>
    • 

  • @import
    • 

  • innerHtml
    • 

  • <input type=“image”>
    • 

  • navigate
    • 

  • Refresh
    • 

  • <script>
    • 

  • XmlHttpRequest
    • 



Prendre le temps de comprendre les initiateurs vous donnera un outil supplémentaire pour améliorer les performances des pages et du réseau. Pour plus de détails, voir “Understanding Download-Initiator” dans ce  Fiddler blog post .


 


La mise en cache du navigateur


Après un certain nombre de mains au Texas Hold'em , vous remarquerez peut-être des requêtes de certains éléments ne sont pas faites ou donnent un résultat 304. C'est parce qu'ils ont déjà été téléchargés pour jouer d'autres mains et sont déjà disponibles localement.


Redémarrez l'application (rafraichissement IE9) et vous pouvez voir quelques 304. Par exemple:


304 results


Notez la grande différence dans le champ reçu entre les images en cache (304) et les téléchargées (200). Dans cet exemple, 11.65KB pour l'image entière, contre seuleument 162 octets pour une 304 – résultat Not Modified.


Pour voir ce à un niveau supérieur, voici une première demande à l'exemple CSS3 Media Queries example :


Initial page load


La deuxième demande est très différente:


Second page request


Non seulement la page est prête plus rapidement, mais la plupart des demandes ont été servis par le cache du navigateur (en témoignent les 304, les petits segments bleues visibles sous Minutage.)


    

  • Astuce: Utilisez les outils de développements F12 pour vous assurer que votre serveur web envoie des en-têtes de cache correctement configuré au niveau des expirations.
    • 

  • Astuce: Pour améliorer le cache, assurez-vous des noms de fichier référencés et de la case utilisée. L’exemple surveillance du réseau montre l'effet de l’usage de mauvaise case.
    • 



Pour effacer le cache et donc forcer l’usage du réseau, cliquez sur le bouton "Effacer le cache navigateur"  Clear browser cache button (CTRL + R).


Le champ Minutage montre le timing des requêtes les plus tardives par rapport à la requête d'origine (y compris les temps d'attente d’action sur un bouton comme dans le Texas Hold'em , par exemple). Ceci se passe jusqu'à ce que vous démarrez une nouvelle session ou cliquez sur le bouton "Effacer" Clear button qui efface les résultats et les timings pour les demandes ultérieures.


Sauvegarde des captures réseau


Comme nous l'avons vu avec le profilage JavaScript, vous pouvez également enregistrer les détails de profilage réseau dans un fichier externe. Appuyez sur le bouton "Exporter le trafic capturé" Export captured traffic button pour enregistrer les résultats de la capture :


image


Les données Réseau peuvent être sauvegardés au format CSV (Comma Separated Values) ou XML en utilisant le format HTTP Archive, décrit dans ce blog IE .


    

  • Astuce: Comme mentionné dans le blog IE, vous pouvez importer ces fichiers XML dans Fiddler . .
    • 



Conclusion


J'espère sincèrement que vous avez trouvé cette série utile. Si vous avez des commentaires ou des idées pour d'autres scénarios à couvrir, s'il vous plaît laissez un commentaire ici.


Merci, et amusez vous bien avec les outils de développement F12!


 


Ce billet est une adaptation du post de Chris Bowen (Principal Developer Evangelist for Microsoft) : Internet Explorer 9 Developer Tools Deep Dive – Part 5: Network Performance and Debugging
]]>