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.

If you have done Flash development using the Flash Authoring tool, or have done any low level work with the SWF format, then you should be familiar with the concept of symbols. Basically a symbol is a reusable object (graphics, buttons, MovieClip) that can be included in the SWF once, but referenced and used many times.

Flex 4 FXG has a similar concept of symbol, although the actual underlying implimentation is different. Using the Library and Definition elements, you can define a graphic symbol, which can then be reused multiple times within the FXG or MXML document.

For example, here is our HelloWorld example from yesterday, which uses a symbol to display the content, as opposed to just generating it inline:

<?xml version="1.0" encoding="utf-8"?>
<Application
	xmlns:mx="library:adobe/flex/halo"
	xmlns="http://ns.adobe.com/mxml/2009"
	xmlns:gumbo="library:adobe/flex/gumbo">

	<Library>
		<Definition name="HelloWorldText">
			<gumbo:Group>
				<TextGraphic fontFamily="Verdana" fontWeight="bold">
					<content>Hello, World</content>
				</TextGraphic>
			</gumbo:Group>
		</Definition>
	</Library>

	<!-- Flex 4 Hello World with FXG -->
	<mx:Canvas top="0" bottom="0" left="0" right="0">
		<gumbo:Group verticalCenter="0" horizontalCenter="0">
			<HelloWorldText />
		</gumbo:Group>
	</mx:Canvas>

	<!-- reference the symbol again -->
	<gumbo:Group left="5" bottom="5">
		<HelloWorldText />
	</gumbo:Group>
</Application>

Pay attention to the namespace usage as right now, it can be a little tricky.

Notice that once we define a symbol, we can then reuse it multiple times by referencing its name attribute as if it was a native FXG element.

A Library element must contain one of more Definition elements. A Definition element must have a name attribute and contain one Group element.

One thing to keep in mind, is that currently, this is code that is executed at runtime, and thus underneath the hood, FXG is not creating actual SWF symbols at compile time. However, that is something that we are looking at to optimize working with static assets.

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.