Book Shelf

Creating Cutsom Layouts

How it works

The rotating list uses two different layout algorithms to position it's children at the end of transitions.

standard layout
tile layout

Standard Layout

The standard layout is used when the container is transitioning towards the minimized bar position. This is where one child is maximized and the remaining children are in their bar states. This layout cannot be altered, it is set in stone within the rotating list class.

Tile Layout

The title layout on the other hand can be changed to fit different maximized layout needs. The default class that lays out the children during tiling is called the com.teotiGraphix.containers.rotatingListClasses.TileLayout. This cass is the default value of the tileLayoutClass property in the rotating list class.

If you decide to create an alternate tile layout, you must do the following;

Create a new class that subclasses com.teotiGraphix.containers.utilityClasses.Layout.
In that class implement com.teotiGraphix.containers.utilityClasses.ITransitionLayout interface. Which will add the property childInfoList.
Override the updateDisplayList() list method.
Calculate all children's size and position.
Store each of these values in a com.teotiGraphix.containers.utilityClasses.ChildPositionInfo object.
Add each of the those child info objects to the childInfoList.

Using the system above, you will allow the rotating list container to access the childInfoList after it calls the updateDisplayList() method of your subclassed layout.

An example class

package components.layouts
{
 
import com.teotiGraphix.containers.PaneFX;
import com.teotiGraphix.containers.RotatingListFX;
import com.teotiGraphix.containers.utilityClasses.ChildPositionInfo;
import com.teotiGraphix.containers.utilityClasses.ITransitionLayout;
import com.teotiGraphix.containers.utilityClasses.Layout;
 
import mx.core.EdgeMetrics;
 
/**
 * Sample class that lays out 3 children in a template fashion.
 * 
 * <p>The first child when maximized will take up the full
 * height of the left side. The two remaining children will
 * divide their height  and width in half, essentially using
 * on quarter each of the viewable space.</p>
 * 
 * @author Teoti Graphix
 * @date 05-07-07
 */
public class ThreePaneLeft 
	   extends Layout
	   implements ITransitionLayout
{
	private var _childInfoList:Array;
 
	/**
	 * @private
	 */
	public function get childInfoList():Array /*of ChildPositionInfo objects */
	{
		return _childInfoList;
	}
 
	public function ThreePaneLeft()
	{
		super();
	}
 
	//--------------------------------------------------------------------------
	//
	//  Methods
	//
	//--------------------------------------------------------------------------
 
	/**
	 *  @private
	 */
	override public function measure():void
	{
		super.measure();
	}
 
	/**
	 *  @private
	 */
	override public function updateDisplayList(
		unscaledWidth:Number, unscaledHeight:Number):void
	{
		super.updateDisplayList(unscaledWidth, unscaledHeight);
 
		_childInfoList = new Array();
 
		var info:ChildPositionInfo;
		var pane:RotatingListFX = RotatingListFX(target);
 
		var vm:EdgeMetrics = pane.viewMetricsAndPadding;
 
		var wPadding:Number = vm.right + vm.left;
		var hPadding:Number = vm.top + vm.bottom;
 
		var verticalGap:Number = pane.getStyle("verticalGap");
		var horizontalGap:Number = pane.getStyle("horizontalGap");
 
		var calcX:Number = vm.left;
		var calcY:Number = vm.top;
 
		var vGaps:Number = verticalGap;
		var hGaps:Number = horizontalGap;
 
		wPadding += hGaps;
		hPadding += vGaps;
 
		var calcWidth:Number = 
			Math.floor((unscaledWidth - wPadding) / 2);
		var calcHeight:Number = 
			Math.floor((unscaledHeight - hPadding) / 2);
 
		var len:int = pane.numChildren;
		for (var i:int = 0; i < len; i++)
		{
			var child:PaneFX = PaneFX(pane.getChildAt(i));
 
			info = new ChildPositionInfo(child);
 
			info.x = calcX;
			info.y = calcY;
 
			info.width = calcWidth;
			info.height = calcHeight;
 
			if (i == 0)
			{
				info.height = unscaledHeight - vm.top - vm.bottom;
				calcX += calcWidth + horizontalGap;
			}
			else
			{
				calcY += calcHeight + verticalGap;
			}
 
			_childInfoList.push(info);
		}
	}
}
}

In the code above you can see that all of the above list conditions are met. This class is also the class that simulates the 'InTheFlexCommunity' tile layout example.

You could also create a class that if there is an od number of children, the last child will be stretched vertically or horizontally.

Implementing the class

Once you have created the class, the last procedure of implementation is simple;

<containers:RotatingListFX id="rotatingList"
	tileLayoutClass="components.layouts.ThreePaneLeft"/>

You now have set the property tileLayoutClass of the rotating list container and it will now use the custom title class for the maximized tile layout.