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
New Contributor
magicmonty
Posts: 4
Registered: ‎12-12-2010
My Device: Torch 9800 / PlayBook (soon)
Accepted Solution

Problem with complex layouts and container

Hi,

I want to make some quite complex layouts with containers.

This works fine until I nest a UI element in the fourth level of containers. Then the margins seem to be ignored:

 

I have this sample code:

 

[SWF(width="1024", height="600", backgroundColor="#e6e6e6", frameRate="30")]
public class NestingTest extends Sprite {

	public function NestingTest()
	{
            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;
            
            var mainContainer:Container = new Container();
            mainContainer.margins = Vector.<Number>([22,22,22,22]);
            mainContainer.debugColor = 0xff0000;			
            addChild(mainContainer);
            
            var viewContainer:Container = new Container();
            viewContainer.debugColor = 0x00ff00;
            viewContainer.margins = Vector.<Number>([22,22,22,22]);    
            mainContainer.addChild(viewContainer);
            
            var view:Container = new Container();
            view.debugColor = 0x0000ff;
            view.margins = Vector.<Number>([22,22,22,22]);    
            viewContainer.addChild(view);			            
            
            var row1Container:Container = new Container();
            row1Container.debugColor = 0xffff00;
            row1Container.margins = new Vector.<Number>([22,22,22,22]);
            view.addChild(row1Container);
            
            mainContainer.setSize(stage.stageWidth, stage.stageHeight);			
            
            stage.nativeWindow.visible = true;
}

row1Container should have a margin too, but it will neither displayed in the debugColor nor it will used, when I put an component in.

 

Is this simply a bug, or do I miss something here?

Bye
Martin
Please use plain text.
Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10
My Carrier: Verizon

Re: Problem with complex layouts and container

Have you looked the the Container documentation at http://www.blackberry.com/developers/docs/airapi/1.0.0/index.html?  It has been greatly expanded to show nested containers.  That might answer your question.

Please use plain text.
New Contributor
magicmonty
Posts: 4
Registered: ‎12-12-2010
My Device: Torch 9800 / PlayBook (soon)

Re: Problem with complex layouts and container

[ Edited ]

Yes, I startet with that documentation.

But the example covers only 3 levels of nesting, meaning, that the labels are in a container in a container.

 

The problem occurs, if you add deeper nesting.

 

for example try to add a container, which contains another container to mySubRight. Then the margins for the innermost container doesn't work anymore

Bye
Martin
Please use plain text.
Developer
JRab
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: Problem with complex layouts and container

hey magicmonty,

 

i was racking my brain over this but then it hit me :smileyhappy: in your last container you have the margin value incorrect. change the following line:

 

 

row1Container.margins = new Vector.<Number>([22,22,22,22]);

 

 

to

 

 

row1Container.margins = Vector.<Number>([22,22,22,22]);

 

the margin value doesnt like the word new. your margin's should work as they are supposed to. hope that helped! 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
Please use plain text.
Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10
My Carrier: Verizon

Re: Problem with complex layouts and container

Yet another reason to change this API to be more "conventional".  This should just be:

 

row1Container.margins = [22,22,22,22];

 

Please BB, get rid of the Vector notation.

Please use plain text.
Regular Contributor
renaun
Posts: 86
Registered: ‎10-25-2010
My Device: Not Specified

Re: Problem with complex layouts and container

The line:

row1Container.margins = new Vector.<Number>([22,22,22,22]);

should have no "new" operator like the other lines:

 

row1Container.margins = Vector.<Number>([22,22,22,22]);
blog: http://renaun.com
twitter: @renaun
Please use plain text.
New Contributor
magicmonty
Posts: 4
Registered: ‎12-12-2010
My Device: Torch 9800 / PlayBook (soon)

Re: Problem with complex layouts and container

Thanks, that helped.

 

 

Bye
Martin
Please use plain text.
Contributor
karensilkwood
Posts: 17
Registered: ‎05-27-2011
My Device: Blackberry tablet

Re: Problem with complex layouts and container

Hi Guys,

 

I am having this wierd margin issue too.

 

as you guys mentioned I am using 

 

this.margins = Vector.<Number>([ Constants.SPACER_WIDTH,
          Constants.SPACER_WIDTH,
          Constants.SPACER_WIDTH,
          Constants.SPACER_WIDTH]);

 

for what ever reason it still igores my margin settings.

 

any thoughts what can be the issue in here?

 

please see below my class


 

package com.x.view
{
 import com.x.application.Constants;
 import com.x.view.Tab;
 
 import qnx.ui.core.Container;
 import qnx.ui.core.ContainerAlign;
 import qnx.ui.core.ContainerFlow;
 
 public class TabNavigation extends Container
 {
  private var tabNavLabels:Array = ["My Fav","Search", "Manage"];
  
  public function TabNavigation()
  {
   initializeUI();
  }
  
  private function initializeUI():void
  {
     margins = Vector.<Number>([ Constants.SPACER_WIDTH,
          Constants.SPACER_WIDTH,
          Constants.SPACER_WIDTH,
          Constants.SPACER_WIDTH]);
   align = ContainerAlign.NEAR;
   flow = ContainerFlow.HORIZONTAL;
   height = Constants.TABNAV_HEIGHT;
   width = Constants.APP_WIDTH;
   
   populateTabNavigation();
  }
  
  private function populateTabNavigation():void
  {
   var counter:int = 0;
   var xpos:Number = 0;
   
   for each(var obj:smileysurprised:bject in tabNavLabels )
   {
    var tab:Tab = new Tab();   
    tab.name = "TabNav" + counter;
    addChild(tab);
    counter++;
   
    tab.x = xpos; 
    xpos += tab.width + Constants.SPACER_WIDTH;
   
   }
  }
 }
}

 

 

Please use plain text.