The HBox

Posted: April 27th, 2009 | Categories: AS3-Layout-Framework, Actionscript 3.0 | 4 Comments

An Hbox arranges its child components horizontally according to their desired size. If the size is is declared in percentage values, it will set the components bounds percentaged to the space left filled by fixed size components.

NOTE: percentaged values of child components are just handled if the desired size of the HBox was set explicitly.

For a detailed view on the component/container structure see AS3-Layout-Framework.

The following example demonstrates a basic usage of the HBox:

 
package
{
	import com.addicted2flash.layout.component.Application;
	import com.addicted2flash.layout.component.HBox;
	import com.addicted2flash.layout.core.UIContainer;	
 
	/**
	 * @author Tim Richter
	 */
	public class HBoxTest extends Application
	{
		private var _box: UIContainer;
 
		public function HBoxTest()
		{
			super( Application.ABSOLUTE );
 
			_box = new HBox();
			_box.add( new SimpleComponent( 100, 100 ) );
			_box.add( new SimpleComponent( 50, 100 ) );
			_box.add( new SimpleComponent( 100, 150 ) );
 
			//-- add hbox to the application container
			container.add( _box );
		}
	}
}
 

SimpleComponent.as

 
package layout
{
	import com.addicted2flash.layout.core.Component;
 
	import flash.display.Graphics;
	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( w: Number, h: Number )
		{
			desiredWidth = w;
			desiredHeight = h;
 
			_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.beginFill( 0xccff00 );
			g.drawRect( 0, 0, width, height );
			g.endFill();
 
			_tField.x = ( width - _tField.textWidth ) * 0.5;
			_tField.y = ( height - _tField.textHeight ) * 0.5;
		}
	}
}
 

---