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.

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.

1. 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.
   
   
   
   
2. Dans la page Projets Delphi | Fichiers Delphi, sélectionnez Module de données.
   
   
   
   
3. Renommez l'unité Module de données dans le Gestionnaire de projets en DataModule.pas.
4. 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.
5. De la même façon, ajoutez l'unité DataModule.pas à la clause uses de l'unité DetailView.pas.
6. Ouvrez l'unité DataModule.pas et ajoutez un composant TPrototypeBindSource depuis la palette d'outils.
7. Cliquez avec le bouton droit sur le composant PrototypeBindSource1 et sélectionnez la commande Ajouter un champ.
   
   
   
   
8. 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.
9. Retournez dans GridView.pas et sélectionnez le contrôle ListBox1 (assurez-vous de ne pas sélectionner les éléments individuels MetroListBoxItem).
10. 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 :

1. Liez DataModule1.PrototypeBindSource1.BitmapName1 à ListBox1.ItemText.
   
   
   
   
2. Sélectionnez votre nouveau LiveBinding en cliquant dessus dans le concepteur.
3. 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.
4. 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.
5. 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 :

1. Ouvrez l'unité DetailView.pas et liez DataModule1.PrototypeBindSource1.Bitmap1 à Illustration1.Bitmap.
   
   
   
   
2. 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 :

1. Ajoutez deux boutons sur la fiche. Placez-les à votre convenance.
   
   
   
   
2. Depuis la palette d'outils, ajoutez un composant TActionList sur la fiche.
3. 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.
4. 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.
5. Pour chacun des boutons, effacez maintenant la propriété Text des actions du bouton et la propriété Text du bouton.
6. 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.

Voir aussi

• LiveBindings dans RAD Studio
• Concepteur LiveBindings
• Développement des applications Metropolis UI