Le titre de l’article est assez explicite, on va afficher des données provenant d’un service WCF dans un DataGrid. Cet article va servir d’introduction pour la suite des articles autour de Silverlight.
Les données
On va créer une table Task qui va contenir des tâches, voici le script :
create table Task(id int IDENTITY,
[name] varchar(255),
comment varchar(1000),
realizationDate DateTime,
termDate DateTime,
reminderDate DateTime,
concerned varchar(100),
realized bit default 0
)
Le service WCF
On va créer un service WCF et à l’aide d’entity framework (pour un souci de rapidité) on va chercher la liste des tâches dans la base de données et la renvoyer.
Créer un nouveau projet « WCF Service Project » et nommez le NavigationAppServices. Nommez la solution que vous allez créer « NavigationApp ».
Dans ce projet créez un nouveau « WCF Service » et nommez le « TasksService », et dans ce projet, créez un répertoire DataAccess.
Dans ce répertoire créer un nouveau « ADO.NET entity data model » et nommez le « DbModel ». N’oubliez pas de cocher la table Task qu’on vient de créer. Ceci va vous générer le modèle Entity Framework avec l’entité Task. (Si vous avez besoin de plus de détails sur cette partie je vous recommande ce post)
Revenons maintenant à notre service TasksService et rajoutons le using et la méthode suivante :
using NavigationAppServices.DataAccess;
public List<Task> GetList()
{
DbEntities entities = new DbEntities();
return entities.Task.ToList<Task>();
}
Dans l’interface ITasksService n’oubliez pas de déclarer la méthode comme suit:
[OperationContract]
List<Task> GetList();
Alors juste une petite mise en garde, ce service que nous avons créé en 30 secondes ne respecte aucun best practice du développement N-Tiers mais pour le besoin de cet article ça suffit amplement.
L’application Silverlight
On y est, maintenant qu’on a préparé le terrain, on va pouvoir accéder à ce service WCF et afficher la liste des tâches dans une grille. Pour ce faire, dans la même solution qui contient les services, créez tout d’abord un projet de type « Silverlight navigation application » et nommez le « NavigationApp ». (Pour comprendre la coquille vide que vous génère Visual studio dans ce cas reportez vous à ce post)
Visual studio va alors nous créer une coquille vide. On va ignorer cette coquille et garder uniquement le point d’entrée de notre application qui est App.xaml pour construire notre application Silverlight.
Positionnez vous au niveau du projet NavigationApp et créez un nouveau « Silverlight User Control » en le nommant MasterPage.xaml ( Nous l’avons nommé comme cela juste parce que ça sera le conteneur de notre application Silverlight mais le fonctionnement n’est pas du tout pareil)
Dans le fichier App.xaml.cs remplacez la ligne suivante :
this.RootVisual = new MainPage();
par celle la :
this.RootVisual = new MasterPage();
L’application va donc au démarrage charger notre conteneur au lieu de charger le conteneur généré par Visual Studio. Si vous lancez l’application à ce stage vous aurez une page blanche puisque MasterPage ne contient rien.
Nous allons maintenant travailler sur l’aspect général de l’application, pour cela nous allons définir une grille qui nous permettra d’organiser un peu l’interface et positionner nos différents éléments graphique. Ouvrez MasterPage.xaml et en dessous de cette ligne :
<Grid x:Name="LayoutRoot" Background="White">
Placez ces quelques lignes qui permettent de définir la grille
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
Rien de sorcier, nous avons définit une grille avec 2 lignes et 2 colonnes.
Nous allons maintenant remplir les cases de la grille avec des éléments graphiques.
<Border Style="{StaticResource MyBannerStyle}">
<TextBlock Text="Mon application de la mort"></TextBlock>
</Border>
<Border Style="{StaticResource MyToolboxStyle}">
</Border>
<Border Style="{StaticResource MyBodyPageStyle}">
</Border>
Border est un conteneur graphique permettant de regrouper d’autres éléments. Donc on a définit 3 éléments de type border :
- Le premier sera notre bannière et occupera toute la première ligne de la grille
- Le deuxième sera un panel à gauche de l’écran qui restera vide jusqu’à la fin de cet article mais qui est destiné à accueillir une boite à outils ou un menu.
- Le troisième et dernier va accueillir notre application Silverlight
Les styles qui sont appliqués à ces éléments graphiques sont les suivants :
<Style x:Key="MyBannerStyle" TargetType="Border">
<Setter Property="Background" Value="#C0C0C0"></Setter>
<Setter Property="Grid.Row" Value="0"></Setter>
<Setter Property="Grid.Column" Value="0"></Setter>
<Setter Property="Grid.ColumnSpan" Value="2"></Setter>
</Style>
<Style x:Key="MyToolboxStyle" TargetType="Border">
<Setter Property="Background" Value="#C0C0C0"></Setter>
<Setter Property="Grid.Row" Value="1"></Setter>
<Setter Property="Grid.Column" Value="0"></Setter>
</Style>
<Style x:Key="MyBodyPageStyle" TargetType="Border">
<Setter Property="Grid.Row" Value="1"></Setter>
<Setter Property="Grid.Column" Value="1"></Setter>
</Style>
Il faut les rajouter dans /Assets/Styles.xaml.
Dans MasterPage.xaml , positionnez vous maintenant en dessous de cette ligne.
<Border Style="{StaticResource MyBodyPageStyle}">
et rajoutez le code suivant :
<navigation:Frame x:Name="ContentFrame" Style="{StaticResource ContentFrameStyle}" Source="/Tasks">
<navigation:Frame.UriMapper>
<uriMapper:UriMapper>
<uriMapper:UriMapping Uri="" MappedUri="/Views/Tasks.xaml"/>
<uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/>
</uriMapper:UriMapper>
</navigation:Frame.UriMapper>
</navigation:Frame>
Pas de panique, il vous manque des briques, positionnez vous en dessous de cette ligne
xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
et rajoutez les 2 lignes suivantes :
xmlns:uriMapper="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
Ce code définit la zone qui va accueillir les pages Silverlight. (Pour en savoir plus à propos de l’uri mapping je vous recommande ce post
Créons maintenant notre page Tasks, positionnez vous au niveau du répertoire Views et ajouter une nouvelle « Silverlight page » et nommez la Tasks.xaml.
Dans Tasks.xaml, on va tout d’abord définir une Grille pour placer la DataGrid et un petit bouton de rafraîchissement. La grille aura 1 ligne et 2 colonnes, voici son code :
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
Avant de créer la DataGrid qui va contenir la liste des tâches, allons déjà récupérer la liste des tâches à partir de notre service web, on va essayer de faire les choses à peu près proprement avec le pattern MVVM, on ne va pas s’attarder sur ce pattern qui fera l’objet d’un prochain post mais sachez juste que si vous vous intéressez à Silverlight ou wpf, le pattern MVVM est incontournable.
Dans le projet NavigationApp créez 2 nouveaux répertoires et nommez les « Model » et « ViewModel ».
Dans le répertoire Model, créez une nouvelle classe et nommez la « Task.cs », voici son contenu :
public class Task
{
public int Id { get; set; }
public string Name { get; set; }
public bool Realized { get; set; }
}
Donc on a dans notre Model une classe Task qui représente une petite partie de la classe Task exposée par le service.
Dans le répertoire ViewModel, créez une nouvelle classe et nommez-la « TasksViewModel.cs ». Cette classe va contenir les propriétés sur les quels on va lier les composants graphiques de l’interface TasksViewModel. Pour pouvoir notifier les composants graphiques que le contenu des propriétés a changé il faut que notre classe implémente l’interface INotifyPropertyChanged. Pour cela il faut déclarer dans la classe le delegate PropertyChanged de cette manière :
public event PropertyChangedEventHandler PropertyChanged;
On a rajouté la méthode RaisePropertyChanged permettant de déclancher l’évènement PropertyChanged sur une propriété.
Notre grille va se lier à une liste de tâches, donc on va rajouter cette propriété :
private List<Task> tasks;
public List<Task> Tasks
{
get { return tasks; }
set
{
tasks = value;
RaisePropertyChanged("Tasks");
}
}
Nous remarquons bien que dans le set on déclanche l’évènement PropertyChanged dès qu’on a modifié le contenu de la propriété.
Et enfin on va aussi rajouter la méthode qui va contacter le service pour ramener les données (FillTasks) et le délégé (taskServiceClient_GetListCompleted) qui va traîter la réponse asynchrone du service et qui va modifier le contenu de la liste Tasks.
Au final voici le code de la classe TasksViewModel :
public class TasksViewModel : INotifyPropertyChanged
{
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
#endregion
private void RaisePropertyChanged(string propertyName)
{
if (this.PropertyChanged != null)
{
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
public void FillTasks()
{
Services.Tasks.TasksServiceClient taskServiceClient = new NavigationApp.Services.Tasks.TasksServiceClient();
taskServiceClient.GetListCompleted += new EventHandler<NavigationApp.Services.Tasks.GetListCompletedEventArgs>(taskServiceClient_GetListCompleted);
taskServiceClient.GetListAsync();
}
void taskServiceClient_GetListCompleted(object sender, NavigationApp.Services.Tasks.GetListCompletedEventArgs e)
{
List<Task> resultTasks = new List<Task>();
foreach(NavigationApp.Services.Tasks.Task t in e.Result)
{
Task mt = new Task();
mt.Id = t.id;
mt.Name = t.name;
if (t.realized.HasValue)
mt.Realized = t.realized.Value;
resultTasks.Add(mt);
}
this.Tasks = resultTasks;
}
private List<Task> tasks;
public List<Task> Tasks
{
get { return tasks; }
set
{
tasks = value;
RaisePropertyChanged("Tasks");
}
}
}
Il ne nous reste qu’à ajouter la grille et le bouton à l’interface dans Tasks.xaml
<Data:DataGrid x:Name="TasksGrid" Style="{StaticResource MyGridStyle}" ItemsSource="{Binding Tasks}">
</Data:DataGrid>
<Button x:Name="btnRefreshGrid" Click="btnRefreshGrid_Click" Style="{StaticResource MyButtonStyle}" Content="Refresh">
</Button>
Concentrons nous un peu sur le bout de code de la grille et plus particulièrement sur la valeur de l’attribut ItemSource {Binding Tasks}. Cette valeur permet de lier notre grille à l’attribut Tasks de l’objet du DataContext courant. Le DataContext est une propriété de type à la quelle on peut lier (Binding) des composants graphiques, qui contient en général une instance de l’objet qui va peupler nos composants graphiques et qui est hérité par tous les composants graphiques enfants tant qu’il n’est pas redéfini au niveau du composant en lui-même. Nous aurons l’occasion de revenir dessus plus en détail dans un prochain post.
Ajouter les styles suivants au niveau de Styles.xaml :
<Style x:Key="MyGridStyle" TargetType="Data:DataGrid">
<Setter Property="Grid.Row" Value="0"></Setter>
<Setter Property="Grid.Column" Value="0"></Setter>
</Style>
<Style x:Key="MyButtonStyle" TargetType="Button">
<Setter Property="HorizontalAlignment" Value="Left"></Setter>
<Setter Property="MaxWidth" Value="100"></Setter>
<Setter Property="Grid.Row" Value="1"></Setter>
<Setter Property="Grid.Column" Value="0"></Setter>
</Style>
Ajouter l’espace de noms System.Windows.Controls au niveau de Styles.xaml et Tasks.xaml
xmlns:Data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
Dans Tasks.xaml.cs, positionnez vous dans le constructeur et ajouter le code suivant :
TasksViewModel tasksvm = new TasksViewModel();
this.DataContext = tasksvm;
tasksvm.FillTasks();
Tout ce qu’on fait ici c’est dire que le DataContext de la classe Tasks est une nouvelle instance de notre ViewModel et on rempli la propriété Tasks. Vu qu’on a lié notre grille à la proprété Task, lorsque cette dernière sera remplie et donc modifiée elle déclanchera l’évènement PropertyChanged et le moteur de binding va rafraîchir le contenu de la grille.
Et enfin, rajouter cette méthode dans la classe Tasks dans Tasks.xaml.cs qui va s’exécuter lors du click du bouton pour rafraîchir le contenu de la grille.
private void btnRefreshGrid_Click(object sender, RoutedEventArgs e)
{
((TasksViewModel)this.DataContext).FillTasks();
}
Vous pouvez maintenant éxecuter, vous devriez avoir quelque chose qui ressemble à ça (n’oubliez pas de remplir la base J)
Vous pouvez aussi modifier le contenu de la table et cliquer sur le bouton rafraîchir qui va mettre à jour la propriété Tasks, cette mise à jour va être notifiée au moteur de binding qui va redessiner la grille.
Une dernière explication par rapport à la grille, vous avez certainement remarqué qu’il y a bien 3 colonnes qui correspondent bien aux 3 proriétés de la classe Task. Mais ce qu’il faut surtout remarquer c’est que la colonnes « Realized » a été automatiquement dessinée sous forme de checkbox. En effet, par défaut le DataGrid s’adapte au type de la donnée qu’il affiche et ceci en associant à chaque type un DataTemplate par défaut.
Conclusion
A travers cet exemple basqiue on a introduit plusieurs notions sur les quels on va revenir plus en détail dans de prochains postes :
- Le DataContext et le databinding
- Le pattern MVVM
- Le DataGrid
- Les styles
A très bientôt ;)