Control Binding

XWT binding provides a simple and consistent way for application to present and interact with UI element.

What is Control Binding?

Control Binding is the mechanism to establish a connection between two UI controls. Control Binding is different from Data Binding, Control Binding doesn't deal with the associated data. For example, if UI element 'A' is bound correctly to UI element 'B', then, when the UI 'B' element change its property value, UI 'A' element changes automatically.

Basic Control Binding Concepts

Control Binding like data binding, has four elements: a binding target object, a target property, a binding source and an ElementName path. For example, if you want to bind the width of button A to the button B, your target object is the button A, the target property is the 'Width' property, the value to use is the width of button B and the source object is the Button B.

Creating a Control Binding

In XWT, you establish a binding using the Binding object. This section discusses how to set up a binding.

<Shell xmlns="http://www.eclipse.org/xwt/presentation"
    xmlns:x="http://www.eclipse.org/xwt"
    x:Class="org.eclipse.e4.xwt.tests.layout.FormLayout_Test">
    <Shell.layout>
        <FormLayout />
    </Shell.layout>
    <Group text="layout">
        <Group.layout>
            <FormLayout />
        </Group.layout>
        <Group.layoutData>
            <GridData horizontalAlignment="FILL" verticalAlignment="FILL">
            </GridData>
        </Group.layoutData>
        <Button x:Name="Button1" text="button1">
            <Button.layout>
                <FormData top="10, 10" left="0, 10" bottom="30, 0" right="40, 0" />
            </Button.layout>
        </Button>
        <Button text="button2">
            <Button.layout>
                <FormData top="{Binding ElementName=Button1}, 10" left="0, 0"
            bottom="40, 0" right="40, 0" />
            </Button.layout>
        </Button>
    </Group>
</Shell>

Notice that in the above example, in which the binding source object is Button1. There provide an ElementName property to specify the source object.