How to use the AS3-Layout-Framework

November 9th, 2008 • AS3-Layout-Framework, Actionscript 3.0, Design Patterns

The AS3-Layout-Framework is basically very simple and easy to understand. It is based on one structural (Composite) and one behavioural (Strategy) pattern.

The composite pattern is used to compose objects into tree structures to represent part-whole hierarchies. Also it has the advantage to let clients treat individual objects and compositions of objects uniformly[GHJV95]. While updating all ILayoutComponents, a ILayoutContainer ( extends ILayoutComponent) lays out its subcomponents and a simple ILayoutComponent just handles its bounds ( Figure 1 shows the inheritance structure of the participants in more detail ).

The strategy pattern is used to encapsulate algorithms in objects with a well formed interface and lets the algorithm vary independently from clients that use it[GHJV95].
In the AS3-Layout-Framework the ILayout embodied the strategy pattern. This makes the creation of concrete layouts very simple and easy to plug in (f.e. GridLayout, FlowLayout).

Display representation:

The AS3-Layout-Framework itself is loosely-coupled from the display list. But to ease the use of it in daily usage, UILayoutComponent extends Sprite and according to that UILayoutComponent and UILayoutContainer are binded to the display list ( see the inheritance structure in Figure 1 ).

To layout an existing project all visible representations just have to extend UILayoutComponent or UILayoutContainer.

In addition ILayoutComponent extends ILayoutObservable and provides the functionality to add ILayoutObservers. Which means that other objects can register themself for specific layout events.

NOTE: The fact that ECMA-Script does not support multiple inheritance led to simplify the display inheritance structure. Otherwise the existing code had to be copied in every new concrete implementation (Bitmap, Shape, Sprite, MovieClip...). This would end up in error prone and unmaintainable code.

Worth knowing:

The internal data structure of the AS3-Layout-Framework is very similar to the data structure of the IList interface in the AS3-Collection-Framework.

This means that the add, remove and set methods work nearly the same way. There is just one difference: there are no null s allowed. After adding a ILayoutComponent at a specified index bigger than the component amount, the lag will be filled with NullComponent s. This has one big advantage. Developers can customize there own ILayoutStrategy without dealing with lags in calculation.

The following section covers two fundamental use cases of the layout's data structure, which is especially for those readers who are not familiar with the AS3-Collection-Framework.

addComponentAt( index: int, c: ILayoutComponent ): void

adds a ILayoutComponent at a specified index, if the index is bigger than the component amount, the lag will be filled with NullComponent s (list does not contain null s), otherwise the element currently at that position and any subsequent elements will be shifted to the right and the given ILayoutComponent will be inserted at the specified index.
NOTE: same as splice( index, 0, object ) in the Array class.

setComponentAt( index: int, c: ILayoutComponent ): void

sets a ILayoutComponent at a specified index, if the index is bigger than the component amount, the same logic of addComponentAt( index: int, c: ILayoutComponent ) takes place. Otherwise the ILayoutComponent at the specified index will be replaced with the given ILayoutComponent.
NOTE: same as splice( index, 1, object ) in the Array class

Example:

SimpleLayoutExample.as

package
{
	import com.addicted2flash.layout.Column;
	import com.addicted2flash.layout.FlowLayout;
	import com.addicted2flash.layout.GridLayout;
	import com.addicted2flash.layout.ILayoutStrategy;
	import com.addicted2flash.layout.LayoutMatrix;
	import com.addicted2flash.layout.LayoutSettings;
	import com.addicted2flash.layout.Padding;
	import com.addicted2flash.layout.Row;
	import com.addicted2flash.layout.Size;
	import com.addicted2flash.layout.Style;
	import com.addicted2flash.layout.UILayoutContainer;
	import com.addicted2flash.layout.example.SimpleComponent;
 
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.geom.Rectangle;	
 
	/**
	 * @author Tim Richter
	 */
	public class SimpleLayoutExample extends Sprite
	{
		protected var _container: UILayoutContainer;
 
		/**
		 * Create a new <code>SimpleLayoutExample</code>.
		 */
		public function SimpleLayoutExample()
		{
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
 
			stage.addEventListener( Event.RESIZE, onResize );
 
			_container = new UILayoutContainer( new LayoutSettings( 0, 0, new Size( 800, 600 ) ) );
			addChild( _container );
 
//			_container.layout = createFlowLayout();
			_container.layout = createGridLayout();
 
			_container.padding = new Padding( 10, 5, 25, 50 );
 
			_container.addComponent( new SimpleComponent( new LayoutSettings( .5, .5, new Size( 100, 80 ) ) ) );
			_container.addComponent( new SimpleComponent( new LayoutSettings( 0, 1, new Size( 140, 100 ) ) ) );
			_container.addComponent( new SimpleComponent( ) );
 
			_container.addComponent( new SimpleComponent( ) );
			_container.addComponent( new SimpleComponent( ) );
 
			update( );
		}
 
		/**
		 * @inheritDoc
		 */
		protected function update(): void
		{
			_container.setLayoutSize( stage.stageWidth, stage.stageHeight );
		}
 
		protected function createFlowLayout(): ILayoutStrategy
		{
			return new FlowLayout( 0, 0, Style.BOTTOM_RIGHT );
		}
 
		protected function createGridLayout(): ILayoutStrategy
		{
			return new GridLayout( 3, 4, 10, 20, Style.RIGHT_TO_LEFT );
		}
 
		private function onResize( event: Event ): void
		{
			update();
		}
	}
}

SimpleComponent.as

 
package
{
	import com.addicted2flash.layout.ILayoutComponent;
	import com.addicted2flash.layout.LayoutEventType;
	import com.addicted2flash.layout.LayoutSettings;
	import com.addicted2flash.layout.UILayoutComponent;
 
	import flash.geom.Rectangle;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;		
 
	/**
	 * This class represents a basic <code>UILayoutComponent</code> that draws an outline around
	 * the layout bounds.
	 *
	 * @author Tim Richter
	 */
	public class SimpleComponent extends UILayoutComponent
	{
		private static var _count: int = 0;
		private var _tField: TextField;
 
		/**
		 * Create a new <code>SimpleComponent</code>.
		 *
		 * @param settings <code>LayoutSettings</code>
		 */
		public function SimpleComponent( settings: LayoutSettings = null )
		{
			super( settings );
 
			initialize( );
		}
 
		/**
		 * @inheritDoc
		 */
		override public function processLayoutEvent( type: int, c: ILayoutComponent ): void
		{
			if( type & LayoutEventType.BOUNDS )
			{
				drawOutline( layoutBounds );
 
				updateTextField( );
			}
		}
 
		private function updateTextField(): void
		{
			_tField.x = ( layoutBounds.width - _tField.textWidth ) / 2;
			_tField.y = ( layoutBounds.height - _tField.textHeight ) / 2;
		}
 
		private function drawOutline( bounds: Rectangle ): void
		{
			graphics.clear( );
			graphics.lineStyle( 1, 0xcecece );
			graphics.beginFill( 0xdddddd, .4 );
			graphics.drawRect( 0, 0, bounds.width, bounds.height );
		}
 
		private function initialize(): void
		{
			_tField = new TextField( );
			_tField.textColor = 0x666666;
			_tField.autoSize = TextFieldAutoSize.LEFT;
			_tField.selectable = false;
			_tField.text = ( _count++ ).toString();
 
			addChild( _tField );
		}
	}
}
 

Figure 1 : Inheritance structure of AS3-Layout-Framework

References:

[GHJV95] E. Gamma, R. Helm, R. Johnson, and J. Vlissides, Design Patterns – Elements of Reusable Object-Oriented Software, Addison-Wesley, 1995

AS3-Layout-Framework example

Trackback URI.