Tutoriel : Utilisation de LiveBindings et de modules de données avec Metropolis UI
Remonter à Tutoriels Bases de données et LiveBindings
Ce tutoriel vous guidera lors des étapes relatives à la connexion de données au template Grille Metropolis UI de FireMonkey. Ce tutoriel consiste à remplir les zones de liste GridView avec des données liées au DetailView, et à ajouter des boutons de navigation en utilisant des actions pour naviguer dans les données de la fiche DetailView.
Sommaire
Etape 1 : Création du projet
Créez un nouveau projet. Sélectionnez Fichier > Nouveau > Autre > Projets Delphi > Application FireMonkey Metropolis UI, puis Application Grille Metropolis UI dans l'expert qui s'ouvre.
- Cliquez avec le bouton droit sur le nom de projet (par exemple Project1.exe) dans le Gestionnaire de projets et sélectionnez Ajouter nouveau > Autre.
- Dans la page Projets Delphi | Fichiers Delphi, sélectionnez Module de données.
- Renommez l'unité Module de données dans le Gestionnaire de projets en DataModule.pas.
- Ouvrez l'unité GridView.pas et accédez à Fichier > Utiliser l'unité et sélectionnez DataModule.pas. Cette opération équivaut à ajouter manuellement DataModule.pas à la clause Uses de l'unité GridView.pas.
- De la même façon, ajoutez l'unité DataModule.pas à la clause uses de l'unité DetailView.pas.
- Ouvrez l'unité DataModule.pas et ajoutez un composant TPrototypeBindSource depuis la palette d'outils.
- Cliquez avec le bouton droit sur le composant PrototypeBindSource1 et sélectionnez la commande Ajouter un champ.
- Sélectionnez plusieurs éléments afin d'ajouter plusieurs champs de données exemple. Assurez-vous de sélectionner BitmapNames et Bitmaps parmi les différents éléments.
- Retournez dans GridView.pas et sélectionnez le contrôle ListBox1 (assurez-vous de ne pas sélectionner les éléments individuels MetroListBoxItem).
- Accédez au menu Voir et choisissez la commande Concepteur LiveBindings pour afficher le Concepteur LiveBindings. Si vous ne visualisez pas le module de données dans le Concepteur LiveBindings, cliquez avec le bouton droit dans le concepteur et sélectionnez la commande Actualiser le concepteur.
Etape 2 : Création de la liaison dynamique (LiveBindings)
Dans le Concepteur LiveBindings :
- Liez
DataModule1.PrototypeBindSource1.BitmapName1
àListBox1.ItemText
. - Sélectionnez votre nouveau LiveBinding en cliquant dessus dans le concepteur.
- Dans l'inspecteur d'objets, accédez à
ListItemStyle
et sélectionnez MetropolisUI dans le menu déroulant.
A ce moment, les éléments du contrôle ListBox1 sont automatiquement remplis avec les données via LiveBindings. - Liez
DataModule1.PrototypeBindSource1.ColorsName1
àListBox1.Item.SubTitle
DataModule1.PrototypeBindSource1.Bitmap1
àListBox1.Item.Icon
.
Les éléments contenus dans ListBox1 sont mis à jour une nouvelle fois. - Ajoutez de nouveaux champs dans le composant TPrototypeDataSource1 depuis l'unité DataModule.pas et répétez les quatre étapes précédentes pour les autres zones de liste (ListBox2 et ListBox3).
Enregistrez votre projet à ce stade et continuez en suivant les étapes ci-dessous :
- Ouvrez l'unité DetailView.pas et liez
DataModule1.PrototypeBindSource1.Bitmap1
àIllustration1.Bitmap
. - Liez
DataModule1.PrototypeBindSource1.ColorsName1
àItem.SubTitle.Text
,DataModule1.PrototypeBindSource1.BitmapName1
àItemTitle.Text
.
Enregistrez de nouveau vos fichiers. Retournez dans l'unité GridView.pas et sélectionnez le contrôle ListBox1. Accédez à l'inspecteur d'objets et configurez un événement OnChange avec le code suivant :
begin
if ListBox1.ItemIndex <> -1 then
begin
DataModule1.PrototypeBindSource1.ItemIndex := ListBox1.ItemIndex;
Application.GetDeviceForm('DetailView').Show;
end;
end;
Répétez cette procédure pour les deux autres zones de liste (ListBox2 et ListBox3).
Retournez dans l'unité DetailView.pas et :
- Ajoutez deux boutons sur la fiche. Placez-les à votre convenance.
- Depuis la palette d'outils, ajoutez un composant TActionList sur la fiche.
- Pour Button1, accédez à l'inspecteur d'objets et recherchez la propriété
Action
. Dans le menu déroulant, sélectionnez Nouvelle action standard > LiveBindings et choisissez TFMXBindNavigatorPrior.
Etendez maintenant l'action dans l'inspecteur d'objets et double-cliquez sur la propriétéDataSource
.
Cela définit automatiquement le composant DataModule1.PrototypeBindSource1. - Pour Button2, accédez à l'inspecteur d'objets et recherchez la propriété
Action
. Depuis le menu déroulant, sélectionnez Nouvelle action standard > LiveBindings et choisissez TFMXBindNavigatorNext. Etendez maintenant l'action dans l'inspecteur d'objets et double-cliquez sur la propriétéDataSource
. Cela définit automatiquement le composant DataModule1.PrototypeBindSource1. - Pour chacun des boutons, effacez maintenant la propriété
Text
des actions du bouton et la propriétéText
du bouton. - Pour Button1, définissez la propriété
StyleLookup
sur flipviewleftbutton. Quant à Button2, définissez la même propriété sur flipviewrightbutton. L'apparence des boutons devrait changer.
Les résultats
Exécutez l'application en appuyant sur F9 ou en utilisant la commande de menu Exécuter > Exécuter.
Sélectionnez les éléments individuels et observez comment LiveBindings fournit automatiquement les données aux éléments des vues Grille/Détail.