tim richter

November 21 2008

The FlowBox

A FlowBox arranges IUIComponents in a row/column until no more IUIComponents fit in that row/column. The IUIComponents will be arranged to their desired size.

In addition the FlowBox offers the possibility to choose different alignment and flow settings which are also modifiable at runtime.

These are the possible alignment values of the FlowBox:

  • Alignment.LEFT (default)
  • Alignment.TOP
  • Alignment.BOTTOM
  • Alignment.RIGHT
  • Alignment.TOP_LEFT
  • Alignment.TOP_RIGHT
  • Alignment.BOTTOM_LEFT
  • Alignment.BOTTOM_RIGHT

    • These are the possible flow values of the FlowBox:

  • Flow.LEFT_TO_RIGHT (default)
  • Flow.RIGHT_TO_LEFT
  • Flow.TOP_TO_BOTTOM
  • Flow.BOTTOM_TO_TOP

    • NOTE: keep in mind that the IUIComponents will be arranged to their alignment settings. This could lead to unintentional effects. F.e. with a Flow.BOTTOM_TO_TOP and an Alignment.BOTTOM_RIGHT, per default the components are not aligned to the right. To do this, the alignment settings have to be adjusted. This behaviour is intended, because it raises more flexibility.

    The following example demonstrates some style settings for the FlowLayout:

     
package
{
	import com.addicted2flash.layout.component.Application;
	import com.addicted2flash.layout.component.FlowBox;
	import com.addicted2flash.layout.core.UIContainer;
	import com.addicted2flash.layout.util.Alignment;
	import com.addicted2flash.layout.util.Flow;		
 
	/**
	 * @author Tim Richter
	 */
	public class FlowBoxTest extends Application
	{
		private var _flowBox: UIContainer;
 
		public function FlowBoxTest()
		{
			super( ABSOLUTE );
 
			_flowBox = new FlowBox( Flow.BOTTOM_TO_TOP, Alignment.BOTTOM_RIGHT );
			_flowBox.desiredPercentWidth = 1;
			_flowBox.desiredPercentHeight = 1;
 
			_flowBox.add( new SimpleComponent( 500, 200 ) );
			_flowBox.add( new SimpleComponent( 0.3, 100 ) );
			_flowBox.add( new SimpleComponent( 100, 0.5 ) );
 
			container.add( _flowBox );
		}
	}
}
 

    SimpleComponent.as

     
package layout
{
	import com.addicted2flash.layout.core.Component;
 
	import flash.display.Graphics;
	import flash.display.Sprite;
	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;
		}
	}
}
 
    3 COMMENTS
    LEAVE A COMMENT
    Gernot
    January 27, 2010
    ad

    Hi Tim,

    first i wanna thank you for your incredible layout library. It’s so much fun to play with.

    I only have one question regarding the alignment of a container. Let’s say want to align a FlowBox in the TOP_MIDDLE position of the stage (Application). Is there an easy way to achieve this, or do I have to edit the Alignment and FlowBox Classes. I can send you some example classes if you like.

    Many, many thanks, and have a nice day,
    Gernot

    Gernot
    January 27, 2010
    ad

    Here’s a short example what I mean. The problem is the page class:

    package
    {
    import com.addicted2flash.layout.component.Application;
    import com.addicted2flash.layout.component.FlowBox;
    import com.addicted2flash.layout.util.Alignment;
    import com.addicted2flash.layout.util.Flow;

    /**
    * …
    * @author Gernot Cseh
    */
    [SWF(backgroundColor="#650000",width="800",height="600",frameRate="60")]
    public class Main extends Application
    {
    private var _page : Page;

    public function Main() : void
    {
    super( ABSOLUTE );

    _page = new Page();
    _page.getRegion(Page.NORTH).add( new SimpleComponent( 830, 200 ) );
    _page.getRegion(Page.WEST).add( new SimpleComponent( 250, 500 ) );
    _page.getRegion(Page.WEST).add( new SimpleComponent( 250, 250 ) );
    _page.getRegion(Page.SOUTH).add( new SimpleComponent( 750, 200 ) );
    _page.getRegion(Page.EAST).add( new SimpleComponent( 500, 250 ) );

    container.add( _page );
    }
    }
    }

    import com.addicted2flash.layout.component.FlowBox;
    import com.addicted2flash.layout.component.HBox;
    import com.addicted2flash.layout.component.VBox;
    import com.addicted2flash.layout.core.Container;
    import com.addicted2flash.layout.strategy.ILayout;
    import com.addicted2flash.layout.util.Alignment;
    import com.addicted2flash.layout.util.Flow;
    import de.polygonal.ds.Vector;
    import flash.display.Sprite;
    import flash.utils.Dictionary;

    internal class Page extends FlowBox {

    public static const NORTH : int = 0×01;
    public static const EAST : int = 0×02;
    public static const SOUTH : int = 0×04;
    public static const WEST : int = 0×08;

    protected var _regions : Dictionary = new Dictionary(true);

    public function Page()
    {
    super( Flow.LEFT_TO_RIGHT, Alignment.TOP | Alignment.CENTER ); // here’s the problem… do I have to do Alignment.TOP | Alignment.CENTER ???

    desiredWidth = 750;
    desiredPercentHeight = 1;

    setupRegions();
    }

    protected function setupRegions() : void
    {
    var northRegion : HBox = new HBox();
    northRegion.desiredWidth = 750;
    northRegion.maximumWidth = 750;

    var eastRegion : VBox = new VBox();
    eastRegion.desiredWidth = 500;
    eastRegion.maximumWidth = 500;

    var southRegion : HBox = new HBox();
    southRegion.desiredWidth = 750;
    southRegion.maximumWidth = 750;

    var westRegion : VBox = new VBox();
    westRegion.desiredWidth = 250;
    westRegion.maximumWidth = 250;

    addRegion(NORTH, northRegion);
    addRegion(WEST, westRegion);
    addRegion(EAST, eastRegion);
    addRegion(SOUTH, southRegion);
    }

    public function addRegion(label:int, region:Container) : void
    {
    add(region);

    _regions[label] = region;
    }

    public function getRegion(label:int) : Container
    {
    return _regions[label] as Container;
    }

    }

    tim
    January 28, 2010
    ad

    Hi Gernot,
    first of all thanks for your post.
    The alignment of components depends on the container you use. The application class configured with ABSOLUTE constraint uses CanvasLayout internally. This layout is meant to layout all components absolute using CanvasLayoutConstraint. With this class you can specify absolute spacing from the component to the bounds of the container. But it does not use the alignment settings.

    Post a comment