Okay so this took me more than a day but there is a certain level of satisfaction when things do work. The goal was to create a TabNavigator with a close icon so that tabs could be closed (pretty much like FireFox or Eclipse). First of all, check out the final version here. The source for the project is here
Whats already out there
Darron Schall has had a working codebase for a while but he hasnt released the source code yet since the project was for some client. The other implementation I saw online was by Keun Lee, but I wasnt too happy with that implementation since it was using x,y position calculation for the implementation and that completely breaks the logic encapsulation. Anyway, so I just gave up and decided to just implement it from scratch myself.
Implementation
The TabNavigator class basically extends the ViewStack and adds a tabBar as one of its rawChildren. The tabBar’s dataProvider is set to ‘this’, ie the TabNavigator’s ViewStack data.
The TabBar uses a ClassFactory to instantiate Tab instances when the user adds controllable content to it. The Tab itself is an instance of the mx.controls.tabBarClasses.Tab class and extend the Button class.
The first step was to create a Button instance that on rollover showed the close icon. That is the ViewTab class. The only important part here is that when the user rolls over the button, the Button creates the rollover skin and attaches itself on top of the basic (rollout) skin. So I just remove and add the close Icon just to keep it on top (uhm..Adobe, Can we please have our numbered depths back ? I would just love to attach the icon at 1000 at the createChildren() method and forget about it, assuming skins were added on lower depths). The other thing was to update the measure method so that the icon’s width is added implicitly to the measured values.
Now I needed the ViewBar, my extension to the TabBar class, to use instances of the ViewTab class. That was done my modifying the ClassFactory that generates the Tabs. The ViewBar also adds itself as a listener to the TAB_CLOSE event. On tab-close, the dataProvider is modified based on which tab is clicked. Finally my ViewNavigator just forces the TabNavigator to use the ViewBar instead of the TabBar.
Not bad for a day’s work :). As I update this component, I’ll keep updating the source as well.
Feedback is always welcome.
Code Zen 
just wondering how to do this 🙂
LikeLike
Good job!!!!
My question is how do I control the rollover to show on the tabs I want to close?
I may only want one of the five tabs to close.
Thanks
LikeLike
@Chaz,
Hmm, may need some work. The simplest hack would be to manage that in the ViewBar. When the ViewBar creates new ViewTab instances, you can check if the tab corresponding to that label needs a close icon. You would also extend ViewTab to have a flag that disables the close button. If the tab corresponding to the label doesnt need a close icon, set that flag. RollOverHandlers for the ViewTab should look at the flag and show the close button accordingly.
LikeLike
Thank you, that’s exactly what I was looking for.
LikeLike
Arpit,
Awesome stuff. Do you know if there is a way to selectively disable the “Tab Close” option for a given tab.
I have an app where the default first tab should never be closed but subsequent ones can be.
Thanks for your help
LikeLike
I need to put one indicator where the tab will drop. I added DragEvent to set the style of target tab using event shown below.
this.addEventListener(DragEvent.DRAG_OVER, onDragOver);
But its not working. Can you please let me know how can I apply indicator on target tab in this control
LikeLike
I have some doubt in TabBar.
I need to add icons dynamically in Tab bar using style sheet.
for example:
The TabBar contains 5 Tabs . first Tab has one icon image . other four tabs has different icons . how could i achive this?
LikeLike