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
Highlighted
Developer
Posts: 93
Registered: ‎02-05-2011
My Device: Not Specified

Label alignment in Container

[ Edited ]

Hello everyone,

 

I'm having a problem with label alignment in the container. Label has the .containment = CONTAINED property value as I require the label to align dynamically (text is changing).

 

The problem is that:

1. when I set the containment = DOCK_BOTTOM - the label's .x and .y values dropped to the middle-bottom of the container, and AFTER that width/height changed according to the label's text.

2. when set containment = CONTAINED or BACKGROUND the problem stays - the x/y are set first, the width/height after that.

3. I need to use the .textField.scaleX/.textField.scaleY properties in order to increase the text size over the limit (limit is 127 or so, I need 250).

 

I think the points described above are just bugs of beta SDK, but this does not make me feel better.

 

I just need to put the label on the center of the container and have it aligned properly no matter what text is there (text changes too frequent).

 

Any ways to have this done? Any help is highly appreciated.

Thanks

New Developer
Posts: 4
Registered: ‎03-05-2011
My Device: Not Specified

Re: Label alignment in Container

I'm not sure I understand exactly what you're after but maybe this will help.. one way to center text in a positioned container is to wrap it in a container that can center, like a VGroup:

 

 <s:Panel x="106" y="66" width="250" height="200">

   <s:TextInput x="10" y="10" id="typeHere"/>

   <s:VGroup y="40" horizontalAlign="center" width="100%">

     <s:Label width="100%" text="{typeHere.text}"/>

   </s:VGroup>

</s:Panel>

 

This gives you an input field where you can type and a label that says centered while displaying what you type.

Developer
Posts: 350
Registered: ‎01-21-2011
My Device: Curve 8900 (Personal) / Bold 9650 (Work)
My Carrier: Regional

Re: Label alignment in Container

I use this property on my labels, so that if the text is long it auto adjust, it also adjusts to the right and down, leaving the top left corner "pinned".

 

 

import flash.text.TextFieldAutoSize;

 

fishyLBL.autoSize = TextFieldAutoSize.LEFT;

 

 

Developer
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10
My Carrier: Verizon

Re: Label alignment in Container

In the VGroup, add horizontalCenter = 0;

Developer
Posts: 93
Registered: ‎02-05-2011
My Device: Not Specified

Re: Label alignment in Container

OK, hold on a few monutes, I'll post sample code and screens to be more clear.

Developer
Posts: 93
Registered: ‎02-05-2011
My Device: Not Specified

Re: Label alignment in Container

[ Edited ]

Code sample 1:

 

	// container
	textContainer = new Container();
	textContainer.margins = Vector.<Number>([10,10,10,10]);
	textContainer.debugColor = 0xFF00FF;
	textContainer.size = 50;
	textContainer.sizeUnit = SizeUnit.PERCENT;
	textContainer.flow = ContainerFlow.VERTICAL;
	textContainer.align = ContainerAlign.MID;
	// large text 
	textFormat = new TextFormat();
	textFormat.size = 300;
	textFormat.color = 0xBBBBBB;
	textFormat.align = TextFormatAlign.CENTER;
	textFormat.font = "HandFont";
	// text
	someText = new Label();
	someText.containment = Containment.DOCK_TOP;
	someText.embedFonts = true;
	someText.format = textFormat;
	someText.text = "text"; //" + String.fromCharCode(0215) + "
	someText.autoSize = TextFieldAutoSize.CENTER;
	someText.opaqueBackground = 0x005500;
	someText.textField.scaleX = 1.5;
	someText.textField.scaleY = 1.5;

 

Result 1:

2011-03-07_201256.png

 

The same result with

 

	someText.containment = Containment.CONTAINED;

 

 

 

Developer
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: Label alignment in Container

hey deevych,

 

try giving your label a size of some sort. containers need that kind of data in order to know where to place its children properly. you can acheive this either through the setSize method of the label or use the .size property to make it more dynamic. 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
Developer
Posts: 93
Registered: ‎02-05-2011
My Device: Not Specified

Re: Label alignment in Container

hey JRab,

 

In my case the .autoSize does the sizing:

 

someText.autoSize = TextFieldAutoSize.CENTER;

 

When I added the size=100%:

 

 

someText.containment = Containment.CONTAINED;
//someText.autoSize = TextFieldAutoSize.CENTER;
someText.size = 100;
someText.sizeMode = SizeUnit.PERCENT;
someText.setPosition(0, 0);

 

 

I got this:

2011-03-07_204304.png

 

Developer
Posts: 93
Registered: ‎02-05-2011
My Device: Not Specified

Re: Label alignment in Container

hey, got one idea...

 

I have all this stuff in the initializeUI, so the creation/placement is done BEFORE the container added to the stage.

 

Is this a reason?

Developer
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: Label alignment in Container

do this instead and see how it turns out:

 

 

	someText = new Label();
someText.containment = Containment.DOCK_TOP;
someText.embedFonts = true;
someText.format = textFormat;
someText.text = "text"; //" + String.fromCharCode(0215) + "
someText.autoSize = TextFieldAutoSize.CENTER;
someText.size = 100;
someText.sizeUnit = SizeUnit.PERCENT;
someText.sizeMode = SizeMode.BOTH;
someText.opaqueBackground = 0x005500;
someText.textField.scaleX = 1.5;
someText.textField.scaleY = 1.5;

 

 

 

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