Blog ENI : Toute la veille numérique !
🐠 -25€ dès 75€ 
+ 7 jours d'accès à la Bibliothèque Numérique ENI. Cliquez ici
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Delphi 10.3
  3. FireDAC, FireMonkey et LiveBinding
Extrait - Delphi 10.3 Programmation orientée objet en environnement Windows
Extraits du livre
Delphi 10.3 Programmation orientée objet en environnement Windows
9 avis
Revenir à la page d'achat du livre

FireDAC, FireMonkey et LiveBinding

FireMonkey

La cible de cet ouvrage est pour l’essentiel le développement pour plateforme Windows. De ce fait, il a surtout été utilisé des composants de la VCL pour créer les interfaces graphiques. Cependant, il faut savoir que Delphi fournit par ailleurs un framework appelé FireMonkey, dont les cibles sont l’ensemble des plateformes Windows/iOS/Android/Linux.

Le code pour le manipuler est toujours du Delphi. En général, pour un composant VCL, il existe son alter-ego pour FireMonkey. La grande différence se situe au niveau de la présentation : alors que la VCL encapsule les composants du système d’exploitation, donnant ainsi à l’ensemble une apparence « Windows » classique, il s’agit pour FireMonkey d’un composant dessiné dont l’apparence sera la même quel que soit le système d’exploitation cible.

Dans tous les cas, les codes sont générés en code compilés au plus proche du processeur. Il ne s’agit en aucun cas de code interprété comme le serait du code Java ou .NET Core.

Il existe bien sûr des différences entre FireMonkey et la VCL. IL s’agit en grande partie des règles de gestion des composants graphiques :

  • N’importe quel composant peut être le père ou l’enfant d’un autre composant. Ceci...

LiveBinding

De même, depuis Delphi XE2, Delphi supporte une fonctionnalité de data binding visuel à travers le framework LiveBindings. Il s’agit d’un ensemble de fonctionnalités permettant d’établir des relations entre des propriétés de composants sans écrire de code. Cette mise en relation s’effectue visuellement dans l’éditeur graphique de Delphi (d’où le terme data binding visuel). Même si elles ne s’expriment pas de la même manière, il s’agit de fonctionnalités du langage Delphi similaires au langage XAML du framework WPF (Windows Presentation Foundation) qui représente une partie du framework .NET de Microsoft. 

L’écriture des règles n’est pas évidente, mais il existe un éditeur visuel très abouti qui permet de manipuler le binding de façon très poussée.

Ainsi, en très peu de lignes de code (voir aucune), on peut créer une IHM consommatrice de requêtes SQL ou de modèles de données.

Le LiveBinding est accessible à la fois pour la VCL et FireMonkey, mais en le liant à FireMonkey, le développeur crée facilement des applications multi-plateformes très maintenables.

Migration des outils back-office et E-Commerce en FireMonkey

Migrons à présent l’outil back-office (créé dans le chapitre Connectivité aux bases de données) en FireMonkey dans le but de le rendre accessible à tous les systèmes d’exploitation.

1. Le composant TListView

Dans les implémentations précédentes en VCL, les objets étaient soit représentés dans une grille, soit représentés dans une frame dédiée qui avait été conçue pour afficher les différents éléments de l’objet (à savoir son nom, sa description, son prix et une image représentative). L’agencement de ces éléments était complètement arbitraire et au libre souhait du développeur et/ou de l’UX designer.

Le composant TListView de FireMonkey permet d’effectuer un travail similaire mais complètement assisté par l’IDE : créons un nouveau projet Multi-Device - Blank application et posons un objet TTabControl sur la form et configurons ensuite deux onglets pour ce TTabControl. Posons une TListView dans le premier onglet.

On obtient ainsi l’affichage suivant :

images/15P01.png

Au départ, aucun aperçu de la représentation des éléments n’est généré. Pour le faire apparaître, il faut...

Interagir avec la TListView

1. Le clic

La TListView fournit un grand nombre d’évènements à interfacer. Quand on a des éléments, le réflexe naturel est de cliquer dessus. Ainsi, on peut interfacer l’évènement OnItemClick qui renvoie l’item sur lequel on a cliqué :

procedure TForm5.ListViewProductsItemClick(const 
Sender: TObject; 
 const AItem: TListViewItem); 
var pricestr:string; 
   aBitmap:TBitmap; 
begin 
 pricestr := AItem.Data['Price'].ToString; 
 aBitmap := AItem.Data['Image'].AsObject as TBitmap; 
end; 

Pour récupérer des informations contenues dans le TListViewItem, on peut utiliser la propriété Data[NomduComposant]. Le nom spécifié dans Data est sensible à la casse.

L’accès à la liste Data renvoie un objet de type TValue, utilisé entre autres par le mécanisme RTTI. Il sera donc à la charge du développeur de transtyper chaque TValue dans le bon type attendu.

2. Le double clic

Malheureusement, il n’y a pas d’évènement sur le double clic sur un TListViewItem. Il y a un évènement général OnDblClick sur toute la TListView

On peut toutefois récupérer l’item double-cliqué grâce à la propriété Selected...

Visualisation Maître/Détail

1. Présentation

La fonctionnalité Maître/Détail est fournie par FireDAC. La visualisation peut se faire tout aussi bien avec des composants VCL ou FireMonkey. Le principe est le suivant :

  • Une relation 1 images/doublefleche.PNG n’existe entre deux tables TableA et TableB.
  • On veut visualiser le contenu de ces deux tables.

  • Quand la vue maître/détail est activée, la sélection d’un élément de la table TableA entraîne un filtrage des données de la table TableB. Seuls les éléments en relation avec l’élément sélectionné de TableA apparaissent dans la vue de TableB.

FireDAC réalise un filtrage du TDataSource de la vue de TableB par rapport à des valeurs de colonne notées comme maîtres de TableA qui sont appliquées en tant que critères de filtrage sur la colonne de TableB notée comme détail. Ce filtrage ne nécessite pas de code additionnel mais uniquement un paramétrage des composants FireDAC dans l’éditeur Delphi.

Cette fonctionnalite va être mise en pratique dans notre outil de back-office afin de visualiser sur la sélection d’un utilisateur toutes les commandes qu’il a pu passer et, sur la sélection d’une commande, visualiser tous les objets achetés composant cette commande ainsi que l’adresse de livraison.

2. Maître/Détail utilisateur/commandes

Dans cette section va être présenté comment visualiser la relation Maître/Détail entre un utilisateur et ses commandes.

Ajoutons par glisser-déposer les composants suivants sur la Form principale :

  • un TFDTable (FDTableUser) dont la propriété TableName vaut users,

  • un TFDTable (FDTablePurchase) dont la propriété TableName vaut purchases,

  • un TDataSource (DataSourceUser) relié à la table users. Pour réaliser ceci, il faut paramétrer la propriété DataSet du composant TDataSource à FDTableUser (qui représente la table users).

En posant ces composants sur la Form principale, Delphi va automatiquement les configurer pour utiliser le composant TFDConnection utilisé dans la vue produit.

Delphi va automatiquement paramétrer leur propriété Connection à...

Modification de la valeur issue de la source de donnée

1. Cas d’application

Le rendu de la grille des commandes n’est pas vraiment exploitable. Voici ce qui est affiché à l’écran :

images/601.png

La date vaut 44083 : il s’agit d’une date Delphi qui n’est pas compréhensible facilement (c’est un nombre qui compte les jours à partir du 30/12/1899).

Le prix vaut 82.00 : on ne sait pas s’il s’agit d’euros, de livres sterling ou de dollars. 

Ci-dessous se trouve une capture d’écran de ce que l’on souhaite obtenir :

images/602.png

Il faut modifier l’affichage de chacune des cases de la grille pour permettre une amélioration visuelle du contenu (ajout de ’euros’ et transformation de la date en date lisible).

Le LiveBinding met à disposition un mécanisme pour permettre la modification à la volée de la valeur qui va être affichée (44083 devient 2020/09/09).

2. La propriété CustomFormat

Pour manipuler des valeurs qui viennent de la source de données, il faut utiliser la propriété CustomFormat de la liaison de la source de données sur la colonne. 

Pour faire apparaître l’objet de liaison entre la source de données et la grille, il faut cliquer sur la flèche dans l’éditeur LiveBinding reliant le champ à la colonne. 

Prenons la flèche purchase_date entre Column[0] comme dans la capture d’ecran ci-dessous :

images/603_bindsourcedb3.png

En cliquant sur cette flèche, le panneau Structure se positionne sur l’objet de liaison créé par les mécanismes du LiveBinding.

images/604_Structure.png

On remarque la correspondance entre les noms générés :

BindSourceDB3 (LiveBinding) qui encapsule la source de données FDTablePurchase (FireDAC) et LinkGridToDataSourceBindSourceDB3 (LiveBinding) qui symbolise la liaison entre la grille et la source de données BindSourceDB3 (LiveBinding).

On remarque que de nombreux composants sont ajoutés automatiquement par l’utilisation du LiveBinding. Ils servent à rendre accessibles des composants d’autres frameworks comme FireDAC ou FireMonkey dans l’écosystème...

Conclusion

L’utilisation du LiveBinding peut grandement accélérer le développement d’applications basées sur des bases de données. FireMonkey propose un très grand panel de composants dont le rendu est moderne. Le LiveBinding ne s’arrête pas à binder directement des données encapsulées de FireDAC, mais peut aussi permettre de manipuler un modèle de données. Une étude spécifique sera faite à ce sujet dans le chapitre Client REST Multi-plateforme FireMonkey, dans lequel un client FireMonkey de web méthodes REST sera conçu.