Mike Chambers

code = joy

Data Binding with FXG in Flex 4

with 7 comments

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.

Source

<?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.

Written by mikechambers

August 29th, 2008 at 1:00 pm

Posted in Flex

Tagged with

«
»

7 Responses to 'Data Binding with FXG in Flex 4'

Subscribe to comments with RSS or TrackBack to 'Data Binding with FXG in Flex 4'.

  1. You should probably add some Flash version detection and not embed the example unless the visitor actually has FP 10. I have the debug version of FP 9, which the majority of your readers probably have, and get a few exceptions thrown at me…

    On another note, is it just me or does the radiusX/Y properties on Rect feel a little odd? What do they do? Radius is not something I associate with rectangles.

    Theo

    30 Aug 08 at 4:21 am

  2. @Theo

    –
    On another note, is it just me or does the radiusX/Y properties on Rect feel a little odd? What do they do? Radius is not something I associate with rectangles.
    –

    They control the corner radius / curve for the rectangle (i.e. allows you to have a rectangle with curved corners (although then it is technically no longer a rectangle).

    mike chambers

    mesh@adobe.com

    mikechambers

    30 Aug 08 at 10:58 am

  3. Wouldn’t

    ellipseWidth and ellipseHeight be more appropriate as they are in AS?

    or maybe event cornerRadiusWidth and cornerRadiusHeight.

    Tink

    30 Aug 08 at 1:31 pm

  4. [...] Data Binding with FXG in Flex 4 (from Mike Chambers) [...]

    Flex Monkey Patches » Blog Archive » Rubbernecker’s Review - Week 10

    2 Sep 08 at 7:38 am

  5. Mike, I’m getting gumbo crashes when I try and compile this …

    This is just drawing an X in the container using DataBinding to set the co-ords. Any ideas if there are issues with DB in Gumbo?

    Lee Probert

    30 Apr 09 at 4:42 am

  6. code wasn’t published … I’m databinding the xFrom & To’s in a Line FXG node.

    Lee Probert

    30 Apr 09 at 4:43 am

  7. btw – in your example can you not draw the stroke inside the box to avoid that ugly cut-off?

    Lee Probert

    30 Apr 09 at 4:50 am

Leave a Reply