mike chambers | about

Data Binding with FXG in Flex 4

Friday, August 29, 2008

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][2]), followed the code, that shows data-binding with FXG and [Flex 4][3]

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.

twitter github flickr behance