Flex之旅：第二部分：容器与布局(2)---动态添加组件（TabNavigator）

动态添加组件

其实所谓的动态添加组件，就是使用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的下一级！