Minimal Components: HBox, VBox

Saturday 8 August 2009 - Filed under ActionScript + Components + Flash

Long overdue, a couple of simple layout containers. HBox and VBox. You just create them, add components to them and they lay out the components vertically or horizontally. You can adjust the spacing. I had to go in and do a bunch of tweaks to other components to get their widths showing up correctly upon instantiation. So you might notice some changes here and there. Mostly in the checkbox, radio button, and indicator lights. These components had width and height affecting only the graphic, not the label. So now, the graphics are a fixed size of 10 pixels, and the overall width of the components is 12 + the width of the label. Hopefully that doesn’t break too much.

Also, using the VBox, and some tweaks I made to the Window component, I was able to put together a rudimentary accordion type control. Note, this is not a new component in the set, just something I rigged together. Here’s the exact code of the above demo so you can see how these new boxes work, and duplicate the accordion if you want.

[as]package
{
import com.bit101.components.Component;
import com.bit101.components.HBox;
import com.bit101.components.PushButton;
import com.bit101.components.VBox;
import com.bit101.components.Window;

import flash.display.Sprite;

[SWF(BackgroundColor=0xdddddd, width=400, height=500)]
public class Playground extends Sprite
{
private var vbox:VBox;

public function Playground()
{
Component.initStage(stage);

vbox = new VBox(this, 50, 50);
vbox.spacing = 0;
for(var i:int = 0; i < 4; i++)
{
var window:Window = new Window(vbox, 0, 0, "Accordion " + (i + 1));
window.hasMinimizeButton = true;
window.draggable = false;
if(i != 0) window.minimized = true;
}

var hbox:HBox = new HBox(this, 50, 20);
for(i = 0; i < 5; i++)
{
var button: PushButton = new PushButton(hbox, 0, 0, "button " + i);
button.width = 50;
}
}
}
}[/as]

Changes have been checked into SVN, but no new SWC yet.

http://code.google.com/p/minimalcomps/

2009-08-08  »  keith