Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Adobe AIR Development

Reply
Highlighted
Contributor
Posts: 11
Registered: ‎04-01-2008
My Device: Not Specified
Accepted Solution

Laying out buttons within a container

I'm trying to get a container to layout buttons on horizontally (like the documentation suggests it should) but everytime I try, all my buttons end up on top of each other.  Is there a way to get a simple flow layout so that my buttons are automatically spaced out?  Here is a snippet from my code.  Any suggestions or sample code is appreciated. 

 

            var scrollerSmiley FrustratedcrollPane = new ScrollPane();
            scroller.width = 1024;
            scroller.height = 200;
            scroller.y = 400;
            
            var c:Container = new Container();
            c.align = ContainerAlign.NEAR;
            c.flow = ContainerFlow.HORIZONTAL;
            c.containment = Containment.CONTAINED;
            
            var i:int;
            for (i=0;i<5;i++) {
                var b:LabelButton = new LabelButton();
                b.label = buttonNames[i];
                b.containment = Containment.CONTAINED;
                b.sizeMode = SizeMode.FLOW;
                c.addChild(b);
            }
            scroller.addScrollContent(c);
            
            c.layout();
            addChild( scroller );

Developer
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: Laying out buttons within a container

hey morpheus,

 

here is a working version of your code with changes in bold:

 

 

package
{
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;

import qnx.ui.buttons.LabelButton;
import qnx.ui.core.Container;
import qnx.ui.core.ContainerAlign;
import qnx.ui.core.ContainerFlow;
import qnx.ui.core.Containment;
import qnx.ui.core.SizeUnit;
import qnx.ui.core.Spacer;
import qnx.ui.listClasses.ScrollPane;

[SWF(width="1024", height="600", backgroundColor="#CCCCCC", frameRate="30")]
public class RandomTests extends Sprite
{
public function RandomTests()
{
super();

// support autoOrients
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

var scroller:ScrollPane = new ScrollPane();
scroller.width = 1024;
scroller.height = 200;
scroller.y = 400;

var c:Container = new Container();
c.align = ContainerAlign.NEAR;
c.flow = ContainerFlow.HORIZONTAL;


var i:int;
for (i=0;i<5;i++) {
var b:LabelButton = new LabelButton();
//didnt have an array for buttonname[]
b.label = "Some Button " + i;

//make sure to set the size of the contained objects
b.size = 150;
b.sizeUnit = SizeUnit.PIXELS;


c.addChild(b);

//add spacers to add a space between objects
c.addChild(new Spacer(3, SizeUnit.PIXELS));
}

scroller.addScrollContent(c);

c.layout();

addChild( scroller );

//set the width and the height of the container

c.setSize(stage.stageWidth,stage.stageHeight);
}
}
}

 

 

The main thing here is to remember to set the width and height of the container so it knows how much room it has to work with to space out your objects. make sure to also set widths for your objects such as buttons so the container knows exactly where to place your objects.

 

on a side note i didnt know what you were doing with scrollpane so i left it there assuming it was important in the rest of your code. hope that helps and good luck!

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
Contributor
Posts: 11
Registered: ‎04-01-2008
My Device: Not Specified

Re: Laying out buttons within a container

Thanks!  Much appreciated.