The Canvas

Posted: May 30th, 2009 | Categories: AS3-Layout-Framework, Actionscript 3.0 | No Comments

The Canvas arranges its child components to their desired size regarding to their minimum and maximum size. It is possible to add an CanvasConstraint while adding a component to a Canvas. This constraint is an encapsulation of values used in an absolute layout (top, left, right, bottom) like in CSS.

These values can also be set in the CanvasConstraint constructor, so if a value should not be processed it must be set to NaN (not very beautiful in my opinion, but I choose this approach in order to provide a better workflow). The values can also be manipulated at runtime.

NOTE: The use of maximum and minimum size within a component can lead to unwanted layout effects. F.e. when the maximum size is smaller than the calculated size, the component cannot be arranged absolute to the CanvasConstraint values.
NOTE: Components can overlap in absolute layouts, so choose sizes and constraint values the right way.

The following example demonstrates a basic usage of the Canvas:

 
package layout
{
	import com.addicted2flash.layout.component.Canvas;
	import com.addicted2flash.layout.component.Application;
	import com.addicted2flash.layout.constraint.CanvasConstraint;
	import com.addicted2flash.layout.util.Size;	
 
	/**
	 * @author Tim Richter
	 */
	public class CanvasTest extends Application
	{
		public function CanvasTest()
		{
			super( ABSOLUTE );
 
			var canvas: Canvas = new Canvas();
			canvas.desiredPercentWidth = 1;
			canvas.desiredPercentHeight = 1;
			canvas.add( new SimpleComponent( 100, 100 ), new CanvasConstraint( NaN, 20, 30, NaN ) );
			canvas.add( new SimpleComponent() ), new CanvasConstraint( NaN, 20, 30, 20 ) );
 
			//-- add canvas to the application container
			container.add( canvas );
		}
	}
}
 

SimpleComponent.as

 
package layout
{
	import com.addicted2flash.layout.core.Component;
 
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;	
 
	/**
	 * @author Tim Richter
	 */
	public class SimpleComponent extends Component
	{
		private static var _id: int = 0;
		private var _tField: TextField;
 
		public function SimpleComponent( width: Number, height: Number )
		{
			desiredWidth = width;
			desiredHeight = height;
			//-- desiredPercentWidth = width;
			//-- desiredPercentHeight = height;
 
			_tField = new TextField( );
			_tField.autoSize = TextFieldAutoSize.CENTER;
			_tField.selectable = false;
			_tField.textColor = 0x999999;
			_tField.text = ( _id++ ).toString();
 
			display.addChild( _tField );
		}
 
		override public function arrange(): void
		{
			var g: Graphics = display.graphics;
			g.clear();
			g.lineStyle( 0, 0xccff00 );
			g.drawRect( 0, 0, width, height );
 
			_tField.x = ( width - _tField.textWidth ) * 0.5;
			_tField.y = ( height - _tField.textHeight ) * 0.5;
		}
	}
}
 

---