Tutoriel : Utilisation de TPrototypeBindSource et du Concepteur LiveBindings

De RAD Studio
Aller à : navigation, rechercher

Remonter à Tutoriels Bases de données et LiveBindings


Ce tutoriel montre comment utiliser le Concepteur LiveBindings et TPrototypeBindSource afin de créer visuellement des LiveBindings entre les contrôles pour le développement rapide des applications qui nécessitent peu de code, ou pas du tout.

Remarque : TPrototypeBindSource peut être utilisé afin de générer des données exemple pour les LiveBindings dans votre projet. Après avoir réalisé le prototype d'une application, configurez la source de données réelle afin de pouvoir visualiser les nouveaux champs de source de données dans la conception LiveBindings. Utilisez le Concepteur LiveBindings pour connecter tous les contrôles et toutes les propriétés à la nouvelle source de données. Lorsqu'une propriété ou un contrôle est connecté à la nouvelle source de données, la connexion à la source de liaison de prototype est automatiquement supprimée.

Etape 1 : Création du projet

Créez un nouveau projet. Choisissez une application FireMonkey HD pour cet exemple.

  1. Glissez-déposez un composant TPrototypeBindSource sur le Concepteur de fiches.
  2. Dans la Palette d'outils, localisez le composant TBindNavigator et déposez-le sur la fiche.
  3. Faites de même avec les contrôles TColorListBox, TRectangle et TEdit.

Dans ce tutoriel, vous apprendrez comment construire une application qui utilise plusieurs méthodes (navigation dans un jeu de données aléatoires avec des couleurs, typage direct d'un ID de couleur, ou sélection d'une couleur dans une liste) pour changer la couleur de remplissage d'un rectangle.

L'image suivante représente la fiche après y avoir placé les composants.

CompDesignPrototypeTutorial.png

Etape 2 : Ajout de champs

Cliquez avec le bouton droit sur le composant TPrototypeBindSource et sélectionnez la commande Ajouter un champ....

LBDOBS2.png

Dans la boîte de dialogue Ajouter un champ, sélectionnez AlphaColors pour ajouter un champ de couleur à la portée de liaison des objets.

AddFieldAlphaColors.png

Etape 3 : Création de LiveBindings

Lancez le Concepteur LiveBindings s'il n'est pas déjà ouvert (Voir | Concepteur LiveBindings).

Au début, votre diagramme de liaisons doit être similaire à celui de l'image ci-dessous, sans lignes de connexion, donc sans liaisons.

LiveBindingsDesignerPrototype.png

Cliquez maintenant sur les trois points dans le bloc Rectangle1 du Concepteur LiveBindings, et depuis la boîte de dialogue Membres liables, choisissez la propriété Fill.Color. Cliquez sur OK.

LBDOBS5.png

A ce stade, créez simplement les liaisons :

  • Liez le membre AlphaColor1 de l'objet PrototypeBindSource1 au membre Color de l'objet ColorListBox1.
  • Liez le membre AlphaColor1 de l'objet PrototypeBindSource1 au membre Text de l'objet Edit1.
  • Liez le membre AlphaColor1 de l'objet PrototypeBindSource1 au membre Fill.Color de l'objet Rectangle1.
  • Liez le membre * de l'objet BindObjectScope1 au membre * de l'objet BindNavigator1.

Votre diagramme de liaisons doit ressembler à celui de l'image suivante.

LiveBindingsDesignerPrototypeFinal2.png

Les résultats

Sans écrire de code, vous venez d'obtenir une application fonctionnelle que vous êtes prêt à tester. Exécutez l'application en appuyant sur F9 ou en utilisant la commande de menu Exécuter > Exécuter.

Utilisez l'application en :

  • Changeant les couleurs depuis le navigateur de liaisons. La source de données (TPrototypeBindSource) a un jeu de couleurs aléatoires qui seront utilisées pour remplir le rectangle, mettre à jour la zone d'édition, ou si l'ID de couleur correspond à une couleur existante dans la liste, mettre à jour la zone de liste de couleurs.
  • Changeant la couleur depuis la zone de liste de couleurs.
  • Tapant un ID de couleur dans la zone d'édition (essayez par exemple 4292613180 pour une nuance de rouge).
  • Tapant un ID de couleur dans la zone d'édition, ou en sélectionnant une couleur dans la zone de liste de couleurs, et en appuyant sur Appliquer sur le navigateur de liaisons pour stocker la couleur dans la source de données.

LBDOBS7.png

Voir aussi