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
Developer
Posts: 587
Registered: ‎04-01-2009
My Device: Z10, PlayBook
My Carrier: NA
Accepted Solution

StackLayout not working (overlapping children)

I'm trying to use StackLayout in an BB10 AIR app for the first time and things aren't stacking.

 

Example code:

 

 

package 
{
    import flash.display.Sprite;
    import qnx.fuse.ui.dialog.AlertDialog;
    import qnx.fuse.ui.text.Label;
    import flash.events.Event;
    import qnx.fuse.ui.text.TextFormat;
    
    import qnx.fuse.ui.core.*;
    import qnx.fuse.ui.layouts.stackLayout.*;
    import qnx.fuse.ui.listClasses.*;
    
    [SWF(width="768", height="1280", backgroundColor="#000000", frameRate="60")]
    public class Example extends Sprite
    {
        private var label1:Label = new Label();
        private var label2:Label = new Label();
    
        public function Example()
        {
            try
            {                
                init();
            }
            catch(error:Error)
            {
                dialog("Error on Initialization", error.message);
            }
        }
        
        private function init():void
        {
            var container : Container = new Container();
            container.setActualSize(stage.stageWidth, stage.stageHeight);
            container.scrollDirection = ScrollDirection.VERTICAL;
            
            var layout : StackLayout = new StackLayout();
            layout.padding = 25;
            
            container.layout = layout;            
            addChild(container);
        
            var myFormat:TextFormat = new qnx.fuse.ui.text.TextFormat();
            myFormat.bold = true;
            myFormat.size = 50;
            myFormat.color = 0xFFFFFF;
            myFormat.font = "Slate Pro";
        
            label1.text = "A";
            label1.format = myFormat;            
            label1.validateNow();
            label1.height = label1.textHeight;
            label1.width = label1.textWidth;
            container.addChild(label1);
            
            label2.text = "B";
            label2.format = myFormat;            
            label2.validateNow();
            label2.height = label2.textHeight;
            label2.width = label2.textWidth;
            container.addChild(label2);
        }
        
        private function debug(msg:String):void
        {
            dialog("Debug", msg);
        }
        
        private function dialog(title:String, msg:String):void
        {
            var alert:AlertDialog = new AlertDialog();
            alert.title = title;
            alert.message = msg;
            alert.addButton("Ok");
            alert.show();
        }
    }
}

The labels "A" and "B" overlap each other in the top left corner.

Developer
Posts: 587
Registered: ‎04-01-2009
My Device: Z10, PlayBook
My Carrier: NA

Re: StackLayout not working (overlapping children)

"The StackLayout class organizes controls in an overlapping stack, where the stack is defined by the z-order of the control. "

 

Well that explains why.

 

Why does the Cascades StackLayout work one way and the AIR StackLayout work in another way?

The Cascades class arranges things either horizontally or vertically.

 

Sigh. 

Developer
Posts: 587
Registered: ‎04-01-2009
My Device: Z10, PlayBook
My Carrier: NA

Re: StackLayout not working (overlapping children)

Here's some sample code using RowLayout that achieves what StackLayout does in the Cascades framework:

 

 

package 
{
    import flash.display.Sprite;
    import qnx.fuse.ui.dialog.AlertDialog;
    import qnx.fuse.ui.text.Label;
    import flash.events.Event;
    import qnx.fuse.ui.text.TextFormat;
    
    import qnx.fuse.ui.core.*;
    import qnx.fuse.ui.layouts.rowLayout.*;
    import qnx.fuse.ui.listClasses.*;
    
    import qnx.fuse.ui.layouts.Align;
    
    [SWF(width="768", height="1280", backgroundColor="#000000", frameRate="60")]
    public class Example extends Sprite
    {
        private var label1:Label = new Label();
        private var label2:Label = new Label();
    
        public function Example()
        {
            try
            {                
                init();
            }
            catch(error:Error)
            {
                dialog("Error on Initialization", error.message);
            }
        }
        
        private function init():void
        {
            var container : Container = new Container();
            container.setActualSize(stage.stageWidth, stage.stageHeight);
            container.scrollDirection = ScrollDirection.VERTICAL;
            
            var layout : RowLayout = new RowLayout();
            layout.padding = 25;
            layout.type = RowLayoutType.VERTICAL;
            
            container.layout = layout;            
            addChild(container);
        
            var myFormat:TextFormat = new qnx.fuse.ui.text.TextFormat();
            myFormat.bold = true;
            myFormat.size = 50;
            myFormat.color = 0xFFFFFF;
            myFormat.font = "Slate Pro";
            
            var myTitleRowData:RowData = new RowData();
            myTitleRowData.hAlign = Align.CENTER;
            myTitleRowData.vAlign = Align.CENTER;
        
            label1.text = "A";
            label1.format = myFormat;            
            label1.validateNow();
            label1.height = label1.textHeight;
            label1.width = label1.textWidth;
            label1.layoutData = myTitleRowData;
            container.addChild(label1);
            
            label2.text = "B";
            label2.format = myFormat;            
            label2.validateNow();
            label2.height = label2.textHeight;
            label2.width = label2.textWidth;
            label2.layoutData = myTitleRowData;
            container.addChild(label2);
        }
        
        private function debug(msg:String):void
        {
            dialog("Debug", msg);
        }
        
        private function dialog(title:String, msg:String):void
        {
            var alert:AlertDialog = new AlertDialog();
            alert.title = title;
            alert.message = msg;
            alert.addButton("Ok");
            alert.show();
        }
    }
}