How do I create a bidirectional data binding in Flex 3?

Question

I need to bind a property to an edit control and have the control write its value back to the same property. The problem is, I'm setting the source value before the control is created:

<mx:Panel>
    <mx:Script>
        <![CDATA[
            [Bindable] public var editedDocument: XML;
        ]]>
    </mx:Script>
    <mx:TextInput id="docLabel" text="{editedDocument.@label}"/>
    <mx:Binding source="docLabel.text" destination="editedDocument.@label"/>
</mx:Panel>

I call this like so:

var xmlDoc: XML = <document label="some label" />;
var myPanel: MyPanel = new MyPanel();
myPanel.editedDocument = xmlDoc;
parent.addChild(myPanel);

What happens is this:

• the docLabel text field ends up blank (equal to "")
• the xmlDoc's @label attribute is set to ""

What I want is this:

• the docLabel text field should contain "some label"
• the xmlDoc's @label attribute should change only when the docLabel's text property changes.

How do I accomplish this, using Flex 3?

Edit

I have also tried this:

<mx:Panel>
    <mx:Script>
        <![CDATA[
            [Bindable] public var editedDocument: XML;
        ]]>
    </mx:Script>
    <mx:TextInput id="docLabel"/>
    <mx:Binding source="editedDocument.@label" destination="docLabel.text"/>
    <mx:Binding source="docLabel.text" destination="editedDocument.@label"/>
</mx:Panel>

The result is the same.

Answer 1

I think bidirectional data binding is a new feature in Flex 4.

Answer 2

You can try using BindingUtils to programmatically create the binding after the class has been created: http://life.neophi.com/danielr/2007/03/programmatic%5Fbindings.html

There are many variations of this that I've used to tackle similar problems. If you can't figure it out from the link post a comment and I'll dig through my source code and see what I can find.

private function init():void 
{
  var xmlDoc: XML = <document label="some label" />;
  var myPanel: MyPanel = new MyPanel();
  myPanel.editedDocument = xmlDoc;
  parent.addChild(myPanel);
  BindingUtils.bindProperty(docLabel, "text", editedDocument, "label");

  //or maybe it should be one of these, I have not done binding to an XML attribute before
  BindingUtils.bindProperty(docLabel, "text", editedDocument, "@label");
  BindingUtils.bindProperty(docLabel, "text", editedDocument, "{@label}");
}

Answer 3

Take a look at Two-way data binding. Take a look at the part of the text:

In Flex 3, if you want to set two-way binding using the

mx:Binding

tag you need to set it twice: mx:Binding source="a.property" destination="b.property"/> mx:Binding source="b.property" destination="a.property"/>

which becomes:

mx:Binding source="a.property" destination="b.property" twoWay="true"/>

Answer 4

This is straight from Adboe http://opensource.adobe.com/wiki/display/flexsdk/Two-way+Data+Binding, and it's Flex 3 too!

Answer 5

I created custom controls that programmatically create two-way bindings when given a provider object that has a suitable property whose name matches the control's id. Here's an example for a TextInput:

public class BoundTextInput extends TextInput
{
  // some code omitted for brevity:
  // Create getter / setter pair, call invalidateProperties()
  // and set internal flag for efficiency

  // create bindings in commitProperties:
  override protected function commitProperties():void
  {
    if (this._fProviderChanged) {
      this._fProviderChanged = false;
      if (null != this._provider && this._provider.hasOwnProperty(this.id) && this._provider[this.id] is String) {
        // this is the core bit
        BindingUtils.bindProperty(this, "text", this._provider, this.id);
        BindingUtils.bindProperty(this._provider, this.id, this, "text");
      }
    }
    // Normally, you call the overridden method first,
    // but we want to see the values initialized by the new
    // binding right away, so we first create the bindings
    // and then commit all inherited properties
    super.commitProperties();
}

}

This is an example of how I use it inside one of my other components (a popup dialog). The data property is set to an instance of the appropriate model class, which is always a dumb, [Bindable] container.

<?xml version="1.0" encoding="utf-8"?>
<PopUp xmlns="com.econemon.suite.gui.components.*" xmlns:mx="http://www.adobe.com/2006/mxml"&gt;
  <mx:Form width="100%" height="100%" >
    <mx:FormHeading label="Server-URL" />
    <mx:FormItem label="URL" >
      <!--
        If it is available, and of type String, data.urlServer
        is bound to the text property of this TextInput
      -->
      <BoundTextInput id="urlServer" provider="{this.data}"/>
    </mx:FormItem>
    <mx:FormItem>
      <mx:Button label="OK" click="this.submit(event)" />
    </mx:FormItem>
  </mx:Form>
</PopUp>