[flexcoders] Mapping complex objects to custom components with data binding?

[Keith Hughitt]

Hello all,

I am trying configure a DataGrid so that whenever a row is selected, a
custom "Details" components will be updated to show some various
information relating to that row.  I am able to retrieve the row
information whenever a row is selected, but I have not been as
successful getting it to the custom component using data binding.

Here is a simpler example of what I'm trying to do:

main.xml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
xmlns:custom="custom.*">
     <mx:Script>
     <![CDATA[
         import mx.controls.Alert;

         [Bindable]
         private var dog:Object;

         public function updateObj(e:Event):void {
             var myDog:Object = {
                 "breed": e.target.label,
                 "age"  : 5
             }

             dog = myDog;
         }
     ]]>
     </mx:Script>
     <mx:Button label="Lab" click="updateObj(event)" />
     <mx:Button label="Poodle" click="updateObj(event)" />
     <mx:Label text="Details:" />
     <custom:Details dataProvider="{dog}" />

</mx:Application>
custom/Details.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml";
horizontalAlign="center" verticalAlign="middle">
     <mx:Script>
     <![CDATA[
         public var dataProvider:Object;
     ]]>
     </mx:Script>
     <mx:Text text="Breed: {data.breed}" />
     <mx:Text text="Age: {data.age}" />
</mx:VBox>

There is an article in the livedocs that is pretty close:
http://livedocs.adobe.com/flex/3/html/help.html?content=ascomponents_4.h\
tml, but I was hoping to be able to keep things simpler than that.

Anyone know if this is possible using a similar approach to the above?
Any suggestions?


Any advice would be greatly appreciated.

Thanks!
Keith