Tài liệu XAML- P5 pdf

Plusieurs sources de données Dans l’exemple, nous avons travaillé avec un seul DataContext défini pour tout l’écran. Il est possible de définir un DataContext différent pour chaque élément de la fenêtre. Il est également possible d’utiliser une table pour charger un contrôle de type liste. Si vous souhaitez reproduire l’exemple, modifiez votre base de données et recréez le schéma XSD pour refléter le graphique ci-dessous. Renvoi Pour créer le schéma, reportez-vous à la page 192. Ensuite, nous devons apporter quelques modifications au code .NET. Public Sub New() InitializeComponent() m_adapter = New _ DBXAMLDataSetTableAdapters.Carnet_adressesTableAdapter m_adapter.Fill(m_data.Carnet_adresses) Dim a dapter As New _ DBXAMLDataSetTableAdapters.PaysTableAdapter adapter.Fill(m_data.Pays) End Sub Non seulement nous chargeons le membre m_data avec la DataTable Carne- t_adresses mais nous chargeons également la table Pays. Private Sub Win_loaded(ByVal sender As Object _ , B yVal e As RoutedEventArgs) m_i=0 Me.DataContext = m_data.Carnet_adresses.Rows(m_i) Me.lstPays.DataContext = m_data End Sub b Figure 7-9 : Nouveau schéma XSD Lier les données à un DataSet 7 Le guide du codeur • 201 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. La table Pays est maintenant chargée dans le DataSet et le DataContext de la liste est différent de celui du reste de l’écran. Ajoutez ces balises dans le code XAML. <Label Canvas.Top="100" Canvas.Left="150"> Pays </Label> <ListBox Name="lstPays" Canvas.Top="100" Canvas.Left="200" ItemsSource="{Binding P ath=Pays}" DisplayMemberPath="Pays"/> Remarquez que la source est non pas un champ mais une table. C’est l’attribut DisplayMemberPath qui précise le nom du champ à afficher. Dans cet exemple, le nom est le même car il s’agit du champ Pays dans la table Pays. Cette solution fonctionne parfaitement pour charger la liste mais, du coup, il ne nous est pas possible de lier la valeur à notre carnet d’adresses. La solution la plus simple est de modifier à nouveau le code .NET. Private Sub Win_loaded(ByVal sender As Object _ , ByVal e A s RoutedEventArgs) m_i=0 Me.DataContext = m_data.Carnet_adresses.Rows(m_i) Dim bind As New Binding("Pays") bind.Source = m_data Me.lstPays.SetBinding(ListBox.ItemsSourceProperty _ , bind) End Sub m Figure 7-10 : ListBox liée à un DataSet 7 Lier les données à son interface utilisateur 202 • Le guide du codeur Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Le code XAML devient alors : <ListBox Name="lstPays" Canvas.Top="100" Canvas.Left="200" DisplayMemberPath="NomPays" SelectedValue="{Binding Path=Pays}" SelectedValuePath="Id" /> De cette façon, une source spécifique est définie pour la liste et la source par défaut pour la valeur. Cet exemple démontre non seulement qu’il est possible de réaliser des liaisons vers divers objets mais également que la liaison peut être effectuée sur différents attributs. Vous pourriez par exemple définir une liaison sur la couleur du fond. 7.2 Lier les données à un objet métier Au lieu de lier les données à un DataSet, vous pouvez également les lier à un objet quelconque. Généralement, il s’agira d’un objet dit métier. En effet, en programmation professionnelle, les développements sont généralement divisés en trois couches, la couche de liaison à base de données, la couche métier, dite business, et la couche de présentation. La couche de présentation lit les données non pas directement dans la couche d’accès à la base de données mais uniquement dans la couche métier, qui prendra en charge une éventuelle transformation des données. Nous allons construire un objet métier capable de recevoir les données de notre exemple. Public Class Business Private m_nom As String Private m_prenom As String Private m_adresse As String Private m_cp As String Private m_localite As String Private m_pays As Integer Public Property Nom() As String Get Return m_nom End Get Set(ByVal value As String) m_nom = value.ToUpper() End Set Lier les données à un objet métier 7 Le guide du codeur • 203 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. End Property Public Property Prenom() As String Get Return m_prenom End Get Set(ByVal value As String) m_prenom = valueli End Set End Property Comme vous pouvez le voir, il s’agit essentiellement de définir des membres privés et les propriétés qui leur sont associées. Vous pourriez être tenté de définir directement les membres comme publics et ainsi de vous passer des propriétés. Toutefois, il vaut mieux suivre dès le départ les bonnes pratiques et respecter cette règle qui apportera dans l’évolution de votre classe beaucoup plus de souplesse. Sans compter que le membre défini peut pour des raisons métier ou techniques être stocké d’une certaine manière et présenté aux utilisateurs de la classe d’une autre façon. Public Property Adresse() A s String Get Return m_adresse End Get Set(ByVal value As String) m_adresse = value End Set End Property Public Property CP() As String Get Return m_cp End Get Set(ByVal value As String) m_cp = value End Set End Property Public Property Localite() As String Get Return m_localite End Get Set(ByVal value As String) m_localite = value End Set End Property 7 Lier les données à son interface utilisateur 204 • Le guide du codeur Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Public Property Pays() As Integer Get Return m_pays End Get Set(ByVal value As Integer) m_pays = value End Set End P roperty Pour une question de simplicité, la méthode de chargement des données est incluse dans l’objet Business. Il existe beaucoup de techniques différentes pour réaliser les couches, mais nous entrons là dans des problèmes d’architecture bien éloignés de ce qui nous occupe. Toutefois, même avec XAML et peut-être encore plus avec XAML, pensez à l’architecture que vous allez implémenter dans votre programme avant de commencer la moindre lige de code. Public Sub Charger(ByVal val As Short) If val = 1 Then m_nom = "Dupond" m_prenom = "Louis" m_adresse = "Rue des coteaux, 23" m_localite = "Pillion" m_cp = "23456" m_pays = 22 Else m_nom = "Durand" m_prenom = "Albert" m_adresse = "Rue des poteaux, 2" m_localite = "Paille" m_cp = "23765" m_pays = 24 End If End S ub End Class Le but de cet exemple n’est pas de vous apprendre à travailler en couche. La classe métier qui vous est présentée ici est très simplifiée et la méthode de chargement des données n’est là que pour permettre d’afficher simplement un résultat. Typiquement, nous devrions trouver dans la classe des méthodes de manipulation, de contrôle, de transformation des données. L’interaction entre l’objet métier et la couche d’accès aux données n’est pas gérée par XAML. Il s’agit de .NET pur. Le code .NET doit être adapté pour charger l’objet métier. Partial Public Class Window1 Inherits Window Lier les données à un objet métier 7 Le guide du codeur • 205 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. En tout premier, nous devons déclarer notre objet métier comme membre de la classe. Notez que nous avons également conservé le DataSet. Il est encore nécessaire pour charger la liste des pays. Private m_data As New DBXAMLDataSet Private m_business As New Business Dans le constructeur, nous chargeons les données dans le DataSet et dans l’objet métier. Public Sub New() InitializeComponent() Dim adapter As New DBXAMLDataSetTableAdapters.PaysTableAdapter adapter.Fill(m_data.Pays) m_business.Charger(1) End Sub La liaison proprement dite est réalisée lors du chargement de la fenêtre. Private Sub Win_loaded(ByVal sender As Object , ByVal e A s RoutedEventArgs) Dim bind As New Binding("Pays") bind.Source = m_data Me.lstPays.SetBinding(ListBox.ItemsSourceProperty , bind) Me.DataContext = m_business End Sub Public Sub Click_Prev(ByVal sender As Object _ , ByVal e A s RoutedEventArgs) ’ Code pour précedent m_business.Charger(1) Me.DataContext = Nothing Me.DataContext = m_business End Sub Public Sub Click_Next(ByVal sender As Object _ , ByVal e A s RoutedEventArgs) ’ Code pour suivant m_business.Charger(2) Me.DataContext = Nothing Me.DataContext = m_business End Sub End Class Comme c’était le cas pour le DataSet, l’objet métier est déclaré comme champ de la classe. Il est initialisé dans le constructeur et placé comme source de 7 Lier les données à son interface utilisateur 206 • Le guide du codeur Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. données dans la méthode Win_Load. Il manque bien évidemment l’enregistre- ment des données de l’objet métier mais, là encore, il s’agit de programmation .NET classique. Rafraîchissement Afin de provoquer le rafraîchissement de l’écran lorsque les valeurs sont rechargées, la valeur Nothing est chargée dans l’attribut DataContext et est ensuite à nouveau chargée par m_business. Selon les circonstances, vous pourriez avoir plusieurs objets métier et changer le DataContext pour qu’il pointe sur l’un ou l’autre. Dans ce cas, typiquement, vous aurez une collection d’objets métier. Le fichier XAML n’est pas modifié Les liaisons se font sur les noms des propriétés de la classe. Comme nous avons donné les mêmes noms à nos propriétés que les noms des champs dans le schéma xsd, le code XAML peut rester tel que. En définitive, cet exemple démontre qu’il est non seulement possible de lier n’importe quelle propriété à une donnée externe mais également que la donnée externe peut elle-même être conservée dans n’importe quelle classe d’objet. 7.3 Lier les données sans utiliser le code .NET Jusque-là, nous avons vu comment lier les contrôles à un objet mais UNIQUE- MENT via le code .NET. Il est également possible de réaliser cette liaison directement dans le code XAML. Pour cela, vous disposez de deux outils différents. Le XmlDataProvider pour récupérer les données d’une source XML ou ObjectDataProvider pour récupérer les données d’un objet. Nous allons en premier voir comment récupérer les informations dans la source XML. Tout d’abord, nous devons créer un fichier de données. Recopiez le code XML suivant dans un fichier que vous nommez Data.xml. <Table> <Name>Direction</Name> <Records> Lier les données sans utiliser le code .NET 7 Le guide du codeur • 207 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. <Record> <Nom>Durant</Nom> <Prenom>Louis</Prenom> <Titre>Directeur general</Titre> </Record> <Record> <Nom>Dupont</Nom> <Prenom>Leon</Prenom> <Titre>Product manager</Titre> </Record> <Record> <Nom>Durand</Nom> <Prenom>Carine</Prenom> <Titre>Directrice generale adjointe</Titre> </Record> </Records> </Table> Ce fichier contient donc une simulation de table dont le nom serait Direction et qui contient trois enregistrements. La structure de ce fichier XML n’est absolument pas une structure obligatoire et n’est reprise qu’à titre d’exemple. Une fois ce fichier créé, nous pouvons maintenant réaliser notre page XAML qui va lire directement ce fichier. Les données seront affichées dans une ListView. Ce sera pour nous l’occasion de découvrir ce contrôle, qui se prête particulièrement bien à l’affichage de données enregistrées dans une source externe. <Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Grid > <Grid.Resources > <XmlDataProvider x:Key="data" Source=" Data.XML"/> </Grid.Resources > <Grid.DataContext > <Binding Source="{StaticResource data}" XPath="/Table/Records"/> </Grid.DataContext > <ListView Height="92" Margin="13,18,19,0" Name="MaListView" VerticalAlignment="Top" ItemsSource="{Binding XPath=Record/Nom}" </Grid > </Page > 7 Lier les données à son interface utilisateur 208 • Le guide du codeur Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Comme vous pouvez le constater, la balise XmlDataProvider est extrêmement simple d’utilisation puisqu’il ne s’agit que de donner un nom via l’attribut x:Key et de définir le fichier en utilisant l’attribut Source. Comme pour les techniques précédentes, nous devons utiliser le DataContext. Cette fois, nous le faisons directement dans le fichier XAML puisque la source est définie en tant que ressource statique. L’attribut XPath va permettre de déterminer dans le fichier XML le nœud qui contient les données qui nous intéressent. Il ne reste plus alors qu’à définir la ListView. En dehors de l’attribut ItemSource, qui permet de définir les données associées, rien de bien neuf. Notez que, pour définir les données, nous utilisons à nouveau XPath. Le contenu du nœud Nom inscrit dans chaque nœud Record de la source de données (DataContext) servira à définir un élément de la liste. Si nous désirons afficher plus d’une information par liste, vous pouvez utiliser l’attribut ItemTemplate de notre ListView. Pour cela, nous devons au préalable définir un DataTemplate.LeDataTemplate sert à décrire le contenu et la façon de représenter chacun des éléments de la liste. Il se place également dans la zone des ressources. <Page xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Grid > <Grid.Resources > <XmlDataProvider x:Key="data" Source=" Data.XML"/> b Figure 7-11 : Affichage du contenu d’un fichier XML dans une ListView Lier les données sans utiliser le code .NET 7 Le guide du codeur • 209 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. <DataTemplate x:Key="DataListView"> <WrapPanel > <Label Content="{Binding XPath=Nom}"/> <Label Content="{Binding XPath=Prenom}"/> <Label Content="{Binding XPath=Titre}"/> </WrapPanel > </DataTemplate > </Grid.Resources > <Grid.DataContext > <Binding Source="{StaticResource data}" XPath="/Table/Records"/> </Grid.DataContext > <ListView Height="92" Margin="13,18,19,0" Name="MaListView" VerticalAlignment="Top" ItemsSource="{Binding XPath=Record}" ItemTemplate="{StaticResource D ataListView}"/> </Grid > </Page > Contenu d’un DataTemplate Comme vous pouvez le remarquer, un DataTemplate peut contenir n’importe quel code XAML ou presque. b Figure 7-12 : Affichage d’une ListView en utilisant un DataTemplate 7 Lier les données à son interface utilisateur 210 • Le guide du codeur Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... objet en utilisant ObjectDataProvider Please purchase PDF codeur 218 • Le guide du Split-Merge on www.verypdf.com to remove this waterma Ch apit re 8 Fonctionnalités avancées Appliquer des transformations sur les contrôles Créer une ressource Créer un style Checklist 220 223 227 247 Please purchase PDF Split-Merge on www.verypdf.com to remove this waterma 8 Fonctionnalités avancées... Durant Louis Directeur general Durand Carine Please purchase PDF codeur 212 • Le guide du Split-Merge on www.verypdf.com to remove this waterma Lier les données sans utiliser le code NET 7 Directrice generale adjointe Dupont... Content="{Binding XPath=Nom}"/> Please purchase PDF Split-Merge on www.verypdf.com to du codeur •this waterma Le guide remove 213 7 Lier les données à son interface utilisateur ... ObjectDataProvider Nous devons tout d’abord créer une classe Prenons comme exemple la classe Auteur, qui contient son nom et une collection de livres qu’il a écrits Please purchase PDF codeur 214 • Le guide du Split-Merge on www.verypdf.com to remove this waterma Lier les données sans utiliser le code NET 7 b Figure 7-15 : Le TreeView ouvert Pour cela, il nous faut une classe Livre Public Class Livre Private... Ensuite, nous avons besoin d’une collection typée pour stocker les objets Livre Public Class Livres Inherits ObservableCollection(Of Livre) Public Sub New() End Sub End Class Please purchase PDF Split-Merge on www.verypdf.com to du codeur •this waterma Le guide remove 215 7 Lier les données à son interface utilisateur Nous pouvons maintenant créer la classe Auteur Public Class Auteur Private _name As String... ConstructorParameters, que nous n’utiliserons pas ici, permet de transmettre des paramètres au constructeur Les autres techniques utilisées ont déjà été vues précédemment Please purchase PDF codeur 216 • Le guide du Split-Merge on www.verypdf.com to remove this waterma Lier les données sans utiliser le code NET 7 Please purchase PDF Split-Merge on www.verypdf.com to du codeur •this waterma Le guide remove 211 7 Lier les données à son interface utilisateur b Figure 7-13 : Affichage d’un GridView Déplacer les colonnes Pour permettre à l’utilisateur... Pour la première fois, nous utilisons une propriété de la classe non pas en la définissant grâce à un attribut mais bien comme un nœud fils de notre nœud Label Please purchase PDF codeur 220 • Le guide du Split-Merge on www.verypdf.com to remove this waterma Appliquer des transformations sur les contrôles 8 Il est également possible de réaliser une modification d’échelle Mon premier label Please purchase PDF Split-Merge on www.verypdf.com to du codeur •this waterma Le guide remove 221 8 Fonctionnalités avancées b Figure 8-3 : Une étiquette en 3D Si vous ne trouvez pas votre bonheur dans ces transformations, vous pouvez . données à un DataSet 7 Le guide du codeur • 201 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. La table Pays est maintenant. interface utilisateur 202 • Le guide du codeur Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Le code XAML devient alors : <ListBox