Show: Delphi C++
Display Preferences

LiveBindings Designer

From RAD Studio XE3
Jump to: navigation, search

Go Up to View Menu

Go Up to LiveBindings in RAD Studio


View > LiveBindings Designer

The most common way of creating LiveBindings in RAD Studio is using the LiveBindings Designer. You can use the LiveBindings Designer in either VCL or FMX applications.

With the LiveBindings Designer you can:

  • Create new LiveBindings between various visual components you have on your form.
  • Edit the existing LiveBindings.
  • Visualize all the LiveBindings that you have created.
  • Export your binding diagram as an image file.

LiveBindings Designer Main Window

The LiveBindings Designer View (Window) shows up in the View Menu. You can dock the window and leave it open and it will stay open, you can close it, you can have it opened and save a desktop layout that includes it. You can associate LiveBindings Designer View with multiple layers and then view just the layers you want at a time--this way, when you have very complicated binding views, you can easily look at layers to hide some of the complexity.

There are two ways to bring up the LiveBindings Designer window:

  • Select View > LiveBindings Designer.
  • Right-clicking any component on your form and select the Bind Visually... command.

If the LiveBindings Designer is not already open, it will get opened through the Bind Visually command. In addition, it will select the element in the LiveBindings Designer. Then, upon clicking any of the members, that member gets highlighted in blue, and any other bindable members get highlighted in green. To bind, simply select a member of a component (for instance: Edit1.Text) and bind to another bindable component by dragging (you will see a line appear). You can add additional members (expose additional members) by clicking the three-dot menu. You can also add additional members/properties to your components in the LiveBindings Designer by selecting the entire component in the LiveBindings Designer and right-clicking it.

Tip: Whenever you save your project, the LiveBindings diagram is automatically saved to a .vlb file in the same directory where your project resides, thus whenever you reopen your project, the diagram remains in the state it was when you saved the project.

Also, you can click a component, such as ClientDataSet in the LiveBindings Designer, select the * member, and drag to empty space to quickly bind to a new control. This is the case for many components. The Rearrange command button in the LiveBindings Designer tool palette is really useful for quickly rearranging your LiveBindings layout. There is also a built-in feature to save your layout as a picture on your hard disk.

The LiveBindings Designer consists of a window that you can use to create, edit, or visualize the LiveBindings in your application. On the left-hand side, you have a set of buttons that correspond to various functions listed below. There are two combo boxes at the top that contain, respectively, all the forms in your application and all the controls that are present on the form specified through the first combo box. The Designer has three right-click context menus as well.


This is how the FMX form looks in the Form Designer for the diagram above. Absolutely no code is written in the source files, everything being done through bindings.


The buttons on the left-hand side of the LiveBindings Designer have the following functions:

Button and Icon Description
Fit in Window command button


Resizes all the blocks and diagram connections in the designer to fit the designer window.

Zoom In command button


Zooms in the contents of the LiveBindings Designer.

Zoom Out command button


Zooms out the contents of the LiveBindings Designer.

Restore Actual Size command button


Restores the default size of the contents in the LiveBindings Designer.

Rearrange command button


Rearranges and repositions all the blocks and diagram connections of the LiveBindings Designer.

LiveBindings Wizard... command button


Shows the LiveBindings Wizard. Note that this button is available regardless of whether the LiveBindings Wizard command is enabled selecting Tools > Options > LiveBindings > Display LiveBindings Wizard in right-click menu.

LiveBindings Designer Layers

The Layers menu allows you to toggle visibility between layers. As you will see, if you have multiple layers checked, the layers names next to the Form name in the LiveBindings Designer window toolbar will update accordingly. This allows you to see which layers are visible even if the layers menu is collapsed. The plus icon allows you to add a new layer which can be renamed by double-clicking it in the layers menu. To add certain components to a layer, you need to select the layer in the layers menu. Then you can select a single or select components from the Form Designer, using the Shift key while clicking them, or by drawing a selection box over the components in the LiveBindings Designer.

After you have selected one or multiple components, right-click to add to an existing layer or to a new layer. As an advanced feature, if you want one component be part of two different layers, you can do that in two ways:

  • Visually, by selecting the layer in the layers menu, then selecting the component in the LiveBindings Designer and right-clicking it.
  • By selecting the component (for instance: Button1), going to the Object Inspector, expanding the LiveBindings Designer property, and typing in the additional names of the layers (that you set up in the layers menu) that you want to add the component to (Node-Layers).
Tip: You can change layers by selecting components in the Form Designer, provided that your component is placed on a layer other than the selected one.


The + button adds a new layer while the thrash can button removes its associated layer. Double-click a layer to change its name. The eyeball button shows or hides its associated layer. The default layer cannot be deleted or renamed.

Right-Click Context Menus

There are three context menus on the LiveBindings Designer:

Designer context menu

When you right-click the surface of the LiveBindings Designer, you are presented with the context menu pictured and described below:


Command Description
Show/Hide elements... Allows you to show or hide several elements in the LiveBindings Designer.
Refresh Designer Reloads and refreshes the diagram from the hard disk.

In applications with multiple forms and/or datamodules, an embedded dataset in a TBindSourceDB might contain stale sub members in the LiveBindings Designer if the dataset is external to the form the Designer is actively viewing. Stale members could also be due to dataset changes. The Refresh Designer command resolves this update issue.

Scale Presents you with a sub-menu with the following commands:
  • Zoom In
  • Zoom Out
  • Actual Size
  • Fit in Window
Layout Rearranges and repositions the blocks and the connection lines. This functionality is the same as the Rearrange command button's.
Route links Reroutes the connection lines that represents the bindings between the controls.
Save to Image This command allows you to save the contents of the LiveBindings Designer as an image.


Control context menu

When you right-click a control in the Designer, the control context menu appears:


Command Description
Bindable Members... Brings up the Bindable Members dialog box that allows you to select which properties of that object should be displayed in the diagram in order to provide binding abilities.
Layers Allows you to see the available layers or to add new ones.
Hide Element(s) Hides the element or the selected elements so they do not appear on the view of the designer. They can be shown later.
Scale Presents you with a sub-menu with the following commands:
  • Zoom In
  • Zoom Out
  • Actual Size
  • Fit in Window

Property binding context menu

When you right-click a property in the Designer, the property binding context menu appears:


Command Description
LiveBindings Wizard... Brings up the LiveBindings Wizard in context-sensitive mode for the selected diagram element.
Link to new control... Brings up the Bind to New Control dialog box that allows you to select a control to bind to from an entire palette of visual controls.
Delete member Deletes this Member.
Scale Presents you with a sub-menu with the following commands:
  • Zoom In
  • Zoom Out
  • Actual Size
  • Fit in Window

Diagram Representations

LiveBindings are represented in the Designer as lines (connections) between objects that are represented as rectangles with exposed properties.

A component is displayed by the LiveBindings Designer as a rectangular block with the name and properties that can be bound.


You can see that most of the components have just one property visible in the LiveBindings Designer diagram representation. You can make additional properties available. To do this, click the ellipsis [...], and the Bindable Members dialog box appears, and lets you select the additional properties you want to be visible in the Designer.

A connection line that represents a bindings expression between various components is rendered by the LiveBindings Designer as pictured below. Some expressions are unidirectional and are represented with only one arrow pointing in the direction of the expression, and other expressions are bidirectional, with double-ended arrows.


Routing Links

The LiveBindings Designer allows you to automatically reroute links. For instance, if you modify the position of the diagram blocks or the lines that represent the links, and their organization is not convenient, right-click in the designer and choose the Route links command from the context-sensitive menu. The links will be rerouted accordingly.

Tip: If you want a complete rearrangement of links and diagram blocks, then use the Rearrange command button from the designer's toolbar.

Embedded Nodes

LiveBindings Designer also introduces the concept of embedded nodes. For instance, a TClientDataSet and TBindSourceDB are on the form. The TBindSourceDB has a property, DataSet, that points to the TClientDataSet. This will embed the TClientDataSet object by default. Embedded nodes cannot be linked to while embedded, but there is a menu option that allows you to unembed them, which essentially unhides the original node for linking purposes while keeping the embedded member.


External Nodes

External nodes (for instance data sources) that are contained in a module that is referenced by the current active form have their nodes visible. The external nodes are fully qualified in their name (for instance: DataModule2.ClientDataSet1) and have a different color representing that they are external.


Object Inspector Integration

The LiveBindings Designer is integrated with the Object Inspector through the LiveBindings Designer property, which is available for most of the TComponent descendants. This property has the ability to modify the Layers and the Visibility.


Binding One Control to Multiple Controls

Binding one control to multiple controls is also possible with the LiveBindings Designer. For instance, when you need to bind an edit box to a label and the same edit box to a button, it is easy to just bind a control to multiple controls, as pictured below.


Form View


LiveBindings Designer


Running Application--prior to changing the text in the edit box


Running Application--after changing the text in the edit box

There is the InitializeControlValue property in the Object Inspector, for each binding in the designer, that allows you to define the default value that will be displayed when multiple components are bound to one control (for instance, if the edit is bound to a label and a button, the text that is displayed in the edit control by default is the text of the label or the caption of the button).

You can also bind one control to multiple component properties.

For instance, you can bind a TEdit control to the Text property of a TText and to the Text property of another TText control. But you cannot bind a TEdit control to two other TEdit controls (for instance, bind Edit1 to Edit2 and Edit3). Even though both TEdit and TText are controls, in the context of LiveBindings, they are different because a TEdit control expects user input while a TText control does not expect user input. When a control that accepts user input is used, the property that can be modified by user input is predefined (for instance, TEdit.Text). When a control that does not accept user input is used, you must manually pick the property.

The LiveBindings designer shows, for convenience, a default property for components that do not accept user input, such as TText.Text. But as far as LiveBindings is concerned, TText.Text is the same as any other property of your TText component.

LiveBindings Designer Procedures

LiveBindings Designer Topics

See Also

Personal tools
Previous Versions
In other languages