Contrôle Pivot de Silverlight 5 et OGDI
Au cours de ce billet, nous allons voir comment nous pouvons tirer parti d’une des nouveautés de Silverlight 5, à savoir l’intégration native du contrôle Pivot afin d’afficher des contenus riches (comme des photos par exemple) et d’interagir avec les données ainsi mises en valeur avec la meilleure expérience utilisateur possible.
Pour illustrer ce scénario, nous allons nous appuyer sur les données du département de Saône-et-Loire (Cf. billet Le département de Saône-et-Loire lance son site Open Data).
En effet, voulant mettre en place une politique Open Data pour son département, Arnaud Montebourg a choisi de faire confiance à la solution OGDI (Open Government Data Initiative) pour offrir aux professionnels des métiers des technologies de l’information et de la communication la meilleure interface de programmation (API) possible (au-delà des fichiers de données proposés en téléchargement sous de nombreux formats) et de faire bénéficier les citoyens d’une application de visualisation de l’information appelé « Dataviz » qui consomme directement les données exposées par l’instance OGDI dans Windows Azure.
Le portail Open Data 71 du département de Saône-et-Loire propose notamment, parmi les données ainsi exposées un ensemble de données de cartes postales de collection avec les liens vers les images stockées dans des blobs du stockage Windows Azure.
Sans plus attendre, voici le résultat :
Pour arriver à ce résultat, il faut suivre plusieurs étapes que nous allons détailler une à une dans ce billet. Tout d’abord, il faut télécharger le kit de développent (SDK) Silverlight 5 à ce jour en version RC (Release Candidate), puis créer un projet Silverlight 5 dans Visual Studio 2010, puis consommer le flux de données du service OData exposé par le département de Saône-et-Loire et enfin afficher les données consommées à l’aide du contrôle Pivot.
Téléchargement du SDK Silverlight 5 RC
Vous pouvez télécharger et installer le SDK Silverlight 5 RC, intitulé Microsoft Silverlight 5 RC Tools for Visual studio Service Pack 1, depuis le Centre de téléchargement Microsoft : https://www.microsoft.com/download/en/details.aspx?displaylang=en&id=27220.
Les éventuels différents prérequis techniques associés sont indiqués sur la page du téléchargement.
Création d’un projet Silverlight 5
Pour créer un projet Silverlight 5 dans Visual Studio 2010, il vous suffit tout simplement de créer un nouveau projet avec le modèle Silverlight Applicationet de choisir Silverlight 5 dans la boite de dialogue permettant de configurer le projet.
Ajout d’une référence vers le service OData de la solution OGDI du département de Saône-et-Loire
Maintenant que notre projet Silverlight 5 est créé, il suffit d’ajouter une référence vers le service OData du département de Saône-et-Loire. Ce service étant à l’adresse https://opendata71.cloudapp.net/v1/data, il suffit donc de faire un clic-droit sur le projet Silverlight dans l’explorateur de solution de Visual Studio, puis de choisir Add Service Reference dans le menu contextuel qui s’affiche.
Dans la boite de dialogue qui s’ouvre, il suffit alors d’insérer l’adresse du service OData dans le champ prévu à cet effet, de cliquer sur le bouton Go et de cliquer sur OK pour que Visual Studio génère tout le code d’accès au service. (N’oubliez pas de renseigner un espace de nom pertinent pour votre référence vers le service, par exemple « CG71.OData ».)
Ecriture du code de consommation du service OData
Nous allons maintenant nous servir du code généré par Visual Studio pour écrire le code qui va consommer les données qui nous intéressent, à savoir l’ensemble de données contenant les cartes postales.
Ouvrez pour cela la page contenant le code-behind de votre page principale : MainPage.xaml.cs.
Une fois fichier ouvert, la première chose à faire est de rajouter les références vers l’espace nom client de WCF Data Services (implémentation du protocole OData en .NET) et vers l’espace nom de votre référence de service créée à l’étape précédente. Rajoutez donc les lignes suivantes en début de votre fichier :
using System.Data.Services.Client;
using <Nom de votre projet>.CG71.OData;
Maintenant, remplacer le contenu de votre classe MainPage par ce bloc de code :
private DataServiceCollection<INDEXAD71CartesPostalesItem> _cards;
private dataDataService _context;
public MainPage()
{
InitializeComponent();
this.Loaded += new RoutedEventHandler(MainPage_Loaded);
}
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
//Initialisation du contexte de données
_context = new dataDataService(new Uri("https://opendata71.cloudapp.net/v1/data"));
_cards = new DataServiceCollection<INDEXAD71CartesPostalesItem>();
//Création d'une requête asynchrone pour télécharger les 100 premières cartes postales
_cards.LoadCompleted += new EventHandler<LoadCompletedEventArgs>(_cards_LoadCompleted);
var query = (from c in _context.INDEXAD71CartesPostales select c).Take(100);
_cards.LoadAsync(query);
}
void _cards_LoadCompleted(object sender, LoadCompletedEventArgs e)
{
if (_cards.Continuation != null)
{
_cards.LoadNextPartialSetAsync();
}
else
{
//Pivot.ItemsSource = _cards;
}
}
Ce code permet une fois la page chargée, d’exécuter une requête OData asynchrone vers le service OData du Conseil Général de Saône-et-Loire afin de télécharger les 100 premiers éléments de l’ensemble de données des cartes postales et de stocker ces données une fois téléchargées.
A noter que la dernière ligne du code est commentée à ce stade, car c’est celle qui servira à lier la source de données du contrôle Pivot que nous n’avons pas encore écrit vers la collection de cartes postales.
Création du contrôle Pivot
Nous allons maintenant passer à la partie visuelle de notre application. Tout d’abord, afin de pouvoir utiliser le contrôle Pivot avec Silverlight 5, il faut rajouter une référence vers la bibliothèque System.Windows.Controls.Pivot. Pour ce faire, dans l’explorateur de solution de Visual Studio, faites un clic-droit sur votre projet Silverlight, choisissez Add Reference, sélectionnez la bibliothèque précédemment citée puis cliquez sur OK.
Une fois cette étape passée, nous allons pouvoir ouvrir le fichier MainPage.xamlet rajouter une référence vers l’espace nom du contrôle Pivot. Pour cela, rajoutez l’attribut suivant à la balise UserControl :
xmlns:pivot="clr-namespace:System.Windows.Controls.Pivot;assembly=System.Windows.Controls.Pivot"
Maintenant que l’espace nom a été référencé, nous pouvons créer notre contrôle Pivot à proprement parler. Il vous suffit de rajouter le bloc de code suivant à l’intérieur de votre balise Grid :
<pivot:PivotViewer Name="Pivot">
<pivot:PivotViewer.PivotProperties>
<pivot:PivotViewerStringProperty Id="annee" Options="CanFilter" DisplayName="Année"
Binding="{Binding annee}" />
<pivot:PivotViewerStringProperty Id="commune" Options="CanFilter" DisplayName="Commune"
Binding="{Binding commune}" />
<pivot:PivotViewerStringProperty Id="titre1" Options="WrappingText" DisplayName="Description"
Binding="{Binding titre1}" />
<pivot:PivotViewerStringProperty Id="periodehistorique" Options="CanFilter"
DisplayName="Période historique" Binding="{Binding periode_historique}" />
<pivot:PivotViewerStringProperty Id="editeur" Options="CanFilter" DisplayName="Photographe"
Binding="{Binding editeur}" />
</pivot:PivotViewer.PivotProperties>
<pivot:PivotViewer.ItemTemplates>
<pivot:PivotViewerItemTemplate>
<Border Width="1256" Height="817" Background="{Binding fichier,
Converter={StaticResource UrlToImageBrushConverter}}" />
</pivot:PivotViewerItemTemplate>
</pivot:PivotViewer.ItemTemplates>
</pivot:PivotViewer>
Vous pouvez maintenant dé-commenter la ligne de code liant la source de données du contrôle Pivot à la collection de cartes postales dans le fichier MainPage.xaml.cs . Comme vous pouvez le constater, nous définissons plusieurs propriétés à l’intérieur de notre contrôle Pivot :
En premier lieu, via la propriété PivotProperties , nous définissons les propriétés des objets représentant les cartes postales qui seront utilisées pour permettre aux utilisateurs de filtrer les cartes postales et d’afficher des informations sur ces dernières.
Ensuite, la propriété la plus importante est la propriété ItemTemplate qui nous permet de définir l’apparence de chaque élément de la source de données liée au contrôle Pivot. Ici, nous souhaitons afficher une simple photo. nous définissons donc un élément visuel de type Border en liant sa propriété Background à la propriété fichier (qui contient l’URL vers la photo de la carte postale dans le stockage Blob de Windows Azure) de l’élément courant de la source de données.
Comme la propriété fichier est une URL de type String et que la propriété Background est une propriété de type Brush, nous devons utiliser un convertisseur qui va permettre de faire la conversion entre les deux types de données : d’où le bout de code « Converter={StaticResource UrlToImageBrushConverter} ».
Nous allons donc devoir écrire ce convertisseur.
Ecriture du code du convertisseur d’image
Nous allons devoir rajouter une classe à notre projet et faire en sorte que cette classe implémente l’interface IValueConverter qui en Silverlight (et en WPF) est l’interface que doivent implémenter tous les convertisseurs. Ajoutez donc une classe à votre projet et appelez-la UrlToImageBrushConverter .
Voici le code complet de la classe :
public class UrlToImageBrushConverter : System.Windows.Data.IValueConverter
{
public object Convert(object value, Type targetType, object parameter,
System.Globalization.CultureInfo culture)
{
string url = value.ToString();
var uri = new Uri(url, UriKind.Absolute);
//Création du Brush attendu par la propriété Background
System.Windows.Media.Imaging.BitmapImage img = new System.Windows.Media.Imaging.BitmapImage(uri);
ImageBrush brush = new ImageBrush();
brush.ImageSource = img;
return brush;
}
public object ConvertBack(object value, Type targetType, object parameter,
System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
Maintenant que le convertisseur a été créé, il suffit de le référencer dans notre page MainPage.xamlpuis de créer une instance dans les ressources de la page. Pour commencer, rajoutez l’attribut suivant à la balise UserControl pour référencer l’espace nom de votre projet :
xmlns:local="clr-namespace:[Nom de votre projet]"
Rajoutez ensuite la balise suivante à l’intérieur de votre balise UserControl juste avant la balise Grid:
<UserControl.Resources>
<local:UrlToImageBrushConverter x:Key="UrlToImageBrushConverter" />
</UserControl.Resources>
Notez au passage que la valeur de l’attribut Key de votre convertisseur correspond au nom du convertisseur référencé par la balise Border dans le template des éléments de votre contrôle Pivot.
Vous avez maintenant terminé d’écrire le code de votre application Silverlight 5 avec le contrôle Pivot, vous pouvez maintenant compiler et admirer le résultat ! Comme vous pouvez le constater, il est très facile de mettre en valeur des données riches avec Silverlight 5 et d’offrir des applications avec une expérience utilisateur maximale aux citoyens en utilisant les contrôles avancés fournis avec le SDK.
A ce propos, avec le lancement du site Open Data 71, le département de Saône-et-Loire met en place un concours d’applications ouvert à tous. Si le billet vous a donné des idées et des envies, n’hésitez pas. C’est le moment de vous inscrire et de participer !