Flex Super Tab Navigator

So I have this dashboard project I'm working on. What I am trying to do is have a TabNavigator that is about half the screen, but give it a maximize button, so that if clicked it fills the whole screen. Sounds easy enough, I've done it with a Panel, but unfortunately it seemed a little too tricky for me and my high design : moderate coding skills. So to Google I went.

You know what annoys me? People who blog about this kind of thing, show the awesome component they created, and don't share even a bit of code. That's what I found. Ugh. I did however discover that flexLib has something called a SuperTabNavigator. The SuperTabNavigator has a close button on each tab, so I figured, maybe I can extend this, better than starting from scratch. It wasn't even as difficult as extending it. It is actually pretty easy to customize. Yay for flexLib.

Here are some actual CODE EXAMPLES of what I did.

First you need the flexLib library. http://code.google.com/p/flexlib/downloads/list, add it by referencing the swc file in your project's library path, like you would Cairngorm.

First here's the SuperTabNavigator, which I placed inside a Canvas.

...
   <code:SuperTabNavigator id="mySuperTabNav"
      width="100%" height="50%"
      y={this.height/2}
      popUpButtonPolicy="off"
      closePolicy="close_always"
      tabClose="maxClick(event)">
      <mx:VBox label="testing"/>
   </code:SuperTabNavigator>
...

Here is the code for the maxClick method.

...
   private function maxClick(event:SuperTabEvent):void
   {
      //This stops the default close action from happening
      event.preventDefault();
      //Make sure the tab that was clicked is the one that is selected
      event.currentTarget.selectedIndex = event.tabIndex;
      
      //Put your max/restore tab code here! 
      /*example: mySuperTabNav.y = 0;
        mySuperTabNav.percentHeight = 100;*/
   }
...

Now... it wouldn't be very user friendly if clicking a close button maximizes the tab navigator, now would it? So through CSS we need to change the icon/button on the tab. Now this is kind of odd, I found this here: http://groups.google.com/group/flexlib/browse_thread/thread/d94196bc6510c49c

.
...
   SuperTabNavigator
   {
      tab-style-name: customTabMax;
   }
   .customTabMax
   {
      tab-close-button-style-name: maxIconButton;
   }
   .maxIconButton
   {
      upSkin:Embed(source="this/is/image/path.png");
      overSkin:Embed(source="this/is/image/path.png");
      downSkin:Embed(source="this/is/image/path.png");
      disabled-skin:Embed(source="this/is/image/path.png");
   }
...

Here's a link to the documentation:
http://flexlib.googlecode.com/svn/trunk/docs/flexlib/containers/SuperTabNavigator.html

See my Sample (right click to view source)