The VBox

Posted: May 20th, 2009 | Categories: AS3-Layout-Framework, Actionscript 3.0 | 5 Comments

An Vbox arranges its child components vertically 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 VBox:

 
package
{
	import com.addicted2flash.layout.component.Application;
	import com.addicted2flash.layout.component.VBox;
 
	/**
	 * @author Tim Richter
	 */
	public class VBoxTest extends Application
	{
		public function VBoxTest()
		{
			super( Application.ABSOLUTE );
 
			var box: VBox = new VBox();
			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
{
	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;
		}
	}
}
 

5 Comments on “The VBox”

  1. 1 Simon Richardson said at 21:19 on September 23rd, 2009:

    Nice to see a simple lightweight layout framework. Would be great as a feature request is to have float items. By this I mean, set a desired width on a VBox and then fill it full of components, if these components are smaller than the desired width and fits another component next to it, then display them inline. Bit like how CSS when you float left and display inline.

    I thinking of extending the class to enable this, but the VBox has BoxLayout hardcoded in the constructor. So I guess I could make a VBoxInline (or another name ;-) ) so I can swap out the layout.

    I didn’t really want to start messing about with the code, although if / when I get around to it I will push it to you to see if it could be incorporated as it should be quite clean and tidy (hopefully!)

  2. 2 tim said at 19:01 on September 30th, 2009:

    Hi Simon,

    thanks for your comment. Please take a look at the FlowBox, perhaps it will fulfill your needs.

  3. 3 Simon Richardson said at 10:21 on October 3rd, 2009:

    Hi tim,

    It did indeed fulfill my requirements. Worked like a charm ;-)

    I like then new features as well (good to see the framework is always evolving), but I notice lock and unlock has vanished. Are they ever coming back, because I will just remove from my code if they’ve gone.

    Out of interest why did they disappear ?

    Cheers
    Simon

  4. 4 tim said at 09:54 on October 8th, 2009:

    Hi Simon,

    you are right. I just removed these methods. There are not needed anymore. I have implemented an validation mechanism based on the Stage.RENDER event, so all components are just arranged at a frame, when flash will repaint the screen. This mechanism is therefore asynchron and you can now invoke add/remove or set properties of the components multiple times and there will only be one invalidation (measure/arrange in component).

    Another change was to encapsulate the DisplayObject from the Component itself. Every component has a explicit getter for display (an Sprite) now.

  5. 5 Simon Richardson said at 21:45 on October 12th, 2009:

    Hi tim,

    Cheers for the response. I’m a big fan of the new DisplayObject ecapsulation, spotted that straight away, makes perfect sense.

    Cheers
    Simon


Leave a Reply