Flex 4 开发后台管理系统（2）

书接上回：?http://www.voidcn.com/article/p-rygjcbag-ber.html

1，首先安装flash builder

http://www.voidcn.com/article/p-wcugohfo-ber.html

然后安装debug ?http://www.adobe.com/go/flashplayer_debugger

在最下面有针对IE的debug安装。并且把设置默认的浏览器是IE。

2，功能实现

使用Tree 组件和SuperTabNavigator 组件：

<s:Application  xmlns:flexlib="http://code.google.com/p/flexlib/" 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" creationComplete="initTabs()">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<fx:XMLList id="treeData">  
			<node label="管理后台">  
				<node label="产品管理">  
					<node label="产品分类管理"/>  
					<node label="产品管理"/>  
				</node>  
				<node label="地区管理">  
					<node label="省管理"/>  
					<node label="市管理"/>
					<node label="县管理"/>
				</node>  
			</node>     
		</fx:XMLList>  
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			[Bindable] 
			public var selectedNode:XML; 
			import flexlib.controls.SuperTabBar;
			import flexlib.events.TabReorderEvent;
			import mx.controls.Label;
			import mx.containers.VBox;
			import mx.containers.Canvas;
			import flexlib.controls.tabBarClasses.SuperTab;
			
			import mx.containers.Panel;
			
			[Embed(source="../assets/document.png")]
			private var document_icon:Class;
			
			[Embed(source="../assets/home.png")]
			private var home_icon:Class;
			
			[Embed(source="../assets/closeButton.png")]
			private var close_icon:Class;
			
			
			private function initTabs():void
			{
				addTab("Home",nav,"This tab can't be closed",home_icon);
				
				for (var i:int = 0; i < 3; i++)
				{
					addTab("Tab " + (i + 1),nav);
				}
				
				callLater(initNonClosableTab);
			}
			
			private function initNonClosableTab():void
			{
				nav.setClosePolicyForTab(0,SuperTab.CLOSE_NEVER);
			}
			
			private function addTab(lbl:String,navigator:SuperTabNavigator,contentString:String=null,icon:Class=
																										null):void
			{
				if (lbl == "")
					lbl = "(Untitled)";
				
				var curNum:Number = nav.numChildren + 1;
				
				var child:VBox = new VBox();
				
				child.setStyle("closable",true);
				
				child.label = lbl;
				
				if (icon)
				{
					child.icon = icon;
				}
				else
				{
					child.icon = document_icon;
				}
				var label:Label = new Label();
				label.text = contentString == null ? "Content for: " + lbl : contentString;
				
				child.addChild(label);
				
				navigator.addChild(child);
			}
			
			/* The following two functions are a bit of a hack to try to get the
			* tab navigator to refresh the display and resize all the tabs. When
			* you change stuff like tabWidth (which is a style) then the tab
			* navigator has a hard time re-laying out the tabs. Adding and
			* removing a child can sometimes trigger it to re-layout the tabs.
			* I don't know,but just don't change tabWdith or horizontalGap or whatever
			* else at runtime,OK? Pick some values and stick with them.
			*/
			private function invalidateLater():void
			{
				var child:Canvas = new Canvas();
				nav.addChild(child);
				nav.removeChild(child);
				callLater(invalidateNav);
				callLater(invalidateNav);
			}
			
			private function invalidateNav():void
			{
				nav.invalidateDisplayList();
			}
			
			private function tabsReordered(event:TabReorderEvent):void
			{
				var tabBar:SuperTabBar = event.currentTarget as SuperTabBar;
				tabBar.setChildIndex(tabBar.getChildAt(event.oldIndex),event.newIndex);
			}
			
			// Event handler for the Tree control change event. 
			public function treeChanged(event:Event):void { 
				selectedNode=Tree(event.target).selectedItem as XML; 
			}
		]]>
	</fx:Script>
	<mx:Panel width="100%" height="100%" paddingBottom="5" paddingLeft="5" paddingRight="5"
			  paddingTop="10" title="产品管理后台">  
		<mx:HDividedBox width="100%" height="100%">  
			<mx:Tree id="myTree" width="15%" height="100%" change="treeChanged(event)"
					 dataProvider="{treeData}" labelField="@label" showRoot="false"/>  
			<!--<mx:TextArea width="85%" height="100%" text="Selected Item: {selectedNode.@label}"/>-->
			<flexlib:SuperTabNavigator id="nav" width="85%" height="100%"
									   closePolicy="{SuperTab.CLOSE_ROLLOVER}" horizontalGap="0"
									   scrollSpeed="25" startScrollingEvent="{MouseEvent.MOUSE_DOWN}"
									   stopScrollingEvent="{MouseEvent.MOUSE_UP}"/>
		</mx:HDividedBox>  
	</mx:Panel>  
</s:Application>