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

New Developer
Posts: 60
Registered: ‎12-21-2008
My Device: Not Specified
Accepted Solution

question about the UI tutorial

HI all


I am currently working my way through the UI tutorial, and based on it, tried to expand on it. Now I have a question. playbook UI container question.jpg


The above image is what I have right now, but for some reason,  I can't adjust the location  for "Resistor 1" and the entry box to any position other than the middle. I even explicitly told it to be else where. I am not sure if I am being clear so I have included a picture of how it should look at the end as well. This is how I envisioned it to look like. Obviously this is just a mock up in Paint, so things aren't exactly aligned or pretty. 


playbook UI container question how it should be.jpg



Below is the code. The comment Initialize UI body is where I start trying to adjust the location of the Label and TextInput object.  






	//import qnx.ui.core.Container;
	//import mx.rpc.mxml.Concurrency;
	//import qnx.ui.buttons.Button;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	import qnx.ui.buttons.LabelButton;
	import qnx.ui.core.*;
	import qnx.ui.data.DataProvider;
	import qnx.ui.listClasses.List;
	import qnx.ui.text.Label;
	import qnx.ui.text.TextInput;
	// The following metadata specifies the size and properties of the canvas that
	// this application should occupy on the BlackBerry PlayBook screen.
	[SWF(width="1024", height="600", backgroundColor="#cccccc", frameRate="30")]
	public class ResistorTest extends Sprite
		//for the resistor tab
	/*	private var R1:Number;
		private var R2:Number;
		private var R3:Number;
		private var sum:Number; 
		private var R1TextField:TextInput;
		private var R2TextField:TextInput;
		private var R3TextField:TextInput;
		private var total:LabelButton = new LabelButton();
		private var ResistorTab:LabelButton = new LabelButton();
		private var CapacitorTab:LabelButton = new LabelButton();
		private var RightSub:Container;
		private var MidSub:Container;
		private var LeftSub:Container;
		private var myMain:Container;
		//==========================UI control=======================
		private var TitleLabel1:Label;
		private var TitleLabel2:Label;
		private var TitleLabel3:Label;
		private var leftButton:LabelButton;
		private var rightButton:LabelButton;

		//constructor here
		public function ResistorTest()
			addEventListener(Event.ADDED_TO_STAGE, handleAddedToStage);
		private function initializeUI():void
			//main container
			myMain = new Container();
			myMain.debugColor = 0xFFCC00;
			myMain.margins = Vector.<Number>([30,30,30,30]); //margins for the left, top, right, and bottom edges
			myMain.flow = ContainerFlow.HORIZONTAL;	
			// sub container
			RightSub = new Container();
			RightSub.debugColor = 0xFF3300;
			RightSub.margins = Vector.<Number>([10,10,10,10]);            
			RightSub.flow = ContainerFlow.VERTICAL;
			RightSub.size = 33;
			RightSub.sizeUnit = SizeUnit.PERCENT;			
			RightSub.align = ContainerAlign.MID;
			RightSub.padding = 10;
			MidSub = new Container();
			MidSub.debugColor = 0x0033FF;
			MidSub.margins = Vector.<Number>([10,10,10,10]);            
			MidSub.flow = ContainerFlow.VERTICAL;
			MidSub.size = 33;            
			MidSub.sizeUnit = SizeUnit.PERCENT;
			MidSub.align = ContainerAlign.MID;
			MidSub.padding = 10;
			LeftSub = new Container();
			LeftSub.debugColor = 0x33FF33;
			LeftSub.margins = Vector.<Number>([10,10,10,10]);            
			LeftSub.flow = ContainerFlow.VERTICAL;
			LeftSub.size = 34;
			LeftSub.sizeUnit = SizeUnit.PERCENT;
			LeftSub.align = ContainerAlign.MID;
			//LeftSub.containment = Containment.DOCK_BOTTOM; 
			LeftSub.padding = 10;
			//add sub containers
			//======================initialize the UI titles
			//========================initialize for Left Sub Container Title
			var labelFormat:TextFormat = new TextFormat();
			labelFormat = new TextFormat();            
			labelFormat.size = 22;
			TitleLabel1 = new Label();
			TitleLabel1.format = labelFormat;
			TitleLabel1.text = "Resistors";
			TitleLabel1.sizeUnit = SizeUnit.PERCENT;
			TitleLabel1.autoSize = TextFieldAutoSize.LEFT;
			//========================initialize for Mid Sub Container Title
			TitleLabel2 = new Label();
			TitleLabel2.format = labelFormat;
			TitleLabel2.text = "Capacitors";
			TitleLabel2.sizeUnit = SizeUnit.PERCENT;
			TitleLabel2.autoSize = TextFieldAutoSize.LEFT;
			//========================initialize for Right Sub Container Title
			TitleLabel3 = new Label();
			TitleLabel3.format = labelFormat;
			TitleLabel3.text = "Inductors";
			TitleLabel3.sizeUnit = SizeUnit.PERCENT;
			TitleLabel3.autoSize = TextFieldAutoSize.LEFT;
			//============================ initialzie the UI body, the fields for entry
			//add five resistors.
			var fourthLabel:Label = new Label();
			fourthLabel.format = labelFormat;			
			fourthLabel.text = "Resistor 1:";
			fourthLabel.x = 10;
			fourthLabel.y = 10;
			fourthLabel.width = fourthLabel.textWidth + 5;
			fourthLabel.height = fourthLabel.textHeight + 5;
			var firstInput:TextInput = new TextInput;
			firstInput.width = 80;
		private function onResize(event:Event):void
			myMain.setSize(stage.stageWidth, stage.stageHeight);
		private function handleAddedToStage(e:Event):void
			stage.addEventListener( Event.RESIZE, onResize );
			onResize(new Event(Event.RESIZE));


thanks guys



New Contributor
Posts: 3
Registered: ‎01-19-2011
My Device: Not Specified

Re: question about the UI tutorial

adding an element to a Container will override the x and y you set. you can use a Sprite if you want to place your elements using x and y.
New Developer
Posts: 60
Registered: ‎12-21-2008
My Device: Not Specified

Re: question about the UI tutorial

so you are saying the addChild() can't be there? I have to find somewhere else to put it?

New Contributor
Posts: 3
Registered: ‎01-19-2011
My Device: Not Specified

Re: question about the UI tutorial

The container will automatically adjust the x and y for you, keep adding the labels and inputs and they will line up. If you want the button to be at the very bottom you can add a spacer()

RightSub.addChild(new Spacer());

var btn:LabelButton =  new LabelButton();

If you need more control over placement you can add the button to the main sprite using x and y
var btn:LabelButton =  new LabelButton();
btn.x = 50;
btn.y = 500;

New Developer
Posts: 60
Registered: ‎12-21-2008
My Device: Not Specified

Re: question about the UI tutorial

what if I want the label and text box side by side? instead of top/bottom

New Contributor
Posts: 3
Registered: ‎01-19-2011
My Device: Not Specified

Re: question about the UI tutorial

It can't be done with a single container.


Option 1: Use another container (Horizontal flow) or sprite (x,y placement)  so each label and textinput would be placed inside this container and each group would be added to your Vertical flow container.


Option 2: use x and y to place each control and do not use any containers.

New Developer
Posts: 60
Registered: ‎12-21-2008
My Device: Not Specified

Re: question about the UI tutorial

OH YOU HAVE GOT TO BE KIDDING ME!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!


So my options are either:

1. use more code to describe the buttons and layouts, when I am trying to code less to keep things clear


2. don't use containers, go back to what I had before, with everything's layout hard coded


I thought containers are suppose to make things easier!