Tutoriel : Consommer le service de données OGDI avec Windows Phone 7/Mango – 4ième partie
Cette quatrième et dernière partie de ce tutoriel s’intéresse à l’affichage des données sur Bing Cartes. Que vous ayez précédemment opté pour le SDK 7.0 ou 7.1, le code est cette fois le même !
En premier lieu, si vous n’avez pas de compte Bing Cartes, il est nécessaire de vous en créer un ! Un tel compte vous permet de créer des clés dont vous avez besoin pour connecter vos applications aux services de l’API Bing Cartes.
Création d’un compte Bing Cartes
Ouvrez votre navigateur et rendez-vous sur https://www.bingmapsportal.com.
Cliquez sur Create pour vous créer un nouveau compte en utilisant votre Windows Live ID.
Sur la page suivante, remplissez les détails du compte :
Une fois votre compte créé en cliquant sur Save, vous aurez besoin de créer une nouvelle clé pour votre application. Pour cela, cliquez sur Create or view keys sur la gauche :
Sur la page suivante, remplissez les détails concernant votre application est cliquez sur Create Key:
Maintenant, vous devriez voir en bas de votre écran votre nouvelle clé privée. Sauvegardez cette clé, vous en aurez besoin pour la suite de cette dernière partie du tutoriel :
Affichage des données sur une carte Bing Cartes
Vous allez utiliser le contrôle Bing Cartes fourni avec le SDK Windows Phone. Pour commencer, ajoutez une référence à la bibliothèque Microsoft.Phone.Controls.Map:
Vous allez maintenant ajouter un contrôle Bing Cartes à votre page MainPage.xaml. Pour cela, supprimez le contenu de votre second élément PivotItem, ouvrez votre boîte à outils (toolbox) et faites glisser le contrôle Map sur votre second PivotItem.
Vous devriez avoir le code suivant dans votre page maintenant :
<!--Pivot item two-->
<controls:PivotItem Header="second">
<my:Map />
</controls:PivotItem>
Ouvrez votre fichier App.xaml.cset ajoutez une constante interne appelée Idà la classe App. Ce champ est utilisé pour contenir la clé privée Bing Cartes que vous avez créé lors de l’étape précédente :
internal const string Id = "your Bing maps private key";
Ouvrez votre fichier MainViewModel.cs et importez les espaces noms suivant en tête de votre fichier :
using System.Device.Location;
using Microsoft.Phone.Controls.Maps;
Ensuite, rajoutez à votre classe MainViewModel une propriété de type CredentialsProvider que vous initialisez avec la clé privée que vous avez ajoutée à la classe App.
private readonly CredentialsProvider _credentialsProvider = new ApplicationIdCredentialsProvider(App.Id);
public CredentialsProvider CredentialsProvider
{
get { return _credentialsProvider; }
}
Maintenant, retournez dans votre fichier MainPage.xaml et liez la propriété Map.CredentialsProvider à la propriété publique que vous venez de créer dans votre classe MainViewModel et profitez-en pour mettre le niveau de zoom à 12 :
<my:Map CredentialsProvider="{Binding CredentialsProvider}" ZoomLevel="12" />
Vous allez maintenant centrer le contrôle Bing Cartes sur la ville de Rennes au démarrage. Pour cela, vous devez tout d’abord ajouter une référence à la bibliothèque System.Device afin de pouvoir manipuler des coordonnées géo-localisées :
Dans la page MainViewModel.cs, rajoutez un champ statique en lecture seule de type System.Device.Location.GeoCoordinate à votre classe MainViewModel appelée DefaultLocation(ce sont les coordonnées de la ville de Rennes) :
private static readonly GeoCoordinate DefaultLocation = new GeoCoordinate(48.1075201928616, -1.68447822332382);
Rajoutez ensuite une propriété Center qui va exposer un champ privé _center:
private GeoCoordinate _center;
public GeoCoordinate Center
{
get { return _center; }
set
{
if (_center != value)
{
_center = value;
NotifyPropertyChanged("Center");
}
}
}
Dans le constructeur de la classe MainViewModel rajoutez la ligne de code suivante pour calquer la propriété Center sur la propriété DefaultLocation qui contient les coordonnées de Rennes :
Center = DefaultLocation;
Et enfin, dans le fichier MainPage.xaml, allez lier la propriété Map.Center à la propriété Center que vous venez de créer dans la classe MainViewModel:
<my:Map CredentialsProvider="{Binding CredentialsProvider}"
Center="{Binding Center, Mode=TwoWay}"
ZoomLevel="12"/>
Dès à présent, si vous testez votre application, vous pourrez constater qu’en allant sur le deuxième pivot, la carte va pointer sur la ville de Rennes :
Vous en avez maintenant fini de travailler avec le contrôle Bing Cartes.
Vous allez maintenant créer une couche de données géo-localisées (map layer). Une couche de données géo-localisées est représentée par un panneau de type Microsoft.Phone.Controls.Maps.MapLayer que l’on ajoute dans un contrôle Bing Cartes déjà existant.
Avec un panneau MapLayer sur votre carte, vous pouvez insérer n’importe quel élément graphique dérivant de la classe UIElement. Le panneau Maplayer sait où les disposer sur la carte grâce à des géo-coordonnées. Un contrôle Bin Map peut avoir plusieurs panneaux de type MapLayer en son sein. Vous allez utiliser le mécanisme de liaison de données de Silverlight (data binding) pour afficher vos données sur la carte.
Dans la pratique, au lieu d’utiliser un MapLayer, vous allez plutôt utiliser un contrôle de type Microsoft.Phone.Maps.MapItemsControl. Ce contrôle qui dérive de ItemsControl utilise un panneau MapLayer en interne pour disposer les données. Et Vous avez en plus accès à plusieurs templates pour configurer l’aspect visuel de vos données géo-localisées.
Commencez par ajouter un élément MapsItempsControl à votre carte Bing Cartes :
<my:Map CredentialsProvider="{Binding CredentialsProvider}"
Center="{Binding Center, Mode=TwoWay}"
ZoomLevel="12">
<my:MapItemsControl />
</my:Map>
Pour représenter les « punaises« sur la carte Bing Cartes, vous allez créer une nouvelle classe appelée PushpinModel. Ajoutez donc un dossier Models à votre solution et créez la classe PushpinModel:
Ajoutez une propriété appelée Location de type System.Device.Location.GeoCoordinate à votre classe PushpinModel :
public class PushpinModel
{
public GeoCoordinate Location { get; set; }
}
A présent que vous disposez d’une classe pour représenter les « punaises » que vous allez afficher sur la carte Bing Cartes, vous allez ajouter une propriété appelée Pushpins de type ObservableCollection<PushpinModel> à votre classe MainViewModel.
private ObservableCollection<PushpinModel> _pushpins = new ObservableCollection<PushpinModel>();
public ObservableCollection<PushpinModel> Pushpins
{
get { return _pushpins; }
}
Vous allez maintenant retourner dans votre page MainPage.xaml et lier la source de données de votre contrôle MapItemsControl précédemment créé à votre collection Pushpins. Il faut aussi indiquer à votre contrôle comment positionner les punaises sur la carte.
Pour cela, vous allez modifier la propriété ItemsTemplate pour afficher des éléments de type Pushpin et en liant leur propriété Location à la propriété Location des objets de type PushpinModel qui composent la collection Pushpins sur laquelle est liée la source de données de votre contrôle MapItemsControl :
<my:MapItemsControl ItemsSource="{Binding Pushpins}">
<my:MapItemsControl.ItemTemplate>
<DataTemplate>
<my:Pushpin Location="{Binding Location}"/>
</DataTemplate>
</my:MapItemsControl.ItemTemplate>
</my:MapItemsControl>
Ensuite, il faut insérer dans la collection Pushpins un élément par place de stationnement dans la collection Stationnements. On peut réaliser ce traitement une fois le téléchargement des places de stationnements terminé.
Pour ce faire il faut s’abonner à l’évènement LoadCompleted de la classe DataServiceCollection<StationnementHandicapesItem> dans le constructeur de la classe MainViewModel :
public MainViewModel()
{
this.Items = new ObservableCollection<ItemViewModel>();
frOpenDataDataService service = new frOpenDataDataService(new Uri(ODataEndpoint));
Stationnements = new DataServiceCollection<StationnementHandicapesItem>(service);
Stationnements.LoadCompleted += (sender, e) =>
{
foreach (StationnementHandicapesItem s in Stationnements)
{
Pushpins.Add(new PushpinModel { Location = new GeoCoordinate(s.lat.Value, s.@long.Value) });
}
};
Stationnements.LoadAsync(new Uri(ODataEndpoint + "StationnementHandicapes?$top=100"));
Center = DefaultLocation;
}
Vous pouvez dès maintenant lancer votre application et constater que sur votre carte, des polygones noirs apparaissent sur votre carte, représentant les emplacements des places de stationnement réservés aux personnes handicapées. Nous pouvons bien évidemment personnaliser le design en modifiant le template des contrôles Pushpin générés.
Dans le cas présent, nous prenons le parti de représenter chaque punaise par une image insérée au projet :
<my:MapItemsControl ItemsSource= "{Binding Pushpins}" >
<my:MapItemsControl.ItemTemplate>
<DataTemplate>
<my:Pushpin Location= "{Binding Location}" >
<my:Pushpin.Template>
<ControlTemplate>
<ContentPresenter/>
</ControlTemplate>
</my:Pushpin.Template>
<Image Source= "handi.png" Height= "40" Width= "40" />
</my:Pushpin>
</DataTemplate>
</my:MapItemsControl.ItemTemplate>
</my:MapItemsControl>
Ce qui vous donne au final le résultat suivant à l’affichage :
En guise de conclusion
Voilà, c’est en terminé de ce premier tutoriel. Au cours de celui-ci, vous avez vu comment consommer des données exposées par une instance OGDI via le protocole OData. Nous avons abordé pour cela les mécanismes de génération des classes proxy ainsi que les opérations de base que l’on peut effectuer soit en mode http avec le SDK Windows Phone 7.0 soit en mode LINQ avec le SDK 7.1. Vous avez aussi pu voir la structure d’un projet Windows Phone respectant l’architecture MVVM et donc notamment les mécanismes de liaison de données.
Vous avons vu comment lier une vue (MainPage.xaml) à son modèle logique(MainViewModel.cs) et ainsi séparer les couches de responsabilités. Vous avez finalement vu comment utiliser le contrôle Bing Map avec Silverlight, comment le personnaliser et afficher des données géo-localisées dessus.
Le code source fourni avec ce billet est bien plus complet que l’illustration proposée au travers des quatre parties qui constituent ce tutoriel. Il inclut notamment le filtrage des points de données pour ne prendre en compte que les plus proches de la localisation actuelle de l’utilisateur ainsi que d’autres petites fonctionnalités.
En espérant que cette lecture vous aura plu et vous aura donné les clés pour commencer à développer des applications Open Data sur Windows Phone !
Au-delà des éléments que nous développons dans ce tutoriel et pour aller plus loin sur le développement sous Windows Phone, n’hésitez pas à télécharger l’eBook gratuit Programming Windows Phone 7 de Charles Petzold et ses exemples en C# ainsi que le kit Windows Phone 7 Training Kit.
(D’autres plateformes mobiles viendront par la suite pour encore plus d’applications ! Stay tuned ! )