Friday, September 29, 2006

Simplified Binding Example for Flex 2

Finally figured out a way to get my code to render properly in my blog. There seems to be some confusion on how to communicate between components. This example kinda covers most of the basics.

Child Component:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Metadata>
[Event(name="childEvent", type="flash.events.Event")]
</mx:Metadata>
<mx:Script>
<![CDATA[
[Bindable]
public var testLabelText:String;
private function clickHandler():void {
var eventObj:Event = new
Event("childEvent");
dispatchEvent(eventObj); }
]]>
</mx:Script>
<mx:Binding source="test.text" destination="testLabelText" />
<mx:TextInput id="test" text="{testLabelText}"/>
<mx:Button x="167" y="0" label="Button" click="clickHandler()"/>
</mx:Canvas>

Parent Application:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">
<ns1:Child x="388" y="105" id="childLabel" testLabelText="{parentLabel.text}"
childEvent="status.text='child button clicked'"/>
<mx:TextInput x="388" y="131" text="{childLabel.testLabelText}" id="parentLabel"/>
<mx:Label x="388" y="161" id="status"/>
</mx:Application>

4 comments:

Anonymous said...

Binding 101 can be found here:
http://labs.flexcoders.nl/?p=24

Anonymous said...

hi Victor,

Just want to say thanks for your easy to understand flex example, it is really nice and simple.

/Jesper

Andrea said...

Excelent example, thank you very much.

Anonymous said...

It was certainly interesting for me to read that post. Thanks for it. I like such themes and anything that is connected to them. I would like to read a bit more soon.