Accueil > Silverlight > Utiliser les modèles de données implicites en Silverlight 5

Utiliser les modèles de données implicites en Silverlight 5

Toujours dans mon exploration des nouveautés apportées par Silverlight 5 dans sa version Béta 1, je vais parler dans ce billet du modèle de donnée implicite qui est une fonctionnalité qui manquait à Silverlight et qui était déjà intégrée dans WPF.

Un modèle de données (data template) kézako ?
Un modèle de données est un modèle qui représentera une structure de données 😉 que nous définissons à l’aide du xaml (la plupart du temps ;-)) dans les ressources de notre application en utilisant la balise DataTemplate . Par exemple nous avons une classe représentant un bien immobilier nommée BienImmobilier définie comme suit :

public class BienImmobilier
{
	public string Identifiant { get; set; }
	public string Description { get; set; }
	public string Localisation { get; set; }
	public decimal LoyerMensuel { get; set; }
	public decimal Charge { get; set; }
}

Le modèle de données qu’on va utiliser pour représenter cette classe est le suivant :

<DataTemplate x:Key="BienImmobilierTemplate">
	<Border BorderBrush="Gray" BorderThickness="1">
		<Grid Width="400" >
			<Grid.RowDefinitions>
				<RowDefinition />
				<RowDefinition />
				<RowDefinition />
				<RowDefinition />
			</Grid.RowDefinitions>
			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="Auto" />
				<ColumnDefinition Width="*" />
			</Grid.ColumnDefinitions>
		
			<TextBlock FontWeight="Bold" Text="Localisation" Grid.Column="0" Grid.Row="0" Margin="0,0,2,0" />
			<TextBlock FontWeight="Bold" Text="Loyer mensuel" Grid.Column="0" Grid.Row="1" Margin="0,0,2,0" />
			<TextBlock FontWeight="Bold" Text="Charge" Grid.Column="0" Grid.Row="2" Margin="0,0,2,0" />
			<TextBlock FontWeight="Bold" Text="Description" Grid.Column="0" Grid.Row="3" Margin="0,0,2,0" />
		
			<TextBlock Text="{Binding Path=Localisation, Mode=OneWay}" Grid.Column="1" Grid.Row="0" />
			<TextBlock Text="{Binding Path=LoyerMensuel, Mode=OneWay}" Grid.Column="1" Grid.Row="1" />
			<TextBlock Text="{Binding Path=Charge, Mode=OneWay}" Grid.Column="1" Grid.Row="2" />
			<TextBlock Text="{Binding Path=Description, Mode=OneWay}" Grid.Column="1" Grid.Row="3" TextWrapping="Wrap" />
		</Grid>
	</Border>
</DataTemplate>

Dans le code xaml ci-dessus nous avons utiliser l’attribut x:key qui permet d’attribuer une clef à notre modèle. Pour pouvoir utiliser notre modèle par exemple dans une ListBox on fera comme suit en renseignant la valeur de la proprieté ItemTemplate :

<StackPanel x:Name="LayoutRoot" Background="White" Width="420" >
	<ListBox x:Name="myListBox" 
			 ItemsSource="{Binding}" 
			 ItemTemplate="{StaticResource BienImmobilierTemplate}" />
</StackPanel>

Quand utiliser un modèle de données implicite
Jusque là pas de problème mais on est obligé de passer par la clef de notre modèle de données définie dans les ressources pour pouvoir l’utiliser dans notre ListBox. Les modèles de données implicites nous évitent de passer par la clef et bien plus. Imaginons que nous ajoutons deux nouvelles classes Maison et Appartement dérivant de notre classe BienImmobilier.

public class Maison : BienImmobilier
{
	public bool Jardin { get; set; }
}

public class Appartement : BienImmobilier
{
	public ushort Etage { get; set; }
	public bool Ascenseur { get; set; }
}

Ces deux nouvelles classes ne possèdent pas les mêmes informations et le modèle de données précédent ne nous permet d’afficher les informations en fonction de chaque type de la classe de base. C’est là qu’intervient les modèles de données implicites. Avec ces derniers nous allons pouvoir définir un modèle pour chaque classe dérivée. Silverlight se chargera ensuite d’utiliser à notre place de façon dynamque le modèle correspondant à chaque type et donc pas besoin de renseigner la propriété ItemTemplate de notre ListBox ;-).
Un modèle de données implicite se définit en utilisant l’attribut DataType qui doit recevoir un type. Les modèles de données associés aux deux classes dérivées sont pour la classe Appartement :

<DataTemplate DataType="local:Appartement">
	<Border BorderBrush="Gray" BorderThickness="1">
		<Grid Width="400" >
			<Grid.RowDefinitions>
				<RowDefinition />
				<RowDefinition />
				<RowDefinition />
				<RowDefinition />
				<RowDefinition />
				<RowDefinition />
			</Grid.RowDefinitions>
			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="Auto" />
				<ColumnDefinition Width="*" />
			</Grid.ColumnDefinitions>
		
			<TextBlock FontWeight="Bold" Text="Localisation" Grid.Column="0" Grid.Row="0" Margin="0,0,2,0" />
			<TextBlock FontWeight="Bold" Text="Loyer mensuel" Grid.Column="0" Grid.Row="1" Margin="0,0,2,0" />
			<TextBlock FontWeight="Bold" Text="Charge" Grid.Column="0" Grid.Row="2" Margin="0,0,2,0" />
			<TextBlock FontWeight="Bold" Text="Etage" Grid.Column="0" Grid.Row="3" Margin="0,0,2,0" />
			<TextBlock FontWeight="Bold" Text="Ascenseur" Grid.Column="0" Grid.Row="4" Margin="0,0,2,0" />
			<TextBlock FontWeight="Bold" Text="Description" Grid.Column="0" Grid.Row="5" Margin="0,0,2,0" />
		
			<TextBlock Text="{Binding Path=Localisation, Mode=OneWay}" Grid.Column="1" Grid.Row="0" />
			<TextBlock Text="{Binding Path=LoyerMensuel, Mode=OneWay}" Grid.Column="1" Grid.Row="1" />
			<TextBlock Text="{Binding Path=Charge, Mode=OneWay}" Grid.Column="1" Grid.Row="2" />
			<TextBlock Text="{Binding Path=Etage, Mode=OneWay}" Grid.Column="1" Grid.Row="3" Margin="0,0,2,0" />
			<CheckBox IsChecked="{Binding Path=Charge, Mode=OneWay}" IsEnabled="False" Grid.Column="1" Grid.Row="4" Margin="0,0,2,0" />
			<TextBlock Text="{Binding Path=Description, Mode=OneWay}" Grid.Column="1" Grid.Row="5" TextWrapping="Wrap" />
		</Grid>
	</Border>
</DataTemplate>

pour la classe Maison:

<DataTemplate DataType="local:Maison">
	<Border BorderBrush="Gray" BorderThickness="1">
		<Grid Width="400" >
			<Grid.RowDefinitions>
				<RowDefinition />
				<RowDefinition />
				<RowDefinition />
				<RowDefinition />
				<RowDefinition />
			</Grid.RowDefinitions>
			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="Auto" />
				<ColumnDefinition Width="*" />
			</Grid.ColumnDefinitions>

			<TextBlock FontWeight="Bold" Text="Localisation" Grid.Column="0" Grid.Row="0" Margin="0,0,2,0" />
			<TextBlock FontWeight="Bold" Text="Loyer mensuel" Grid.Column="0" Grid.Row="1" Margin="0,0,2,0" />
			<TextBlock FontWeight="Bold" Text="Charge" Grid.Column="0" Grid.Row="2" Margin="0,0,2,0" />
			<TextBlock FontWeight="Bold" Text="Jardin" Grid.Column="0" Grid.Row="3" Margin="0,0,2,0" />
			<TextBlock FontWeight="Bold" Text="Description" Grid.Column="0" Grid.Row="4" Margin="0,0,2,0" />

			<TextBlock Text="{Binding Path=Localisation, Mode=OneWay}" Grid.Column="1" Grid.Row="0" />
			<TextBlock Text="{Binding Path=LoyerMensuel, Mode=OneWay}" Grid.Column="1" Grid.Row="1" />
			<TextBlock Text="{Binding Path=Charge, Mode=OneWay}" Grid.Column="1" Grid.Row="2" />
			<CheckBox IsChecked="{Binding Path=Charge, Mode=OneWay}" IsEnabled="False" Grid.Column="1" Grid.Row="3" Margin="0,0,2,0" />
			<TextBlock Text="{Binding Path=Description, Mode=OneWay}" Grid.Column="1" Grid.Row="4" TextWrapping="Wrap" />
		</Grid>
	</Border>
</DataTemplate>

La solution Visual Studio est téléchargeable ici.

Publicités
Catégories :Silverlight Étiquettes : ,
  1. Aucun commentaire pour l’instant.
  1. No trackbacks yet.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :