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.

About a month ago, the Flex team announced that nightly builds of the next version of Flex (code named Gumbo) were now available on the opensource Flex site. Along with early versions of the SDK, the team also posted a ton of other information, including specs and API docs.

Below is a listing of links and resources about Gumbo / Flex 4. Going through these will quickly get your up to speed on what is being worked on in Flex 4, and get your ready for playing around with the new builds.

Official opensource project page
http://opensource.adobe.com/wiki/display/flexsdk/Gumbo

Flex 4 Downloads
http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4

Gumbo Themes
http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+Themes

An Introduction to the Gumbo Component Architecture
http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+Component+Architecture

Flex 4 Language / API Reference
http://livedocs.adobe.com/flex/gumbo/langref/

Videos
The Next Dimension of Rich Experiences (360 Flex Keynote) Mark Anders
http://link.brightcove.com/services/link/bcpid1753161885/bctid1741161343

Flex SDK Next Plan (Matt Chotin)
http://flexorg.wip3.adobe.com/gumbo/gumboplan.htm

Flex 4 Skinning Architechture : Deepa Subramaniam
http://bit.ly/46xv4V

Designer / Developer Workflow in Flex 4 (Ely Greenfield)
http://bit.ly/zM2h2

Feature Specifications

• FXG 1.0 (Graphic Interchange Format)
• Skinning and Skinnable Components
• Enchanced States Syntax
• Group Containter
• Items Component and Selector
• Layout Interface
• Application Component
• Text Primitives
• TextInput Component
• TextArea Component
• ScrollBar Component
• Range Class
• Track Base Class
• Slider Component
• Spinner Component
• Numeric Stepper Component
• MXML 2009

Podcast : The Future of Flex : Matt Chotin on the Flex Show
http://www.theflexshow.com/blog/index.cfm/2008/7/30/The-Flex-Show–Episode-49-The-Future-of-Flex-with-Matt-Chotin

More Resources
Flex Developer Forums
http://www.adobeforums.com/webx/.3c060f85/

Flex Team Blog
http://blogs.adobe.com/flex/

Sean Moore also has a good link round up on his blog.

If you have any more resources or links, post them in the comments.

From the press release:

Adobe Systems Incorporated (Nasdaq:ADBE) today announced that it is offering Adobe® Flexâ„¢ Builderâ„¢ 2 software at no cost to students and faculty at educational institutions worldwide…. Adobe Flex 2 will be available to qualified education end-users for free download on Adobe.com in early November.

You can read the entire press release here.

I was working on some new mini chart apps over the weekend for the MXNA reports section, and had a DataGrid that contained dates. I wanted to allow the user to sort the datagrid by the DateField, but by default the DataGrid sorts dates with a string compare (calling toString on the Date instance).

I tried to set up a custom sort function for the DataGridColumn instance that contained the dates, but because I was using a custom label format function for the column, Flex passed the labels to me, and not the data items (which would allow me to get access to the Date instance). Because of this, I couldn’t sort on the date.

There is an example on Macromedia.com that shows how to sort by dates, but it requires that you override and implement all sorting for the DataGrid (something which seemed unecessary and overkill to me). Peter Ent also posted an example, but it required massaging the data on the server first, something which was not an option for me since I was using a public web service API.

So, after much trial and error, and help from Matt Chotin, I finally got it working, and figured I would post it here.

Basically, I listen for the headerRelease event for the DataGrid. If it is in response to the date column being clicked, then I sort the dataprovider that the DataGrid is hooked up to (otherwise, I do nothing, and let the DataGrid do the sorting).

Here is an example:

Here is the Code:

———-DateSortExample.mxml———-

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" initialize="initTag()"
	backgroundColor="0xFFFFFF" marginTop="0" marginLeft="0" marginRight="0" marginBottom="0">		

	<mx:Script source="DateSortExample.as" />   

	<mx:Panel title="DataGrid Date sorting example" width="475" height="350">

	    <mx:DataGrid id="dg" height="100%" width="100%">
	        	<mx:columns>
		        <mx:Array>
            	        <mx:DataGridColumn headerText="Letters" width="50" columnName="letter" />
            	        <mx:DataGridColumn headerText="Numbers" width="50" columnName="number" />
            	        <mx:DataGridColumn headerText="Dates" columnName="date" />
            	   </mx:Array>
            	</mx:columns>
	    </mx:DataGrid>

	</mx:Panel>
</mx:Application>

—————————————-

———-DateSortExample.as———-

private var dp:Array;
private var sortOrder:Number = 1;

private  function initTag():Void
{
	//listend for the headerRelease event on the datagrid, which is broadcast
	//when any of the column headers are clicked.
	dg.addEventListener("headerRelease",
		mx.utils.Delegate.create(this, onDateHeaderRelease));

	dp = new Array();

	//pupulate the date grid with some data.
	var item:Object;
	var randomDay:Number;
	var randomMonth:Number;
	for(var i:Number = 0; i < 15; i++)
	{
		randomDay = Math.floor(Math.random() * 30);
		randomMonth = Math.floor(Math.random() * 12);

		item = new Object();
		item.date = new Date(2005, randomMonth, randomDay);
		item.letter = String.fromCharCode(i + 65);
		item.number = i;

		dp.push(item);
	}

	//set the dataProvider for the datagrid
	dg.dataProvider = dp;
}

//Note, this should be in a DateUtils class
/*
	returns
	-1 : first date is larger than the second
	 1 : first date is smaller than the second
	 0 : Both dates are the same
*/
private static function compareDates(d1:Date, d2:Date):Number
{
	var d1ms:Number = d1.getTime();
	var d2ms:Number = d2.getTime();

	if(d1ms > d2ms)
	{
		return -1;
	}
	else if(d1ms < d2ms)
	{
		return 1;
	}
	else
	{
		return 0;
	}
}

//compares the dates
private function dateFieldCompare(item1:Object, item2:Object, bit:Number):Number
{
	//determine which way the column should be sorted (ASC or DESC
	var toggle:Number = (bit == Array.DESCENDING)? 1 : -1;

	//call compare date function, and then toggle the sort direction
	return toggle * compareDates(item1.date,item2.date);
}

//called when any of the datagrids column headings are clicked
private function onDateHeaderRelease(eventObj:Object):Void
{
	//Only sort if the Date column head was clicked
	if(eventObj.columnIndex == 2)
	{
		//sort the dataProvider directly, passing the function to do the sort
		//and a bit indicating whether to sort ascending or descending
		dp.sortItems(dateFieldCompare, ((sortOrder == 1)? 0: Array.DESCENDING));

		//reverse the sort order so the next time the column is clicked, it is
		//sorted in the reverse order
		sortOrder *= -1;
	}
}

—————————————-

You can download the source from here (or right click on the example).

This work is licensed under a Creative Commons License.