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/

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