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.
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.