Experimenting with Datagroup custom layouts

I’m experimenting with building custom 3D layouts for the Spark DataGroup. Here in this first example I’ve built a display for a stack of items – X-Men – that you can cycle thru. What I was aiming for is something like a combo box that gives an indication of the number of elements to choose from without actually clicking on anything.

I think it would be cool to use something like this and then animate the positions of the renderers based on user input. For instance the group could be tightly bound and then when the user mouses over they expand so that all of the renderers can be viewed.

Creating the custom layout is very simple to do. There are only 2 methods that I had to override: updateDisplayList and measure. Actually I could have gotten away with just overriding updateDisplyList by itself if I didn’t care to make the layout dynamic. But where’s the fun in that?

override public function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ):void {
	super.updateDisplayList( unscaledWidth, unscaledHeight );

	var count:uint = this.target.numElements;
	var element:IVisualElement;
	for ( var index:int = 0; index < count; index++ ) {
		var fraction:Number = index / ( count - 1 );
		element = target.getElementAt( index );
		element.alpha = 1.2 - fraction;
		var matrix3D:Matrix3D = new Matrix3D();

		// Don't screw with the first item.
		if( index > 0 ) {

			matrix3D.appendTranslation(
				_xOffset + ( _xFactor * fraction ),
				_yOffset + ( _yFactor * fraction ),
				_zOffset + ( _zFactor * fraction ) );

		} else {
			// If you did want to reposition the first item then here you go.
		}

		element.setLayoutMatrix3D( matrix3D, false );
		element.depth = count - index;
	}
}

override public function measure():void {
	super.measure();
	target.invalidateDisplayList();
}

I got some help along the way via these posts:

• http://miti.pricope.com/2009/05/29/playing-with-custom-layout-in-flex-4/ – This is a very cool post and a neat custom layout but it was done back in May 09 with an early beta of Gumbo. So the code needs to be massaged in order to work properly with Flex 4.
• http://www.insideria.com/2009/05/flex-4-custom-layouts.html