Data Binding

• What is Data Binding?
• Basic Data Binding Concepts
• Creating a Data Binding
• Specifying the path expression of data binding
• Based on JFace Data binding

What is Data Binding?

Data Binding is the process that establishes a connection between the application UI and business logic. If the binding has the correct settings and the data provides the proper notifications, then, when the data changes its value, the elements that bound to the data reflect changes automatically. Data binding can also mean that if an outer representation of the data in an element changes, then the underlying data can be automatically updated to reflect the change.

Basic Data Binding Concepts

Regardless of what element you are binding and the nature of your data source, each binding always follows the model illustrated by the following figure:

As illustrated by the above figure, data binding is essentially the bridge between your binding target and your binding source. The figure demonstrates the following fundamental XWT data binding concepts.

• Typically, each binding has these four components: a binding target object, a target property, a binding source and a path to the value in the binding source to use.
• The target property must be a dependency property. Most UIElement properties are dependency properties and most dependency properties, except read-only ones, support data binding by default.
• Although not specified in the figure, it should be noted that the binding source object is not restricted to being a custom CLR object. XWT data binding supports data in the form of CLR objects and XML.

It is important to remember that when you are establishing a binding, you are binding a binding target to a binding source. For example, if you are displaying some underlying XML data in a Text using data binding, you are binding your Text to the XML data.

To establish a binding, you use the Binding object. The rest of this topic discusses many of the concepts associated with and some of the properties and usage of the Binding object.

Creating a Data Binding

In XWT project, you establish a data binding using the Binding object, and each binding usually has four components: binding target, target property, binding source, and a path to the source value to use. This section discusses how to set up a data binding.

<Shell xmlns="http://www.eclipse.org/xwt/presentation"
    xmlns:x="http://www.eclipse.org/xwt"
    xmlns:y="clr-namespace:org.eclipse.e4.xwt.tests.databinding"
    Size="400, 300" DataContext="{StaticResource myData}">
    <Shell.layout>
        <GridLayout numColumns="3" />
    </Shell.layout>
	
    <x:Shell.Resources>
        <y:Person x:Key="myData" />
    </x:Shell.Resources>
	
    <Label text="Name" />
    <Text x:style="BORDER" text="{Binding Path=name}">
        <Text.layoutData>
            <GridData horizontalAlignment="FILL" grabExcessHorizontalSpace="true" />
        </Text.layoutData>
    </Text>
    <Label text="{Binding Path=name}">
        <Label.layoutData>
            <GridData horizontalAlignment="FILL" grabExcessHorizontalSpace="true" />
        </Label.layoutData>
    </Label>
</Shell>

Notice that in the previous example, the binding source is specified by setting the text property on the Text element. To reiterate, the binding source object is necessary components of a binding. Therefore, without the binding source object being specified, the binding would do nothing.

we associate a new Person object in Shell to a key "myData" to a property initialization.

    <x:Shell.Resources>
        <y:Person x:Key="myData" />
    </x:Shell.Resources>

But you must define the DataContext first, then the data binding can works.

    DataContext="{StaticResource myData}"

In this example we specify the binding source by setting the source property directly on the binding declaration of Text and Label. There are several ways to specify the binding source object. Also can using one property on a parent element is useful when you are binding multiple properties to the same source.

If your binding source is an object, you use the Path property to specify the value to use for your binding. If you are binding to XML data, you use the XPath property to specify the value. In some cases, it may be applicable to use the Path property event when your data is XML.

Here we associate the property value of the Person object to Text and Label. So keep synchronously the value of Text and Label. Please see the following codes.

    <Text x:style="BORDER" text="{Binding Path=name}">
	
    <Label text="{Binding Path=name}">

Specifying the path expression of data binding

In XWT, it also support path expression of data binding. If your binding source is an object, you use the Path property to specify the value to use for your binding. For example, if you want binding the city of the manager of a company, which is the data context of the window. you can specify the path as "manager.address.city".

Based on JFace Data binding

XWT also support data binding based on JFace. You can use an ItemsControl such as ListViewer or TabelViewer to display a data collection. Look at the example below, the ListViewer binds a Company class which has a employees member with collection type.

<Composite 
    ...
    DataContext="{StaticResource myCompany}"> 
    ...
    <x:Composite.Resources>
        <j:Company x:Key="myCompany">
            <j:Company.employees>
                <j:Employee Name="Thomas" />
                <j:Employee Name="Jin" />
            </j:Company.employees>
        </j:Company>
    </x:Composite.Resources>
    <ListViewer input="{Binding Path=employees}">
        ...
    </ListViewer>
</Composite>