To introduce data binding, let's take a relatively simple scenario. Suppose you want to create a relationship between an input box (the source element) and another input box (a bound element) where changes made to the source are automatically reflected in the bound element and vice versa. This type of relationship is referred to as "two-way data binding" and is depicted in the following images:

As the user changes the source element, the bound element is automatically updated.

As the user changes the bound element, the source element is automatically updated.

To program this type of functionality, you must first create the source element and then create the bound element with two-way binding, as shown in the following code:

<?xml version="1.0" encoding="utf-8" ?>
<?import href="box://ocpToolkit/theme/default/toolkit.box"?>
<?import href="box://ocpToolkit/content/core/coreGadgets.box"?>

<window xmlns="http://www.aol.com/boxely/box.xsd"
  xmlns:s="http://www.aol.com/boxely/style.xsd"
  xmlns:on="http://www.aol.com/boxely/reaction.xsd"
  s:minHeight="125"
  s:minWidth="475"
  s:maxHeight="125"
  s:maxWidth="475"
  title="Two-Way Data Binding"
  s:fill="white">

  <vbox>
    <hbox flex="1" s:height="10" />

    <label value="Two-way Data Binding"  s:fontBold="true" />
    <hbox flex="1" s:height="10" />
    <hbox>
      <label value="Source Element:" />
       <!-- Source element -->
      <input id="sourceData" value="Some Value"  s:width="360" />
    </hbox>
    <hbox flex="1" s:height="10" />
    <hbox>
      <label value="Bound Element:" s:fontFamily="Arial" />
       <!-- Bound element with two-way data binding -->
      <input value="" s:width="360" >
        <binding elementSource="sourceData" targetProperty="value" path="value"
          method="twoWay" />
      </input>
    </hbox>

  </vbox>

</window>

In the above code, the source element is an input gadget with the "sourceData" id.

The bound element is also an input gadget; it contains the child binding element, which binds the parent to the source identified in the elementSource attribute. The targetProperty attribute indicates which property of the bound element should be updated when a change occurs, and the path attribute indicates the property of the source element to use in the update. The method attribute indicates whether the binding is one-way or two-way. With two-way binding, changes made to the source are reflected in bound boxes, and changes made to a bound box are reflected in the source.

The Boxely UI Toolkit also supports one-way binding, where changes made to the source are reflected in bound boxes, but changes made to a bound box are not reflected in the source, as shown in the following images:

As the user changes the source element, the bound element is automatically updated.

As the user changes the bound element, the source element remains is unaffected.

The following code demonstrates how to do this:

<?xml version="1.0" encoding="utf-8" ?>
<?import href="box://ocpToolkit/content/core/coreGadgets.box"?>
<?import href="box://ocpToolkit/theme/default/toolkit.box"?>

<window xmlns="http://www.aol.com/boxely/box.xsd"
  xmlns:s="http://www.aol.com/boxely/style.xsd"
  xmlns:on="http://www.aol.com/boxely/reaction.xsd"
  s:minHeight="125"
  s:minWidth="475"
  s:maxHeight="125"
  s:maxWidth="475"
  title="One-Way Data Binding"
  s:fill="white">

  <vbox>
    <hbox flex="1" s:height="10" />
    <label value="One-way Data Binding"  s:fontBold="true" />
    <hbox flex="1" s:height="10" />
    <hbox>
      <label value="Source Element:" />
       <!-- Source element -->
      <input id="sourceData" value="Some Value"  s:width="350" />
    </hbox>
    <hbox flex="1" s:height="10" />
    <hbox>
      <label value="Bound Element:" s:fontFamily="Arial" />
       <!-- Bound element with one-way data binding -->
      <input value="" s:width="350" >
        <binding elementSource="sourceData" targetProperty="value" path="value"
          method="oneWay" />
      </input>
    </hbox>
  </vbox>
</window>

In the above code, notice that the binding element's method attribute is set to "oneWay" indicating a directional relationship.