Flex之旅：第二部分：容器与布局(3)---高级的TabNavigator（SuperTabNavigator）

SuperTabNavigator

SuperTabNavigator来自flexlib(https://github.com/flex-users/flexlib)

可以下载下来，配置一下，运行看看flexlib自带的例子。但是个人感觉，功能是有的，但是肯定有bug，但是页面效果还是不太美观。

而且感觉flexlib三年都人没有维护了，在sdk4.5上编译后的效果不好看~~~~tabbar的位置都不好。

看看代码吧：

<?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"   xmlns:flexlib="http://code.google.com/p/flexlib/"   minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)"><fx:Script><![CDATA[import flexlib.controls.tabBarClasses.SuperTab;import mx.events.FlexEvent;protected function application1_creationCompleteHandler(event:FlexEvent):void{callLater( initNonClosableTab );}private function initNonClosableTab():void{nav.setClosePolicyForTab( 0, SuperTab.CLOSE_NEVER );}]]></fx:Script><fx:Declarations><!-- Place non-visual elements (e.g., services, value objects) here --></fx:Declarations><s:VGroup width="100%" height="100%" horizontalAlign="center"><s:HGroup width="100%" height="100%"><flexlib:SuperTabNavigator id="nav"   scrollSpeed="25"   stopScrollingEvent="{MouseEvent.MOUSE_UP}"   startScrollingEvent="{MouseEvent.MOUSE_DOWN}"   width="200"   height="400"   horizontalGap="0"    closePolicy="{SuperTab.CLOSE_ROLLOVER}" dragEnabled="false"  ><mx:Box id="b1" width="600" height="600" label="1" backgroundColor="#F20808"></mx:Box><mx:Box id="b2" width="200" height="200" label="2" backgroundColor="#08EEE6"></mx:Box><mx:Box id="b3" width="400" height="400" label="3" backgroundColor="#E6FA05"></mx:Box><mx:Box label="4" id="b4"></mx:Box><mx:Box label="5" id="b5"></mx:Box><mx:Box label="6" id="b6"></mx:Box><mx:Box label="7" id="b7"></mx:Box><mx:Box label="8" id="b8"></mx:Box><mx:Box label="9" id="b9"></mx:Box></flexlib:SuperTabNavigator><mx:TabNavigator paddingTop="50"><mx:Box label="1" id="b11"></mx:Box><mx:Box label="2" id="b12"></mx:Box><mx:Box label="3" id="b13"></mx:Box><mx:Box label="4" id="b14"></mx:Box><mx:Box label="5" id="b15"></mx:Box><mx:Box label="6" id="b16"></mx:Box><mx:Box label="7" id="b17"></mx:Box><mx:Box label="8" id="b18"></mx:Box><mx:Box label="9" id="b19"></mx:Box></mx:TabNavigator></s:HGroup></s:VGroup></s:Application>

几点说明：

• 例子里面，我创建了SuperTabNavigator和TabNavigator
• SuperTabNavigator默认是支持拖拽（drag & drop）的去排列各个tab的位置（index），在这里我给禁用了
  
• SuperTabNavigator上面还是有bug的，所以我就不太相信flexlib里面的组件了。。。。。。。。。。。。。
• xmlns:flexlib="http://code.google.com/p/flexlib/"   去定义flexlib的命名空间
  
• 通过nav.setClosePolicyForTab( 0, SuperTab.CLOSE_NEVER );  设置第一个tab页是不可以关闭的。
• 我觉得这里面最重要的就是callLater()，它可以：
  1. 提高页面初始化性能
  2. 确保某个方法要引用的属性存在
  3. adobe对其的解释：http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7b06.html
• SuperTabNavigator和TabNavigator 在绘制好之后，tabbar区域和内容区域之间默认的会有间隙的！！！那么可以通过设置paddingTop="50"来调整
  

运行截图：（有点丑)

好吧，感觉flexlib还是不太靠铺，虽然多一些功能性组件，但是觉得会有bug。

如果想用第三方的flex高能组件库，还是看看这个商业收费版吧：http://www.ardisialabs.com/demo/

但是不提供下载，本人无法使用。。。。。。。。也就只能看看了。。。。。。。。。。。。。。