Placing dynamic label boxes neatly after one-another

programming flash
1

Hi all,

I’d posted something similar yesterday but I think my code was a little convoluted so I’ve stripped out the uneccessary to try and get to the bottom of this.

I’m grabbing the content of an xml file and building a list of labels containing the xml content.

My problem is that I can’t place them neatly under one another - when they’re added I trace their height (all 22) yet when I place a resizeHandler event, this traces the actual height of the labels (which I need to alter their .y value). I can’t work out how to return the true height value back to the addTextRP function and alter accordingly.

Any help would be most appreciated.

 
[SIZE=1]package { [/SIZE]
 
[SIZE=1]import flash.display.Sprite;[/SIZE]
[SIZE=1]import flash.events.MouseEvent;[/SIZE]
[SIZE=1]  import flash.display.*;[/SIZE]
[SIZE=1] import flash.events.*;[/SIZE]
[SIZE=1] import flash.net.*;[/SIZE]
[SIZE=1] import flash.utils.*;[/SIZE]
[SIZE=1]import flash.text.TextField;[/SIZE]
[SIZE=1]import fl.controls.TextArea;[/SIZE]
[SIZE=1]import fl.controls.Label;[/SIZE]
[SIZE=1]import flash.text.TextFieldAutoSize;[/SIZE]
[SIZE=1]import fl.events.ComponentEvent;[/SIZE]
[SIZE=1]import fl.controls.TileList;[/SIZE]
[SIZE=1]import flash.text.TextFormat; [/SIZE]
 
 
[SIZE=1]public class MainStart2 extends Sprite{[/SIZE]
 
[SIZE=1]var _title_lbl:Label;[/SIZE]
[SIZE=1]var newHeight:Number = 50;[/SIZE]
[SIZE=1]var txtHeight1:Number=0;[/SIZE]
 
[SIZE=1]public function MainStart2():void {[/SIZE]
 
[SIZE=1]var xmlLoader:URLLoader = new URLLoader();[/SIZE]
[SIZE=1] xmlLoader.addEventListener(Event.COMPLETE, showXML);[/SIZE]
[SIZE=1] xmlLoader.load(new URLRequest("loadClient.xml"));[/SIZE]
[SIZE=1] function showXML(e:Event):void {[/SIZE]
[SIZE=1]  XML.ignoreWhitespace = true; [/SIZE]
[SIZE=1]  var songs:XML = new XML(e.target.data);[/SIZE]
[SIZE=1]  var i:Number;[/SIZE]
[SIZE=1]  for (i=0; i < songs.track.length(); i++) {[/SIZE]
 
[SIZE=1]   addTextRP(songs.track*.band.text(), i);[/SIZE]
 
[SIZE=1]  }[/SIZE]
[SIZE=1] }[/SIZE]
[SIZE=1]}[/SIZE]
 
 
[SIZE=1]public function addTextRP(thisText:String, i:Number):void {[/SIZE]
 
[SIZE=1] var lblFld:Label = new Label();[/SIZE]
[SIZE=1] lblFld.x=20;[/SIZE]
[SIZE=1] lblFld.width = 200;[/SIZE]
[SIZE=1] lblFld.wordWrap=true;[/SIZE]
[SIZE=1] lblFld.autoSize = TextFieldAutoSize.LEFT;[/SIZE]
[SIZE=1] lblFld.addEventListener(ComponentEvent.RESIZE, resizeHandler);[/SIZE]
[SIZE=1] lblFld.y=newHeight;[/SIZE]
[SIZE=1] lblFld.text=thisText;   [/SIZE]
[SIZE=1] addChild(lblFld);[/SIZE]
[SIZE=1] trace(lblFld.height); [COLOR=red]// this height value is incorrect - doesn't take account of the dynamic text - just the default label component[/COLOR][/SIZE]
[SIZE=1] lblFld.addEventListener(MouseEvent.MOUSE_OVER,highlightText);[/SIZE]
[SIZE=1] lblFld.addEventListener(MouseEvent.MOUSE_OUT,unhighlightText);[/SIZE]
[SIZE=1] }[/SIZE]
 
[SIZE=1]public function resizeHandler(event:ComponentEvent):Number {[/SIZE]
[SIZE=1] var lbl:Label = event.currentTarget as Label; [/SIZE]
[SIZE=1] trace("----------" +  lbl.height);  [COLOR=red]// this height value is correct[/COLOR][/SIZE]
[SIZE=1] return(lbl.height); [COLOR=red]// need to pass this back to the addTextRP?[/COLOR][/SIZE]
[SIZE=1]}[/SIZE]
 
 
[SIZE=1]private function highlightText(evt:MouseEvent):void {[/SIZE]
[SIZE=1]  evt.target.background=true;   [/SIZE]
[SIZE=1]  evt.target.backgroundColor=0xCCCCCC;[/SIZE]
 
[SIZE=1]}   [/SIZE]
 
[SIZE=1]private function unhighlightText(evt:MouseEvent):void {[/SIZE]
[SIZE=1]  evt.target.background=false;[/SIZE]
[SIZE=1]}  [/SIZE]
 
 
[SIZE=1]}[/SIZE]
 
[SIZE=1]}[/SIZE]
2

maybe because you are trying to autosize before you put the text into the label.

but for me, i like using TextFields over Labels, i get more control of the text.

function addTextRP(thisText:String, i:Number):void {

	var txtFld:TextField = new TextField();
	txtFld.selectable = false;
	//txtFld.wordWrap = true; // uncomment for multi line text 
	txtFld.text=thisText;
	txtFld.width = txtFld.textWidth + 10; // autosize to text, or set to your 200 with wordWarp
	txtFld.height = txtFld.textHeight + 10; // autosize to text
	txtFld.x= 20;
	txtFld.y= txtFld.height*i;
	addChild(txtFld);
	trace(txtFld.height);
	txtFld.addEventListener(MouseEvent.MOUSE_OVER,highlightText);
	txtFld.addEventListener(MouseEvent.MOUSE_OUT,unhighlightText);
}
3

Hi yaim - great stuff - thank you for that - it worked a treat!

I did add the a variable after the child was added (to increase the y placement) and it’s all good.

Thanks again!

[SIZE=“1”]

			var txtFld:TextField = new TextField();
			var format:TextFormat = new TextFormat();
			format.font = "Arial";
			format.size = 11;
			format.bold = false;
			txtFld.selectable = false;
			txtFld.wordWrap = true; // uncomment for multi line text 
			txtFld.text=thisText;
			txtFld.width = 180 //txtFld.textWidth + 10; // autosize to text, or set to your 200 with wordWarp
			txtFld.height = txtFld.textHeight + 0; // autosize to text
			txtFld.x= 0;//836;
			txtFld.y= newHeight + 0;
			txtFld.setTextFormat(format);
			
			scrollBox1.addChild(txtFld);
			txtFld.name="contenter";
			
			newHeight += txtFld.height;

[/SIZE]