XE3 Visual LiveBindings: Link controls to component properties

Posted by on in Blogs
Simple controls can be linked to component properties.   TEdit is an example of a simple control.  TLabel.Text is an example of a component property.   Controls can be linked to most public properties of any component on a form.

Link controls to component properties in the LiveBindings designer


After a TEdit and TLabel are dropped on a FireMonkey form, the LiveBindings designer represents the TEdit with the member "Text" and the TLabel with the member "Text":



The LiveBindings designer can be used to connect these members:



In the form you will notice that the value of the label has been copied to the edit.  When the link is initialized, the component property value is copied to the control to give both members the same value to start off.  After initialization, the control value will be copied to the component property whenever the user modifies the edit and presses enter, or leaves the edit.



In the LiveBindings designer, the line between the components represents a link component.  Click the line to select the component in the object inspector.



The AutoActivate property indicates whether this link should be initialized when the application is run.  This property also activates the link at design time.

The InitializeControlValue property can be unchecked to prevent the component property value from being copied to the control when the link is initialized.

Multiple links


The LiveBindings designer can be used to connect a single control to multiple component properties.


Links not permitted


LiveBindings does not permit links between component properties, such as Label1.Text and Button1.Text.

The LiveBindings designer highlights members when a link is not permitted.



LiveBindings does not permit a direct link between two user input control,  such as Edit1.Text to Edit2.Text. To achieve the same effect, link both controls to a TPrototypeBindSource field.



The links shown in this image will keep all "Text" members synchronized when the user modifies one of the edits then presses Enter, or exits the edit.

The TPrototypeBindSource.RecordCount property can be set to "1" when using a TPrototypeBindSource to provide an intermediate field.

Linking to other properties


To show additional component properties in the LiveBindings designer, click "..." to open the "Bindable Members" dialog.



This dialog populates a list with properties found by scanning the type information of the component.    Some properties are skipped because the type, such as sets, is not supported in LiveBindings expressions.  Put a check mark next to a property to show it in the LiveBindings designer.

Connecting from a control to "..." is another way to get at additional properties.  For example, drag from "IsChecked" to "..." and select the "WordWrap" property.


LiveBindings-enable component properties


LiveBindings uses RTTI to read and write component properties.  So no changes are needed to make a component's properties linkable.

To make linking to commonly used properties easier, there is a registration method to indicate which member to show, by default, in the LiveBindings designer.   For example, RegisterValuePropertyName() is used to register "Text" as the default member of a FireMonkey TLabel and "Caption" as the default member of VCL TLabel.  See Fmx.Bind.Editors.pas and Vcl.Bind.Editors.pas.  RegisterValuePropertyName() is in Data.Bind.Components.

LiveBindings-enable controls


Controls must implement the ControlValue observer in order to support linking to component properties. My previous post has information about observers, including code for a sample control called TObservableTrackbar.    TObservableTrackBar implements the ControlValue observer, so supports links to component properties.  Here a TObservableTrackBar is linked to the "Width" property of a TShape.

Comments are not available for public users. Please login first to view / add comments.