XML Dynamic Buttons and Text

programming flash
1

i am creating an application in flash as3 that
-load an xml file

  • parse the xml file
    -create the UI base on the xml file

here is the XML file

<data>
<button id=“1” label=“apple” content=“This is an apple”/>
<button id=“2” label=“banana” content=“This is a banana”/>
<button id=“3” label=“orange” content=“This is an orange”/>
<button id=“4” label=“mango” content=“This is a mango”/>
</data>

the buttons should have the label base on the label property in the xml,
now if the user clicks on the button ,the content should be displayed on a textfield on stage…

there is only one text field, and if i click the button, the textfield will show the content of the button for example i click the button [mango] the textfield will show the content of the mango base from the data in the xml “this is a mango” and so on…

i was able to make the buttons with their respective label base from xml, my problem is that, when i click the buttons, only one content is shown in the textfield which is “This is a mango”, what should i do? please help me…

this is my code:

my document Class: (xmlRead.as)

package
{
import flash.display.Loader;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;

 [SWF(width = '600', height = '400', frameRate = '25', backgroundColor= '#000000')]
	 
public class xmlRead extends Sprite
{
	public var xmlLoarder:URLLoader;
	public var dataXml:XML;
	public var btnn:Button;
	public var xmlData:XML;

	
	public function xmlRead ():void
	{			

		xmlLoarder  = new URLLoader();
		xmlLoarder.load(new URLRequest("data.xml"));
		xmlLoarder.addEventListener(Event.COMPLETE , xmlComplete);
	
	
	
	function xmlComplete(e:Event):void
	{			
		dataXml = new XML(xmlLoarder.data);

		var i:int = 0;
		for each (var button:XML in dataXml.button)
		{
			var tf:TextFormat  = new TextFormat();
			tf.font = "Verdana";
			tf.size = "16";
			tf.color = 0x000000;
		
			var txt:TextField  = new TextField
			txt.text = button.@label;
			txt.setTextFormat (tf);
			txt.autoSize = TextFieldAutoSize.LEFT;
			
			btnn = new Button();	
			btnn.addChild(txt)
			addChild(btnn);
			btnn.y = i * 50 + 25;
			btnn.x = 50;
			i++;
			btnn.addEventListener(MouseEvent.CLICK , onClick);
		}	
		
		function onClick(e:Event):void
		{				
			var tf:TextFormat  = new TextFormat();
			tf.font = "Verdana";
			tf.size = "16";
			tf.color = 0xFFFFFF;
			tf.align = "left";
		
			var contentText:TextField  = new TextField();
			contentText = new TextField ;
			contentText.text = button.@content;
			contentText.x = 200;
			contentText.y = 100;
			contentText.width = 500;
			contentText.setTextFormat(tf);
			addChild(contentText);
		}	
	}
	}	
}

}

my Button Class: (Button.as)

package
{

import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;

public class Button extends Sprite
{
	public function Button():void
	{				
			
			this.graphics.beginFill(0xCCCCCC);
			this.graphics.lineStyle(1, 0xFFFFFF);
			this.graphics.drawRect(0, 0, 70, 30);
			this.graphics.endFill();	

			this.buttonMode = true;
			this.mouseChildren = false;

			addEventListener (MouseEvent.MOUSE_OUT, onOut);
			addEventListener (MouseEvent.MOUSE_OVER, onOver);
			addEventListener (MouseEvent.MOUSE_DOWN, onDown);
			addEventListener (MouseEvent.MOUSE_UP , onUp);

			function onOut(e:Event)
			{
				graphics.beginFill(0xCCCCCC);
				graphics.lineStyle(1, 0xFFFFFF);
				graphics.drawRect(0, 0, 70, 30);
				graphics.endFill();
			}
			
			function onOver(e:Event):void
			{
				graphics.beginFill(0xDDDDDD);
				graphics.lineStyle(1, 0x000000);
				graphics.drawRect(0, 0, 70, 30);
				graphics.endFill();
			}
			
			function onDown(e:Event):void
			{
				graphics.beginFill(0x999999);
				graphics.lineStyle(1, 0x000000);
				graphics.drawRect(0, 0, 70, 30);
				graphics.endFill();
			}
			
			function onUp(e:Event):void
			{
				graphics.beginFill(0xCCCCCC);
				graphics.lineStyle(1, 0x000000);
				graphics.drawRect(0, 0, 70, 30);
				graphics.endFill();
				
			}
	}
}

}