Geek Answers Handbook

How to create bidirectional data binding in Flex 3?

I need to bind a property to an edit control, and the control will return its value to the same property. The problem is that I set the initial value before creating the control:

<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 it this:

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

What's happening:

  • docLabel text field ends with a blank (equal to "")
  • XmlDoc @label attribute has a value of ""

I want this:

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

How to do this using Flex 3?

Edit

I 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.

+4
source share
6 answers

You can try using BindingUtils to programmatically create a binding after creating the class: http://life.neophi.com/danielr/2007/03/programmatic_bindings.html

There are many variations of this that I used to solve such problems. If you can’t figure it out from the link, write a comment and I will dig out the 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}"); }
+3
source

Take a look at Bidirectional data binding . Take a look at a piece of text:

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

tx: Binding

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"/>
+2
source

In Flex 3, you're better off doing something similar. Also not sure what you can directly link to XML?

Instead, do the following:

  [Bindable] public var tmpString: String; public var onChange():void { tmpString = docLabel.text; //set the XML string, etc. } ]]> </mx:Script> <mx:TextInput id="docLabel" text="{tmpString}" change="onChange()" />

+1
source

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

0
source

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

0
source

I created custom controls that programmatically create two-way bindings when providing a provider object that has a matching property whose name matches the identifier of the control. Here is an example for 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 (popup dialog). The data property is assigned an instance of the corresponding model class, which is always a mute container [Bindable] .

 <?xml version="1.0" encoding="utf-8"?> <PopUp xmlns="com.econemon.suite.gui.components.*" xmlns:mx="http://www.adobe.com/2006/mxml"> <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>
0
source

More articles:


All Articles