flex 和 flexlib类库 实现 菜单和 TabNavigator

看到 extjs 的 TabNavigator和漂亮. 很实用.

 

对于一个后台管理程序来说 可以同时操作多个 任务.

 

如果用 flex 做一个后台管理程序 是否可以实现同样的功能呢.

 

答案是是的.并且已经 测试成功. 功能一样. 代码更简单.

 

其实并不复杂 .

 

上网络上面搜索下了..找到了一篇关于 flexlib的 文章可以实现 带关闭 按钮 的 TabNavigator

 

http://code.google.com/p/flexlib/

 

如果要找看更详细的参数.看官方文档还是最好的.比搜索要全面.

 

菜单借用 了 flex explore 的代码.

 

下载 swc 文件放到工程 的 libs 下面,添加到 path 里面.

 

添加xmlns

 

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:flexlib="http://code.google.com/p/flexlib/"
	xmlns:explorer="*"

 

进行代码编写.

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:flexlib="http://code.google.com/p/flexlib/"
	xmlns:explorer="*" 
    width="100%" height="100%" pageTitle="我的系统测试." 
    initialize="sdk.send();" fontSize="12">

    <mx:Script>
        <![CDATA[
        	import mx.controls.SWFLoader;
        	import mx.containers.VBox;
        	import mx.controls.Label;
	        import flexlib.controls.SuperTabBar;
			import flexlib.events.TabReorderEvent;
			import flexlib.controls.tabBarClasses.SuperTab;
			
			[Embed(source="./assets/document.png")]
			private var document_icon:Class;//tab左面的图标.
			
	        private function treeChanged(event:Event):void
	        {//响应树点击的双击事件.
	            var nodeApp:String = compLibTree.selectedItem.@app;
	            var nodeLabel:String = compLibTree.selectedItem.@label;
	            //app是xml里面的定义的一个属性.
	            if (nodeApp != null && nodeApp != "")
	            {//如果有app这个属性.说明这个是一个叶子节点.开始加载那个flex文件.
	                addTab(nodeLabel, contentId, nodeApp);
	                //打开选项卡.带关闭按钮的选项卡.
	            }else{//如果里面没有app这个字段.说明这个是个文件夹.
	                compLibTree.expandItem(compLibTree.selectedItem, true, true);
	                //展开文件夹显示下面的内容.
	            }
	        }
	        
	        private function addTab(myLabel:String, navigator:SuperTabNavigator,nodeApp:String):void {
	        		var swfLoader:SWFLoader = new SWFLoader();
	        		//动态加载flex类.在这里进行定义.每一个table新建立一个实例.
					var curNum:Number = contentId.numChildren + 1;
					var child:VBox = new VBox();
					child.setStyle("closable", true);
					//设置选项卡可以关闭.
					child.label = myLabel;
					//设置选项卡的名称.
					child.icon = document_icon;
					//设置选项卡的左面的文档图标.
					swfLoader.source = nodeApp + ".swf";
					//开始动态加载swf文件.
					child.addChild(swfLoader);
					navigator.addChild(child);
					//将加载后的swf类放到child里面,再放到navigator里面.
					contentId.selectedIndex = contentId.numChildren - 1;
			}
	
	        private function sdkLoaded():void
	        {
	            explorerTree = XML(sdk.lastResult.node);
	            compLibTree.dataProvider = explorerTree;
	        }
        ]]>
    </mx:Script>


    <mx:HTTPService id="sdk" url="explorer.xml" resultFormat="e4x" result="sdkLoaded();"/>
    <mx:XML id="explorerTree"/>

    <mx:HDividedBox width="100%" height="100%">
        <mx:Panel width="30%" height="100%" title="测试菜单">
            <mx:Tree id="compLibTree" width="100%" height="100%" showRoot="false" labelField="@label"
            change="treeChanged(event);"/>
        </mx:Panel>
        
		<flexlib:SuperTabNavigator id="contentId" scrollSpeed="25" dropShadowEnabled="false"
			width="100%" height="100%" horizontalGap="0"
			closePolicy="{SuperTab.CLOSE_ALWAYS}" dragEnabled="false" dropEnabled="false"
			tabWidth="160"
		/>
		
    </mx:HDividedBox>
</mx:Application>

 

 

<flexlib:SuperTabNavigator id="contentId" scrollSpeed="25" dropShadowEnabled="false"
			width="100%" height="100%" horizontalGap="0"
			closePolicy="{SuperTab.CLOSE_ALWAYS}" dragEnabled="false" dropEnabled="false"
			tabWidth="160"
		/>

 这个就是这个 带关闭按钮的组件.

 

closePolicy="{SuperTab.CLOSE_ALWAYS}"

总是显示关闭按钮.

 

dragEnabled="false" dropEnabled="false"
禁用拖拽.用处好像不大去掉了.

 

 

现在还有一点小问题.

 

1.打开的swf 对象.不可以全部充满  TabNavigator参数怎么配置不太好找.

2.总是新打开一个..没有对已经打开的  TabNavigator  进行切换.

   这似乎.弄一个 map的进行匹配判断下就可以了.

 

很是高兴呢..做出的东西竟可以如此简单.

唯一不好的地方是 文件太大了..在网络条件不好的情况访问会有很大问题.

啥还没有写呢 文件就已经变成 1.5MB了.

 

 

• flex_src.zip (15.1 KB)
• 下载次数: 242

• 
• 大小: 12.1 KB

• 查看图片附件