Binding Created Objects

Go Up to Tutorial: Using LiveBinding in VCL Applications

Once you have completed the previous step, you can move on to the next section, which describes how to bind various properties of the spin edit controls to the properties of the image control.

To create a new LiveBinding

1. Click the image control (Image1, in this case), which is also the control component.
2. In the Object Inspector, search for the LiveBindings property. Click and select New LiveBinding....
   
   
   
   
3. A dialog box (New LiveBinding) appears prompting for the type of the new LiveBinding.
   
   
   
   Select TBindExpression and validate your selection by pressing the OK button.
4. At this point, your new binding expression has been created and waits for you to define its fields to actually bind the source component (one of the spin edits) to the control component (the image control).
   
   
   
   What is of interest for this binding expression is:
   • The AutoActivate property—It specifies that the binding expression is activated automatically at run time.
   • The ControlExpression property—It specifies the expression that will be used to control the image component. Set this property to Top, because you want to affect the Top property of the image control.
   • The Managed property—It specifies whether the binding expression is manager owned. Set Managed to True.
   • The SourceComponent property—It specifies the component that is the source of data for the control component. Set this property to seTop, because you want the spin edit called seTop to control the Top property of the image control.
   • The SourceExpression property—It specifies the expression that will provide data for controlling the control component. Set this property to Value, because you want the Value property (the one that holds the current value for the spin edit control) to control the value of the Top property of the image control.
5. Repeat these 4 steps for binding the remaining 3 spin edit controls (seLeft, seWidth, and seHeight—source components) to the image control (Image1—control component). In each case, replace spin edit names such as seTop with seLeft, seWidth, or seHeight and corresponding properties such as Top with Left, Width, or Height.

After completing the creation of the binding expressions, you can see that a new component has been added to the form: BindingsList1. Double-click this component to bring up the following dialog box.

The binding expression editor allows for visually editing of all expressions available in your Application. Double-click any binding expression listed in the bindings list component to bring up another dialog box (pictured below) that is used to edit the parameters of the selected binding expression. In this way, you can easily edit and modify your binding expressions, same as you would do in the Object Inspector.

Once you performed these steps, issue a notify command to the existing bindings. To do this, you have to implement a Notifier procedure that you will assign as each spin edit's OnChange event. The following code snippet shows how the notifier procedure is done.

Put this declaration in the form class, under the published section (that is, directly after the components are declared) so it can have RTTI, as follows.

  TMain = class(TForm)
    { other components declarations ... }
    procedure Notifier(Sender: TObject);
    { other declarations }

For C++Builder, add the prototype of the Notifier method in the header file of your main form, in the __published: section.

class TMain : public TForm
{
__published:	// IDE-managed Components
	/* other components declarations ... */
	void __fastcall Notifier(TObject *Sender);
	/* other declarations */

The implementation section

procedure TMain.Notifier(Sender: TObject);
begin
  { this line of code notifies the Bindings List component
    that something has changed; the '' parameter says that 
    the expression engine should check all properties for
    actual changes }
  BindingsList1.Notify(Sender, '');
 
  { dynamically re-render the image in case Height or Width changes }
  RedrawImage;
end;

void __fastcall TMain::Notifier(TObject *Sender)
{
	/* this line of code notifies the Bindings List component
	that something has changed; the "" parameter says that
	the expression engine should check all properties for
	actual changes */
	BindingsList1->Notify(Sender, "");
 
	/* dynamically re-render the image in case Height or Width changes */
	RedrawImage();
}

With this said notifier procedure implemented, now you need to bind each spin edit's OnChange event to this procedure. Select all 4 spin edits at once (SHIFT + Left Mouse Click), go to the Object Inspector, and switch to the Events tab. Locate the OnChange event and type in Notifier.

At this point you are ready to run your Application.

Next

• Running the Application and Observing the Results

Previous

• Creating the Application and Placing the Visual Objects