Data Binding with FXG in Flex 4
One of the cool things about FXG is that it works with Flex data-binding just as your would expect it to.
Below is a simple example (which requires Flash Player 10 RC), followed the code, that shows data-binding with FXG and Flex 4
As you can see, there are still some bugs in the rendering, but that is to be expected as these are very early Flex 4 builds.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="library:adobe/flex/halo"
xmlns="http://ns.adobe.com/mxml/2009"
xmlns:gumbo="library:adobe/flex/gumbo"
verticalCenter="0" horizontalCenter="0"
layout="vertical">
<gumbo:Group verticalCenter="0" horizontalCenter="0">
<Rect width="300" height="200" radiusX="{radiusSlider.value}"
radiusY="{radiusSlider.value}">
<fill>
<SolidColor color="{fillColor.selectedColor}" />
</fill>
<stroke>
<SolidColorStroke weight="{strokeSlider.value}"
color="{strokeColor.selectedColor}" alpha="1" />
</stroke>
</Rect>
</gumbo:Group>
<mx:Label text="Corner Radius" />
<mx:HSlider minimum="0" maximum="100" id="radiusSlider" liveDragging="true"/>
<mx:Label text="Stroke Weight" />
<mx:HSlider minimum="0" maximum="20" value="5" id="strokeSlider" liveDragging="true"/>
<mx:Label text="Stroke Color" />
<mx:ColorPicker id="strokeColor" selectedColor="0x333333" />
<mx:Label text="Fill Color" />
<mx:ColorPicker id="fillColor" selectedColor="0x999999" />
</mx:Application>
You can of course, read more details on this in the FXG 1.0 Specification.
I also have a post on how to get started with Flex 4 FXG in Flex Builder 3.
Tags:
