動態新增元件

其實所謂的動態新增元件，就是使用as程式碼去新增，而不是使用標籤去事先定義好。

我定義了一個TabNavigator，初始化時候，沒有往裡面新增任何的元件。

之後，通過按鈕，去新增，刪除，禁用，元件。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   minWidth="955" minHeight="600">
	<fx:Script>
		<![CDATA[
			import mx.containers.Canvas;
			import mx.controls.Label;
			import mx.core.UIComponent;
			import mx.events.FlexEvent;
			
			protected function add_clickHandler(event:MouseEvent):void
			{
				var canvas:Canvas = new Canvas();
				canvas.label = "tab"+tabNavigator.numChildren;
				var label:Label = new Label();
				label.text = "this is a label in Canvas!";
				
				canvas.addChild(label); // label add to canvas
				tabNavigator.addChild(canvas); // canvas add to tabNavigator
			}
			
			protected function remove_clickHandler(event:MouseEvent):void
			{
				if(tabNavigator.numChildren>0){
					tabNavigator.removeChildAt(0); // remove first
				}
				
			}
			
			protected function disable_clickHandler(event:MouseEvent):void
			{
				if(tabNavigator.numChildren>0){
					(tabNavigator.getChildAt(tabNavigator.numChildren-1) as UIComponent).enabled = false;
				}
				
			}
			
		]]>
	</fx:Script>
	<s:VGroup>
		<s:HGroup>
			<s:Button id="add" label="add" click="add_clickHandler(event)"></s:Button>
			<s:Button id="remove" label="remove" click="remove_clickHandler(event)"></s:Button>
			<s:Button id="disable" label="disable" click="disable_clickHandler(event)"></s:Button>
		</s:HGroup>
		
		<mx:TabNavigator id="tabNavigator" width="100%" height="300">
		</mx:TabNavigator>
	</s:VGroup>
</s:Application>
 

絮叨絮叨：

• 通過as動態新增或刪除子組建，我個人感覺還是為了效能和頁面邏輯要求考慮。
• 為了提高啟動效率，不希望頁面在初始化的時候，創建出太多的子組建之類的。
• canvas.label 會作為tab的標題欄顯示
  
• tabNavigator.numChildren可以獲得tabNavigator的子元件的個數，但是僅僅是tabNavigator的下一級！