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

书接上回： http://blog.csdn.net/freewebsys/article/details/11037337

1，首先安装flash builder

http://blog.csdn.net/freewebsys/article/details/9672575

然后安装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>