By: tim

tim — Thu, 28 Jan 2010 14:57:56 +0000

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.

By: Gernot

Gernot — Wed, 27 Jan 2010 15:36:18 +0000

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;
}

}

By: Gernot

Gernot — Wed, 27 Jan 2010 15:33:42 +0000

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

Comments on: The FlowBox

By: tim

By: Gernot

By: Gernot