Delphi et les LiveBindings - Épisode 1

Un tutoriel de Serge Girard

Le 2017-05-19 12:16:55, par gvasseur58, Responsable Lazarus & Pascal

Serge Girard, bien connu des habitués du forum Delphi sous le pseudonyme de SergioMaster, vous propose le premier tutoriel d'une série dédiée aux LiveBindings.

L'objectif de cette première partie est de comprendre pourquoi les LiveBindings sont apparus et ce qu'ils peuvent vous apporter aussi bien avec FireMonkey qu'avec la VCL.

http://serge-girard.developpez.com/t...ngs/Episode-1/

Que pensez-vous de ce tutoriel ?

Quelle expérience avez-vous des LiveBindings ?

Discussion forum

10 commentaires

SergioMaster
Rédacteur/Modérateur

Bonjour,

@Gbegreg En ce qui concerne tes notes, c'est tout à fait vrai les possibilités sont nombreuses mais, intentionnellement je suis resté hyper-simple dans cette introduction pour pouvoir faire la comparaison entre la méthode du tout par code et celle que permet les LiveBindings.

Pour tout dire, plutôt qu'un simple cercle qui se déplace j'avais envisagé un programme qui aurait représenté les phases de la lune (donc déplacement horizontal et vertical) ce qui m'a arrêté c'est la codification de l'ombre à porter sur la "lune" trop complexe pour une simple introduction.

Le second épisode est en relecture technique (programme associé : un convertisseur de monnaie € <-> devise, je n'en ai fait que la partie VCL car son pendant FMX n'apporte rien). J'y joue toujours sur une seule propriété (texte) mais de deux TEdits et surtout avec les "fonctions" d'un "objet" qui n'est pas un composant/contrôle de la forme (les mots fonctions et objet sont des termes à débattre).

En vous laissant saliver dans l'attente de l'épisode suivant

le 21/05/2017 à 8:21
gbegreg
Membre expert

Merci SergioMaster pour cette introduction aux LiveBindings. A titre personnel, je n'ai pas encore utilisé ces fonctionnalités.
J'ai hâte de voir la suite avec des objets plus complexes et liaisons avec une base de données.

Il est à noter que :
- une propriété x de l'objet A peut être liée à plusieurs propriétés de l'objet B. Dans l'exemple du tutoriel, on pourrait en plus de lier la valeur du TrackBar à la position.X du cercle, lier la valeur du trackBar à la scale.x du cercle par exemple. Ainsi, le changement de valeur du trackBar joue sur 2 propriétés du cercle : déplacement sur X et étirement sur X également.
- il est possible de lier la propriété x de l'objet A à une propriété y de l'objet B et à une propriété z de l'objet C. Dans l'exemple du tutoriel, en plaçant un TLabel sur la forme, il est possible de lier la valeur du TrackBar à la propriété Text du label. Ainsi, lorsqu'on bouge le trackBar, le cercle se déplace et le label affiche la valeur X en temps réel sans avoir à coder quoi que se soit.

le 20/05/2017 à 13:07
BeanzMaster
Expert confirmé

Bonjour,

Ca va me servir à quoi de recopier dans une fiche vierge ? De plus l'exemple dans le tuto c'est un TCircle et un TTrackbar. Ce n'est pas une solution que tu me proposes. Je ne vois aucun intérêts à faire ça

le 29/09/2018 à 15:34
BeanzMaster
Expert confirmé
Bonjour Serge,

je viens tout juste de commencer à lire tes tutoriels sur les liveBindings avec Delphi CE
Dans cette première partie (plutôt très simple) Il y a une petite chose qui m'embête et que je ne m'explique pas.

Est-ce normal lorsque tu lies la propriété Value du TTrackBar à la poisition.x du TCircle, que la propriété Value du TTrackBar change automatiquement ? Celle-ci n'est plus à 0. J'ai essayé de lier (clic droit --> Lier visuellement) en commençant par le TCircle et ensuite j'ai essayé en commençant avec le TTrackbar. C'est plutôt gênant comme comportement.

Aurais tu une explication ? Y-a-t-il une chose que j'aurais mal compris ?

Pour corriger le problème j'ai du rajouté un OnCreate sur la Form
Code :
```
1
2
3
4
procedure TForm1.FormCreate(Sender: TObject);
begin
 Trackbar1.Value := 0;
end;
```
Merci

Bonne journée
le 29/09/2018 à 11:02
BeanzMaster
Expert confirmé

Pour info la propriété value prend celle de postion.x du TCircle. Je peux remettre Value à 0. J'enregistre le projet. Je ferme tout puis j'ouvre de nouveau le projet. Value est de nouveau définie avec la valeur du TCircle.Position.X est-ce un bug ??? Très déstabilisant comme truc !

Sa commence bien, je sens que j'ai vite laisser tomber cette façon de faire du coup et faire l'impasse sur l'utilisation des LiveBindings

PS : en forçant Value à zero à la conception, à l'exécution Value = TCircel.Position.X

le 29/09/2018 à 11:11

ALWEBER

Membre émérite

Tu copies le code ci dessous et tu le colle dans une fiche fmx vierge

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
  object TrackBar1: TTrackBar
    CanParentFocus = True
    Max = 360.000000000000000000
    Orientation = Horizontal
    Position.X = 48.000000000000000000
    Position.Y = 104.000000000000000000
    TabOrder = 1
  end
  object Button1: TButton
    Position.X = 208.000000000000000000
    Position.Y = 104.000000000000000000
    TabOrder = 4
    Text = 'Button1'
  end
  object BindingsList1: TBindingsList
    Methods = <>
    OutputConverters = <>
    Left = 20
    Top = 5
    object LinkControlToPropertyRotationAngle: TLinkControlToProperty
      Category = 'Liaisons rapides'
      Control = TrackBar1
      Track = False
      ComponentProperty = 'RotationAngle'
    end
    object LinkControlToPropertyRotationAngle2: TLinkControlToProperty
      Category = 'Liaisons rapides'
      Control = TrackBar1
      Track = False
      Component = Button1
      ComponentProperty = 'RotationAngle'
      InitializeControlValue = False
    end
  end

le 29/09/2018 à 14:17

tourlourou
Modérateur

Que vaut InitializeControlValue dans ton dfm, que l'on voit False dans un exemple de LiveBinding d'ALWEBER ?

le 29/09/2018 à 15:58
ALWEBER
Membre émérite

Envoyé par BeanzMaster

Bonjour,
Ca va me servir à quoi de recopier dans une fiche vierge ? De plus l'exemple dans le tuto c'est un TCircle et un TTrackbar. Ce n'est pas une solution que tu me proposes. Je ne vois aucun intérêts à faire ça

Je n'avais que peu de visibilité sur le travail que tu a réalisé. Je t'ai proposé un modele alternatif pour que tu puisse comparer avec ton exemple.
Cordialement

le 29/09/2018 à 16:58
SergioMaster
Rédacteur/Modérateur

Bonjour,

Enfin un lecteur Bon, désolé de ne pas avoir répondu plus tôt je pense que tu t'es simplement planté entre la propriété du composants à modifier et la source ou bien alors il ne s'agit pas du bon type de liaison ?

Prend ceci comme une réponse rapide

Sans relire mon tutoriel et en fonction de mes progrès dans le domaine

La première chose qui me vient à l'esprit et qui expliquerait le comportement que tu décris est que tu as utilisé le concepteur visuel et que tu parles d'un lien de type LinkControlToProperty et non un TBindExpression. (Le concepteur visuel est pratique mais produit ce genre de piège)

Voilà comment je le ferai maintenant

mais cela nécessite d'introduire une notion de "données" (le prototypebindsource) qui risque d'en échauder plus d'un (un peu comme les premiers pas de dbexpress et sa litanie de composants à mettre avant de pouvoir établir une simple query)

Après avoir relu rapidement mon tuto
cela doit bien être un LinkControlToProperty qui est utilisé et Tourlourou pointe sur le bon coupable

Envoyé par Tourlourou

Que vaut InitializeControlValue dans ton dfm ?

En conclusion : faut-il que je revisite le tutoriel à l'aune de mes progrès en livebindings ?

A te lire ...

le 30/09/2018 à 10:30

BeanzMaster

Expert confirmé

Bonjour

@ALWEBER : pas de probleme

@Sergio : J'ai suivi ton tuto à la lettre

Comme il s'agit dans un premier temps d'une introduction, nous utiliserons la première solution. Un petit clic droit sur la forme et la sélection de l'option « Lier visuellement... »* nous ouvre, en bas de l'écran, une fenêtre de conception visuelle.
...
Juste en dessous de cette dernière propriété, il y a CustomFormat. Pour cette dernière nous indiquerons notre calcul, selon la formule suivante :

Formule : Position.X + Value*Width/Max - Owner.Circle1.Width/2
....
Surprise ? Pas une seule ligne de code et pourtant, cela fonctionne ! Où est passé notre calcul ? On le retrouve dans le source de la forme, c'est-à-dire dans le fichier d'extension .fmx correspondant :

Voici une capture

@tourlourou : pas de InitializeControlValue dans le DFM
et voici le DFM tel que créé par l'EDI

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
object Form1: TForm1
  Left = 0
  Top = 0
  Caption = 'Form1'
  ClientHeight = 240
  ClientWidth = 589
  FormFactor.Width = 320
  FormFactor.Height = 480
  FormFactor.Devices = [Desktop]
  OnCreate = FormCreate
  DesignerMasterStyle = 0
  object TrackBar1: TTrackBar
    CanParentFocus = True
    Orientation = Horizontal
    Position.X = 40.000000000000000000
    Position.Y = 184.000000000000000000
    Size.Width = 529.000000000000000000
    Size.Height = 19.000000000000000000
    Size.PlatformDefault = False
    TabOrder = 0
    Value = 22.000000000000000000
  end
  object Circle1: TCircle
    Position.X = 22.000000000000000000
    Position.Y = 104.000000000000000000
    Size.Width = 50.000000000000000000
    Size.Height = 50.000000000000000000
    Size.PlatformDefault = False
  end
  object BindingsList1: TBindingsList
    Methods = <>
    OutputConverters = <>
    Left = 28
    Top = 13
    object LinkControlToPropertyPositionX: TLinkControlToProperty
      Category = 'Liaisons rapides'
      Control = TrackBar1
      Track = False
      Component = Circle1
      ComponentProperty = 'Position.X'
      CustomFormat = 'Position.X+(Value*(width/max)) -( owner.Circle1.width / 2)'
    end
  end
end

Et voila le DFM dans le tuto :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
object Form8: TForm8
  Left = 0
  Top = 0
  Caption = 'Jeu de balle'
  ClientHeight = 123
  ClientWidth = 549
  FormFactor.Width = 320
  FormFactor.Height = 480
  FormFactor.Devices = [Desktop]
  DesignerMasterStyle = 0
  object Circle1: TCircle
    Fill.Color = claRed
    Position.Y = 24.000000000000000000
    Size.Width = 40.000000000000000000
    Size.Height = 50.000000000000000000
    Size.PlatformDefault = False
    Stroke.Color = claRed
  end
  object TrackBar1: TTrackBar
    Align = Bottom
    CanParentFocus = True
    Orientation = Horizontal
    Margins.Left = 20.000000000000000000
    Margins.Right = 20.000000000000000000
    Margins.Bottom = 10.000000000000000000
    Position.X = 20.000000000000000000
    Position.Y = 94.000000000000000000
    Size.Width = 509.000000000000000000
    Size.Height = 19.000000000000000000
    Size.PlatformDefault = False
    TabOrder = 1
  end
  object BindingsList1: TBindingsList
    Methods = <>
    OutputConverters = <>
    Left = 76
    Top = 5
    object LinkControlToPropertyPositionX: TLinkControlToProperty
      Category = 'Liaisons rapides'
      Control = TrackBar1
      Track = False
      Component = Circle1
      ComponentProperty = 'Position.X'
      CustomFormat = 'Position.X + Value*Width/Max - Owner.Circle1.Width/2'
    end
  end
end

A n'y rien comprendre.

Du coup Tourlourou a raison il manque le fait qu'il faut définir InitializeControlValue à FALSE dans ton tuto Serge. Rien de bien méchant pour le coup. Je vais pouvoir continuer ma lecture

Merci de vos réponses. Problème

A bientôt

le 30/09/2018 à 15:26

Poster une réponse