Adobe AIR Development

[magicmonty]

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?

[jtegen]

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.

[magicmonty]

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

[JRab]

hey magicmonty,

i was racking my brain over this but then it hit me 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!

[jtegen]

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.

[renaun · Accepted solution]

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]);

[magicmonty]

Thanks, that helped.

[karensilkwood]

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 objbject in tabNavLabels )
   {
    var tab:Tab = new Tab();   
    tab.name = "TabNav" + counter;
    addChild(tab);
    counter++;
   
    tab.x = xpos; 
    xpos += tab.width + Constants.SPACER_WIDTH;
   
   }
  }
 }
}