Be Delphi Live Bindings

Delphi XE2 & LiveBindings

1 Devia Boekweitbloemstraat 9 9940 Ertvelde

tel + 32 497 55 34 18 [email protected] www.devia.be

BTW BE 0899.972.037 RPR Gent

KBC 737-0248924-65 BIC KREDbEBB IBAN BE18 7370 2489 2465

Table of Conents Introduction

5

What are LiveBindings ? ................................................................................5 So, LiveBindings are just some form of Data Aware controls ?................5 Ok, which problem do LiveBindings solve then ? ........................................5 And how do LiveBindings Work ? .................................................................5 What’s the difference between Managed LiveBindings and Unmanaged LiveBindings ? ........................................................................................6 Lets get on with the examples ... ..................................................................6

Example 1: A simple DataBase Application

7

Introduction .....................................................................................................7 Creating the basic Application .....................................................................7 Binding the Graphical Controls to the DataSet fields................................8 The Final Application .....................................................................................9 Where is all the Magic Happening ? ............................................................9 The TBindingsList ................................................................................................9

Example 2: Binding a property of one Control to another

11

Introduction ....................................................................................................11 Setting up the UI ............................................................................................11 Setting up the LiveBindings .........................................................................12 Adding a TBindingsList and creating the TBindExpression ..................12 Setting up the TBindExpression .....................................................................13 How to Manage the Bindings ? ...................................................................14 One Step Further ..........................................................................................15 3 Devia Boekweitbloemstraat 9 9940 Ertvelde



KBC 737-0248924-65 BIC KREDBEBB IBAN BE18 7370 2489 2465

The Final Application ...................................................................................16

Doing it all in Code

17

Introduction ....................................................................................................17 Setting up the UI and TPerson class ..........................................................17 Creating and Destroying a TPerson instance ............................................18 Creating the LiveBindings from our TPerson instance to our Visual Components..........................................................................................19 Setting up the Notifications ........................................................................22 There might be a better way.......................................................................23

Final Words

24

Conclusion ....................................................................................................24 About the Author .........................................................................................24 About this Document...................................................................................24

Where to go from here ?

25

Embarcadero Articles & Tutorials ..............................................................25 LiveBindings Sample projects ....................................................................25 Interesting Tutorials & Articles...................................................................25





Introduction What are LiveBindings ? Well ... in short, LiveBindings are a technique to bind Data to a Component. Quite a lot of times they will be used to bind the data from a field in a recordset to a property of a component on a form ...

So, LiveBindings are just some form of Data Aware controls ? Well, LiveBindings could be used to bind data from a field in a DataSet to a Text Property of a given control. But actually they are not limited to that. You could use LiveBindings to bind a Name of a TPerson object to the Hint or Text Property of a TLabel.

Ok, which problem do LiveBindings solve then ? The first problem they solve is that there is no such thing as Data-Aware controls in FireMonkey. So if you want to develop a database application which you want to run on the Mac, you will have to resort to LiveBindings. The second problem you can solve with LiveBindings is that you can use almost anything as the ‘source’ for the binding. For example ... I could use LiveBindings to bind the FirstName and LastName property to the Caption of a TLabel. I could also use an Expression which concatenates those two strings and uses that as the source of my Binding. And finally, as I mentioned you could use just about anything to as the source of a binding. Lets assume we have a TEdit which allows the user to enter text, but additionally we want to automatically update the caption of a TLabel with the contents of that TEdit. Instead of writing code in an OnChange event ... we could easily create a LiveBinding for this.

And how do LiveBindings Work ? This might be hard to explain in text, and is a lot easier with an example, but I’ll try to give a brief description of how it all works. LiveBindings are based on what they call a Binding Expression. Additionally every LiveBinding will have a Source object and a Control Object. The Source is where the Binding will get it’s data from, and the Control is of course the object which gets controlled by the LiveBinding. In





the example we gave about the contents of a TEdit being displayed automatically in a TLabel, we would set up the TEdit as the Source object and the TLabel as the Control object. To be completely correct, every LiveBinding will have four parts :

•

Source Object

•

Source Expression

•

Control Object

•

Control Expression

In the case where you would want to display the Text property of a TEdit into the Text property of a TLablel, our Source Object would be a reference to the TEdit and our Source Expression would be a reference to the Text property of that TEdit. Similarly the Control object would be a reference to our TLabel, and the Control Expression is actually an expression which can be handled by the Expression Engine, and in our case will reference the Text property of our TLabel. There is one thing we will have to pay attention to though ... there are what we call Managed LiveBindings and Unmanaged LiveBindings.

What’s the difference between Managed LiveBindings and Unmanaged LiveBindings ? Managed LiveBindings require you to tell the Expression Engine that a change has occurred, while Unmanaged LiveBindings will do that automatically for you. So with Managed LiveBindings you have to add some additional code in one or more events in order to Notify the LiveBindings engine that something which affects a binding has been changed.

Lets get on with the examples ... By now you should have a very theoretical description of what LiveBindings are and in which cases you can use them. In the next topics I will try to cover some use casts for LiveBindings using a few examples.





Example 1: A simple DataBase Application Introduction In order to make a simple Database Application in previous versions of Delphi, we would be using some form of DataSet, a DataSource and Data-Aware controls, link all of those components up and we would have a very basic Database Application in no time ! With Delphi XE2, you can still use this approach, but using FireMonkey there is no such thing as Data-Aware controls, so we would HAVE to use LiveBindings to achieve the same goal. Luckily you can also use LiveBindings in non FireMonkey applications. So what we will do is create our own FishFacts version with LiveBindings.

Creating the basic Application Lets start by creating a new empty FireMonkey HD Application, and use the IDE Insight to quickly add a TClientDataSet and a TDataSource to your FMX Form. Additionally add a TLabel, a TEdit, a TMemo, and a TImageControl. Now rearrange the components and make sure the TDataSource points to the TClientDataSet. Since we will be using the BioLife.CDS data file, we can set the FileName property of the TClientDataSet to point to C:\Users\Public\Documents\RAD Studio\9.0\Samples\Data \biolife.cds





Actually ... any other CDS file would be good too. The only thing we have to remember is that the TClientDataSet is now pointing to a physical location on my Windows hard drive, and this would cause a problem when running the application on the Mac. Personally I tend to copy the CDS to the Application folder and set the FileName property at Run-Time. But we can work around that by simply setting the Active property of the TClientDataSet to True and then blank out the FileName property again. This would cause the actual data to be loaded in memory and stored in de Form file (FMX or DFM file).

Binding the Graphical Controls to the DataSet fields Now that we have our FMX form set up visually, our next step will be to bind all those controls to the correct data fields. Go ahead and select the TLabel component and check the LiveBindings property in the ObjectInspector. Click the Down Arrow in the Property Editor and select Link to DB Field. This should open a New DB Link Dialog. This is where you can link the component to a given field in your dataset. If this dialog box only displays DataSource1, then you probably forgot to link your TDataSource to the TClientDataSet. Use this technique to link the TLabel and the TEdit to the Category field, the TMemo to the Notes field and the TImage to the Graphic field. Additionally you could also add a BindNavigator and link that to the BindScopeDB1 using the BindScope property.





The Final Application Once you have it all set up correctly, you can run the application and you will be able to cycle through records, add, delete or edit a record without any problems.

Our final FishFacts application

Where is all the Magic Happening ? As you could see ... we didn’t have too many problems setting it all up. But if you look closely to your Form, you will see that delphi added a TBindScopeDB and a TBindingsList to your form.

The TBindingsList When double clicking on the TBingingsList you will notice a DB Links category, and in that category you will see all LiveBindings which were created for our application.





Our DB Links Bindings

For each component we linked to a DB field, you should find the corresponding LiveBindings under the DB Links category. If you would double click one of the entries, you would see the Expression(s) which were generated for that LiveBinding.

One of our LiveBindings in Detail





Example 2: Binding a property of one Control to another Introduction In our second example, we will try to bind the RotationAngles of a 3D image to the actual values in a TrackBar. This will be an example of a so called Managed LiveBindings. At some point, we will have to inform the Bindings Mechanism that the values in our TrackBars got changed.

Setting up the UI We will start out by creating a new FireMonkey application. On our Form we will drop 2 TTrackBar components, a TViewPort3D component and within the TViewPort3D component we will also add a TImage3D component. Reposition all components on a form, and make one of the TTrackBar components have it’s Orientation set to orVertical. Additionally, make sure the Max property of both TTrackBar components is set to 360. Add 2 additional TLabel components to your form, and set the text property of one label to XAxis and another TLabel to YAxis. As you will see in the screenshot, I have renamed some of my components (The horizontal Trackbar is called tbrXAxis, the vertical Trackbar is called tbrYAxis, and the label with the XAxis text is called lblXAxis and of course the label with the YAxis text is called lblYAxis). I would strongly encourage you to name those 4 components in the same way, so it is easier to follow the screenshots. Make sure you load an Image into the Bitmap property of the Image3D. Personally I used our company’s Logo, but you can use any image you want. Reposition your controls so the UI should look similar to this :





The finished UI

Setting up the LiveBindings Adding a TBindingsList and creating the TBindExpression Our goal is now to bind the RotationAngle.X and RotationAngle.Y properties to the position values of the corresponding Trackbars. First step in the process is to add a TBindingsList component to our form. Double-Clicking the TBindingsList will bring up the LiveBindings Editor in which we can add our new LiveBinding. Click the New button and pick TBindExpression from the list of options. Next click the new TBindExpression and have a look at the properties in the ObjectInspector. In here we will be able to set up the SourceComponent, SourceExpression, 12 Devia Boekweitbloemstraat 9 9940 Ertvelde




ControlComponent and ControlExpression.

Setting up the TBindExpression The TBindExpression is where we will tell the LiveBindings system where it should get it’s data and what it should do with it. The first step is to indicate where it should get it’s data. This can be done by using the SourceComponent and SourceExpression. In our case we want the Value of the XAxis trackbar to be used as the source of the expression, so in the ObjectInspector pick the lblAxis from the drop-down in the SourceComponent property editor and enter Value in the SourceExpression property Editor. The next step is to tell the LiveBindings what it should do with the value it got from the Source Expression. In our case, we want to use it to fill in the RotationAngle.X property of the TImage3D Component. So in the ControlComponent pick the Image3D component and in the ControlExpression enter RotationAngle.X Now use the same technique to set up a second TBindExpression. This time use the tbrYAxis.Value as the source of the TBindExpression and make sure you set up the Image3D1.RotationAngle.Y as the ControlExpression. Use the tbrYAxis as the SourceComponent and use it’s Value as the SourceExpression. Next use the Image3D as the ControlComponent and make sure the ControlExpression is set to RotationAngle.Y





How to Manage the Bindings ? If you would run the application right now, you would see nothing special. Moving the TTrackBar doesn’t change anything at all. But if you would set the Value property of both TTrackbars to some other value at Design Time and run the application, you would see that the initial value gets picked up by the LiveBindings system. So ... what’s missing ? Well ... as we mentioned at the start, there is a difference between Managed and Unmanaged Bindings. The Unmanaged bindings are bindings specifically created for a certain purpose, like binding controls to the contents of a field. Those bindings will make sure the system gets notified of changes to the Source Components. The more general bindings we used in this example are what we call Managed Bindings. Managed Bindings require us to notify the LiveBindings Engine of a change in the expression so it can update the Control Components accordingly. Since there is no general automatic system for this (yet),, we will have to add some code in some events. In our case ... the easiest way to do this is to add some code in the OnChange event of the TTrackbar :

procedure TForm1.tbrYAxisChange(Sender: TObject); begin BindingsList1.Notify( tbrYAxis, '' ); end; procedure TForm1.trbXAxisChange(Sender: TObject); begin BindingsList1.Notify( tbrXAxis, '' ); end;

This code will inform the LiveBindings system that something changed on the tbrXAxis and tbrYAxis. Of course you could use one single event handler to inform the LiveBindings system of a change to both TTrackbars and pass the Sender along :

procedure TForm1.tbrYAxisChange(Sender: TObject); begin BindingsList1.Notify( Sender, '' ); end;





One Step Further As I already mentioned the Expressions are actually real expression which will be evaluated at runtime. For example ... we could use a TBindExpression to bind the caption of a label to a combination of a text and the value of a TTrackBar. Select lblXAxis and add a new LiveBinding to it, make sure you pick the TBindExpression from the dialog. No set up the TBindExpression according to this screenshot :

A more complex SourceExpression The SourceExpression is "XAxis Value=" + Format("%f",Value) and this will be evaluated at Run-Time. So when the application runs the LiveBindings system will get the value of the tbrXAxis trackbar, format that as a string, concatenate it with the “XAxis Value=” string and use the result of that expression and put it into the Text prooperty of the lblXAxis TLabel. Now it should be a piece of cake to set up a similar TBindExpression in order to display the Position of the tbrYAxis TTrackBar into the second label.





The Final Application If all went well, you should be able to run the application without too many problems. If you move the position of one of the TrackBars, you should notice that the RotationAngle of our image gets updated and the caption of our Labels as well.

Our final LiveBinds sample Application





Doing it all in Code Introduction By now we have seen how we can bind Visual controls to fields in a DataSet and how we can bind properties from one component to another. That’s all quite nice ... but what if we want to bind something we create at run-time to some visual controls ? What if we only have a TObject descendant, but we still want to bind some of it’s properties to a few edit boxes and some labels ? Well ... the LiveBindings system is quite flexible and can be used for those things as well. If you want, you could even expand the system and create your own specific bindings. Personally I just wanted to know how I could do it, but sadly ... I couldn’t really find all that much information on that subject. I started experimenting and found a solution for this problem. Please remember thought, that this is only from my personal experimentation, and there might be an easier or better way to do it. If you do find better alternatives, feel free to get in touch and I will update this document.

Setting up the UI and TPerson class We will start out by creating a new FireMonkey application. Now right above the declaration of the main form we will be adding our own TObject descendant. Lets assume we have a TPerson object which inherits from TObject. The declaration of the class could look something like this :

type TPerson = class( TObject ) private FLastName: String; FFirstName: String; procedure SetFirstName(const Value: String); procedure SetLastName(const Value: String); public property FirstName : String read FFirstName write SetFirstName; property LastName : String read FLastName write SetLastName; end;

Use SHIFT + CTRL + C on the declaration of the class to complete the class under the cursor and you should have the basic implementation of your class. 17 Devia Boekweitbloemstraat 9 9940 Ertvelde




Now add five TLabel components and two TEdit components to your form. Rename and reposition them according to the following screenshot :

Our TObject LiveBindings form As you can see, I gave the components a descent name. Once I create my LiveBindings at runtime I will have a clear idea what the purpose will be of each component.

Creating and Destroying a TPerson instance There are many ways and places we could create and destroy our TPerson instance. What I did for this example is override the Constructor and the Destructor and create / destroy the TPerson instance in there. The code for my form now looks like this :

TForm1 = class(TForm) ... private { Private declarations } FPerson : TPerson; public { Public declarations } constructor Create( aOwner : TComponent ); override; destructor Destroy; override; end; var Form1: TForm1;





implementation {$R *.fmx} ... { TForm1 } constructor TForm1.Create(aOwner: TComponent); begin inherited Create( aOwner ); FPerson := TPerson.Create; FPerson.FirstName := 'Stefaan'; FPerson.LastName := 'Lesage'; end; destructor TForm1.Destroy; begin FreeAndNil( FPerson ); inherited Destroy; end;

Creating the LiveBindings from our TPerson instance to our Visual Components So ... by now we have a TPerson instance, but it would be nice if we could bind the properties of that instance to the edit boxes and labels on our form. In order to do this ... we will have to create a Managed binding. There are a few different approaches, and I tried a few of them. Sadly the only one I could get working in both directions is by creating your own ManagedBinding for each individual binding. In our case we will have to create 7 different bindings to get everything working correctly :

•

2 Bindings to display our FirstName and LastName in the two Edit Boxes

•

3 Bindings to display the FirstName, LastName and a combination of the two in the Label components

•

2 Bindings for the other direction, so to bind the contents of our 2 Edit Boxes back to the FirstName and LastName properties of our TPerson instance.

The code looks something like this :





procedure TForm1.CreateManagedBindings; begin TBindings.CreateManagedBinding( [ TBindings.CreateAssociationScope( [ Associate( FPerson, 'aPerson' ) ] ) ], 'aPerson.FirstName', [ TBindings.CreateAssociationScope( [ Associate( lblPersonFirstName, 'lblPersonFirstName' ) ] ) ], 'lblPersonFirstName.Text', Nil ); TBindings.CreateManagedBinding( [ TBindings.CreateAssociationScope( [ Associate( FPerson, 'aPerson' ) ] ) ], 'aPerson.FirstName', [ TBindings.CreateAssociationScope( [ Associate( edtFirstName, 'edtFirstName' ) ] ) ], 'edtFirstName.Text', Nil ); TBindings.CreateManagedBinding( [ TBindings.CreateAssociationScope( [ Associate( FPerson, 'aPerson' ) ] ) ], 'aPerson.LastName', [ TBindings.CreateAssociationScope( [ Associate( lblPersonLastName, 'lblPersonLastName' ) ] ) ], 'lblPersonLastName.Text', Nil ); TBindings.CreateManagedBinding( [ TBindings.CreateAssociationScope( [ Associate( FPerson, 'aPerson' ) ] ) ], 'aPerson.LastName', [ TBindings.CreateAssociationScope( [ Associate( edtLastName, 'edtLastName' ) ] ) ], 'edtLastName.Text', Nil ); TBindings.CreateManagedBinding( [ TBindings.CreateAssociationScope( [ Associate( FPerson, 'aPerson' ) ] ) ], 'aPerson.LastName + " " + aPerson.FirstName', [ TBindings.CreateAssociationScope( [ Associate( lblPersonFullName, 'lblPersonFullName' ) ] ) ], 'lblPersonFullName.Text', Nil ); TBindings.CreateManagedBinding( [ TBindings.CreateAssociationScope( [ Associate( edtFirstName, 'edtFirstName' ) ] ) ], 'edtFirstName.Text', [ TBindings.CreateAssociationScope( [ Associate( FPerson, 'aPerson' ) ] ) ], 'aPerson.FirstName', Nil );





TBindings.CreateManagedBinding( [ TBindings.CreateAssociationScope( [ Associate( edtLastName, 'edtLastName' ) ] ) ], 'edtLastName.Text', [ TBindings.CreateAssociationScope( [ Associate( FPerson, 'aPerson' ) ] ) ], 'aPerson.LastName', Nil ); TBindings.Notify( FPerson, '' ); end;

The code will probably look a bit complex. but in essence we create a Managed Binding. For every binding we create, we also create an Input and an Output association. This is where we will link an actual object to a variable we will use in our binding. And finally we also add a Source and Control expression. So lets analyze the first binding :

TBindings.CreateManagedBinding( [ TBindings.CreateAssociationScope( [ Associate( FPerson, 'aPerson' ) ] ) ], 'aPerson.FirstName', [ TBindings.CreateAssociationScope( [ Associate( lblPersonFirstName, 'lblPersonFirstName' ) ] ) ], 'lblPersonFirstName.Text', Nil );

First thing we do is a Source Asssociation. We associate a physical instance of our FPerson instance and we will associate that with the aPerson variable. So everytime we use aPerson in our Expression, the LiveBindings system will know we are talking about the FPerson instance. Next up is our Source Expression, in our case ‘aPerson.FirstName’. When the LiveBinding System processes this, it will check the Source Associations to see if we have created an association for aPerson. The next two things are similar to the first to, but for the Controle Object and Control Expression. We also create an association between a phisical object / component and a variable we will be using in the expression.





If you take a closer look at the Binding Expressions, you will notice an expression ‘aPerson.LastName + “ “ + aPerson.FirstName’. Since we created an association for the aPerson variable and linked that to our FPerson instance, the LiveBindings system will take the value from the FPerson.LastName property, add a space, add the FPerson.FirstName and take that result to populate the lblFullName.Text. It might look complicated at first, but once you get a feel of the Source and Control components and their expressions you will see it is actually pretty easy and quite powerful. To try it out ... simply add a call to this CreateManagedBindings method in our Constructor right after we created our FPerson instance.

constructor TForm1.Create(aOwner: TComponent); begin inherited Create( aOwner ); FPerson := TPerson.Create; FPerson.FirstName := 'Stefaan'; FPerson.LastName := 'Lesage'; CreateManagedBindings; end;

Setting up the Notifications If you would run the application right now ... it might display the initial values correctly, but nothing would happen if you would change the contents of one of the TEdit components. Similarly ... nothing would happen if you would modify the FirstName property at runtime neither. This is because we created Managed Bindings, and we will have to inform the system that something got changed ourselves ! First ... select both of the TEdit components and create an event handler for the OnChange event, and enter the following code :

procedure TForm1.edtFirstNameChange(Sender: TObject); begin TBindings.Notify( Sender, '' ); end;





This will make sure we inform the LiveBindings system that something got changed in our Edit controls. If you run the application right now and change soemthing in one of the Edit boxes, you will see that the TLabel components get updated accordingly. But we have one more issue to tackle. Changing the properties of our TPerson instance at runtime won’t update the corresponding TLabel and TEdit components. In order to do this, we will have to react on a change in our properties too. Update the Property setters so your code looks like this :

procedure TPerson.SetFirstName(const Value: String); begin if ( Value <> FFirstName ) then begin FFirstName := Value; TBindings.Notify( Self, '' ); end; end; procedure TPerson.SetLastName(const Value: String); begin if ( Value <> FLastName ) then begin FLastName := Value; TBindings.Notify( Self, '' ); end; end;

There might be a better way As I mentioned earlier ... there might be an easier way to achieve the same thing ... sadly I haven't been able to get it working with any other technique. If you do know about an easier way to achieve the same thing in Code ... feel free to get in touch with us so we can update this document.





Final Words Conclusion LiveBindings are a new technique to bind just about anything to a visual component and vice versa. They might look a lot more cumbersome and harder than the traditional data-aware components we have been used to since the early Delphi Days. But they are also a lot more powerful !

About the Author This document was created by Stefaan Lesage. Stefaan is the CEO of Devia, which is specialized in custom software development using Delphi. Stefaan is available for local and remote consulting, and is able to give onsite Delphi Training classes. For more information, feel free to get in touch with us using the contact information you will find on the bottom of every page.

About this Document This document was created shortly after the release of Delphi XE2, and will be used to accompany a session I will be giving on LiveBindings at Be-Delphi. Be Delphi is the Biggest Delphi event in Belgium which gets organized for the first time on November the 17 th 2011. The information and examples supplied in this document had been created to the best of my knowledge, based on the information available to me at the time of writing. It is possible that a few errors and even some typos got into this document, and if you notice any of these ... feel free to get in touch via email so we can fix those. Additionally if you have any easier or better techniques than those shown in this document, feel free to let us know as well.





Where to go from here ? Embarcadero Articles & Tutorials http://www.embarcadero-events.eu/worldtour/ RAD_Studio_XE2_World_Tour__Deep_Dive__Live_Bindings.pdf http://docwiki.embarcadero.com/RADStudio/en/LiveBindings_in_RAD_Studio http://docwiki.embarcadero.com/RADStudio/XE2/en/ Tutorial:_Using_LiveBinding_in_VCL_Applications http://docwiki.embarcadero.com/RADStudio/XE2/en/ Tutorial:_Using_LiveBinding_to_Create_an_Application_Without_Code http://docwiki.embarcadero.com/RADStudio/XE2/en/ Tutorial:_Using_LiveBinding_Programatically

LiveBindings Sample projects http://www.delphifeeds.com/go/s/84717 http://edn.embarcadero.com/article/41707

Interesting Tutorials & Articles http://www.felix-colibri.com/papers/oop_components/delphi_livebindings_spelunking/ delphi_livebindings_spelunking.html http://www.jcolibri.com/articles/firemonkey/livebindings_delphi_xe2/ livebindings_delphi_xe2.html http://stackoverflow.com/questions/7507838/livebindings-tlisttmyobject-bound-to-tstringgrid http://www.sdn.nl/SDN/Artikelen/tabid/58/view/View/ArticleID/3189/Delphi-XE2LiveBindings.aspx





Be Delphi Live Bindings

Recommend Documents