mike chambers | about

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"?>
    verticalCenter="0" horizontalCenter="0"

    <gumbo:Group verticalCenter="0" horizontalCenter="0">
        <Rect width="300" height="200" radiusX="{radiusSlider.value}"
                <SolidColor color="{fillColor.selectedColor}" />
                <SolidColorStroke weight="{strokeSlider.value}"
                    color="{strokeColor.selectedColor}" alpha="1" />

    <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" />


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.

twitter github flickr behance