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 Developer
Posts: 47
Registered: ‎10-22-2009
My Device: Not Specified

Proper method to layout containers

Hello friends,

 

I am trying to to create a simple screen that has the following layout.

 

A parent container that is 700 px wide and 500px height. In this parent container there are two more containers assigned 50% width. In each of these container i want to add X number of labels. The labels should word wrap as required. Also see attached image to provide more clarity on what i am doing. I am going insane about this.

 

Please help.

 

What i want to do

Image

New Developer
Posts: 47
Registered: ‎10-22-2009
My Device: Not Specified

Re: Proper method to layout containers

Figured it out. Man always find the answer only after posting.

 

The problem was that i need to properly set the label size. Here is my code of others.

 

		private function addIngredientsList():Container{
			//layout for the buttons
			var cTemp1:Container = new Container();
			cTemp1.flow = ContainerFlow.HORIZONTAL;
			cTemp1.sizeUnit = SizeUnit.PIXELS;
			cTemp1.width = 750;
			
			cTemp1.debugColor = 0x404040;
			cTemp1.margins = Vector.<Number>([10,10,10,10]);
			
			//container for the left elements
			var left:Container = new Container();
			left.flow = ContainerFlow.VERTICAL;
			left.sizeUnit = SizeUnit.PERCENT;
			//left.autoSize = TextFieldAutoSize.LEFT;
			left.size = 100;
			left.debugColor = 0x404040;
			//left.margins = Vector.<Number>([10,10,10,10]);
			cTemp1.addChild(left);
			
			//container for the right elements
			var right:Container = new Container();
			right.flow = ContainerFlow.VERTICAL;
			right.sizeUnit = SizeUnit.PERCENT;
			right.size = 100;
			right.debugColor = 0x404040;
			//right.margins = Vector.<Number>([10,10,10,10]);
			cTemp1.addChild(right);
						
			//break up the ingredient list
			var arr:Array = ingredientString.split("####");
			var rightsize:int = 0;
			var leftsize:int = 0;
			
			for (var i:int = 0; i <arr.length; i++) {
				var cTemp:Container = new Container();
				cTemp.flow = ContainerFlow.HORIZONTAL;
				cTemp.sizeUnit = SizeUnit.PERCENT;
				cTemp.size = 100;
				var icon:Image = new Image();
				if (arr[i] != " ") {
					if (i%5==0) {
						icon.setImage(File.applicationDirectory.resolvePath('./redpepper.png').url);
					} else  if ( i%5==1){
						icon.setImage(File.applicationDirectory.resolvePath('./watermelon.png').url);
					} else  if ( i%5==2){
						icon.setImage(File.applicationDirectory.resolvePath('./corn.png').url);
					} else if ( i%5==3){
						icon.setImage(File.applicationDirectory.resolvePath('./yellowpepper.png').url);
					} else if ( i%5==4){
						icon.setImage(File.applicationDirectory.resolvePath('./lime.png').url);
					}
				}
				
				icon.setPosition(0,0);
				icon.setSize(33,33);
				cTemp.addChild(icon);
				
				var labelCenter:Container = new Container();
				labelCenter.sizeUnit = SizeUnit.PERCENT;
				//labelCenter.size =20;
				labelCenter.flow=ContainerFlow.HORIZONTAL;
				//labelCenter.sizeMode = SizeMode.BOTH;
				var lb:Label = addLabel2(" " + arr[i],33);
				labelCenter.flow = ContainerFlow.VERTICAL;
				//labelCenter.addChild(addSpacer1());
				//labelCenter.addChild(addSpacer1());
				labelCenter.addChild(addSpacer1());
				labelCenter.addChild(lb);
				//labelCenter.margins = Vector.<Number>([3,3,3,3]);
				labelCenter.debugColor = 0xff0000;	
				
				cTemp.addChild(labelCenter);
				
				if (i%2==0){
					//i is even
					left.addChild(cTemp);
					leftsize = leftsize + lb.height +10;
				} else {
					//i is odd
					right.addChild(cTemp);
					rightsize = rightsize + lb.height +10;
				}
			}
			

			left.height = Math.max(leftsize,rightsize) + 20;//(int)(arr.length/2)*37 + (arr.length%2)*37 + 20;
			right.height = left.height;
			cTemp1.size = Math.max(left.height, right.height);
			cTemp1.height = Math.max(left.height, right.height);
			return cTemp1;
		}

		private function addLabel2(caption:String, size:int):Label {
			var c_format2:TextFormat = new TextFormat();
			c_format2.bold = true;
			c_format2.size= 16;
			c_format2.color = 0x736F6E;
			c_format2.italic = true;
			
			var label3:Label = new Label();
			label3.autoSize = TextFieldAutoSize.LEFT;
			label3.text = caption;
			label3.size = 40;
			label3.multiline = true;
			label3.sizeMode = SizeMode.BOTH;
			label3.sizeUnit = SizeUnit.PERCENT;
			label3.textField.setTextFormat(c_format2);
			label3.multiline = true;
			label3.wordWrap = true;
			label3.setSize(label3.textWidth, label3.textHeight);
			return label3;
		}

 

New Developer
Posts: 47
Registered: ‎10-22-2009
My Device: Not Specified

Re: Proper method to layout containers

Ok so above solution does not work. Can some please help.