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
Developer
Posts: 587
Registered: ‎04-01-2009
My Device: Z10, PlayBook
My Carrier: NA
Accepted Solution

BB10 AIR: The textWidth and textHeight properties of the Label class are returning NaN

Example code:

 

 

package 
{
    import flash.display.Sprite;
    import qnx.fuse.ui.dialog.AlertDialog;
    import qnx.fuse.ui.text.Label;
    
    [SWF(width="768", height="1280", backgroundColor="#FFFFFF", frameRate="60")]
    public class Example extends Sprite
    {    
        public function Example()
        {
            try
            {
                init();
            }
            catch(error:Error)
            {
                dialog("Error on Initialization", error.message);
            }
        }
        
        private function init():void
        {
            var label1:Label = new Label();
            label1.text = "Help";
            label1.width = label1.textWidth;
            label1.height = label1.textHeight;
            label1.x = stage.stageWidth / 2 - label1.width / 2;
            label1.y = stage.stageHeight / 2 - label1.height / 2;
            addChild(label1);
            
            debug("textWidth: " + label1.textWidth);
        }
        
        private function debug(msg:String):void
        {
            dialog("Debug", msg);
        }
        
        private function dialog(title:String, msg:String):void
        {
            var alert:AlertDialog = new AlertDialog();
            alert.title = title;
            alert.message = msg;
            alert.addButton("Ok");
            alert.show();
        }
    }
}

Related documentation:

 

https://developer.blackberry.com/air/beta/apis/qnx/fuse/ui/text/TextBase.html#textHeight

 

Am I doing something wrong?

Highlighted
Retired
Posts: 427
Registered: ‎02-22-2012
My Device: BlackBerry Z10, BlackBerry Dev Alpha C, BlackBerry PlayBook
My Carrier: Bell

Re: BB10 AIR: The textWidth and textHeight properties of the Label class are returning NaN

Hi,

 

I recently ran into this myself. Here is a sample I made that will hopefully help you out.

 

package
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	
	import qnx.fuse.ui.buttons.LabelButton;
	import qnx.fuse.ui.core.Container;
	import qnx.fuse.ui.events.TextEvent;
	import qnx.fuse.ui.text.Label;
	import qnx.fuse.ui.text.TextFormat;
	import qnx.fuse.ui.text.TextTruncationMode;
	
	public class LabelTest extends Sprite
	{
		private var _container:Container;
		private var _label:Label;
		private var _str:String = "The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Joaquin Phoenix was gazed by MTV for luck. A wizard’s job is to vex chumps quickly in fog. Watch Jeopardy! , Alex Trebek's fun TV quiz game";
		
		public function LabelTest()
		{
			super();
			
			stage.align 		= StageAlign.TOP_LEFT;
			stage.scaleMode 	= StageScaleMode.NO_SCALE;
			
			addEventListener(Event.ADDED_TO_STAGE, onAdded, false, 0, true);
		}
		
		private function onAdded(event:Event):void
		{
			initLabel();
		}
		
		private function initLabel():void 
		{
			trace("initLabel()");
			
			var myFormat:TextFormat = new qnx.fuse.ui.text.TextFormat();
			myFormat.bold = true;
			myFormat.size = 50;
			myFormat.font = "Slate Pro";
			
			_label = new Label();
			_label.maxLines = 0;
			_label.includeInLayout = false;
			_label.text = _str;
			_label.width = stage.stageWidth;
			
			// MUST DEFINE A HEIGHT, OTHERWISE LABEL IS ALWAYS A SINGLE LINE
			_label.height = stage.stageHeight; 
			
			trace("\ttextHeight: " + _label.textHeight);
			
			_label.addEventListener(Event.ADDED_TO_STAGE, labelAdded);
			_label.format = myFormat;
			addChild(_label);
		}
		
		private function labelAdded(event:Event):void 
		{
			trace("labelAdded()");
			trace("\ttextHeight: " + _label.textHeight);
			
			trace("validateNow()");
			_label.validateNow();
			
			trace("\ttextHeight: " + _label.textHeight);
			
			// modify label height = textHeight (so you can adjust UI accordingly)
			_label.height = _label.textHeight;
			
			initButton();
		}
		
		private function initButton():void 
		{
			var btn:LabelButton = new LabelButton();
			btn.label = "My Aligned Button";
			btn.y = _label.y + _label.height + 10;
			addChild(btn);
		}
	}
}

 

Regards,

Dustin

Follow me on Twitter: @dustinmalik
-----------------------------------------------------------------------------------------------------
Keep up to date on BlackBerry development: http://devblog.blackberry.com/
Developer
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10
My Carrier: Verizon

Re: BB10 AIR: The textWidth and textHeight properties of the Label class are returning NaN

Minor correction here. It is best to remove the event listener to the label once it has been received unless you want to update the size every time it gets added to the stage. But then (in this case), you might want to do a check if initButton() was already called once (or other update).

Something like
event.target.removeEventListener( Event.ADDED_TO_STAGE, labelAdded );
Regular Contributor
Posts: 76
Registered: ‎04-19-2011
My Device: Bold 9700
My Carrier: Three Mobile

Re: BB10 AIR: The textWidth and textHeight properties of the Label class are returning NaN

Thanks Dustin. Does this mean you don't consider this an issue (i.e. it will not get fixed in the next release?)

Developer
Posts: 587
Registered: ‎04-01-2009
My Device: Z10, PlayBook
My Carrier: NA

Re: BB10 AIR: The textWidth and textHeight properties of the Label class are returning NaN

Hi Dustin,

 

Thanks for the code sample.

 

Some explanation to accompany the code sample would be helpful though. I've spent 20 minutes trying to apply what you're doing to my code, with no idea of what parts of your code are the necessary/instructive parts. I couldn't get it to work and finally noticed the call to validateNow(), which now has it working for me.

 

After discovering that, I've been removing other parts of the example code and my app seems to work fine with *only* the call to validateNow(), so I'm baffled why the sample code you gave has a variety of other seemingly unrelated things... the event listeners, etc.

 

Here's my sample code:

 

 

package 
{
    import flash.display.Sprite;
    import qnx.fuse.ui.dialog.AlertDialog;
    import qnx.fuse.ui.text.Label;
    import flash.events.Event;
    import qnx.fuse.ui.text.TextFormat;
    
    [SWF(width="768", height="1280", backgroundColor="#FFFFFF", frameRate="60")]
    public class Example extends Sprite
    {
        private var label1:Label = new Label();
    
        public function Example()
        {
            try
            {                
                init();
            }
            catch(error:Error)
            {
                dialog("Error on Initialization", error.message);
            }
        }
        
        private function init():void
        {
            var myFormat:TextFormat = new qnx.fuse.ui.text.TextFormat();
            myFormat.bold = true;
            myFormat.size = 50;
            myFormat.color = 0xFFFFFF;
            myFormat.font = "Slate Pro";
        
            label1.text = "Help";
            label1.format = myFormat;
            addChild(label1);
            
            label1.validateNow();
            label1.height = label1.textHeight;
            label1.width = label1.textWidth;
            label1.x = stage.stageWidth / 2 - label1.width / 2;
            label1.y = stage.stageHeight / 2 - label1.height / 2;
            debug("textWidth: " + label1.textWidth);
        }
        
        private function debug(msg:String):void
        {
            dialog("Debug", msg);
        }
        
        private function dialog(title:String, msg:String):void
        {
            var alert:AlertDialog = new AlertDialog();
            alert.title = title;
            alert.message = msg;
            alert.addButton("Ok");
            alert.show();
        }
    }
}

Note that the only reason I had to add the TextFormat is that otherwise the text is showing as black on a black background. Not sure why the backgroundColor attribute isn't working for me. I'll post that as a separate question on the forum.

Regular Contributor
Posts: 76
Registered: ‎04-19-2011
My Device: Bold 9700
My Carrier: Three Mobile

Re: BB10 AIR: The textWidth and textHeight properties of the Label class are returning NaN

I also wondered on the purpose of that example - validateNow does the trick for me too.

 

Today I found that the textWidth property actually returns the visible text width, so you need to set the width of the label quite large to begin with prior to setting the width to the textWidth (otherwise it will return the length of the text up to the point it is truncated...)