The skinning capabilities of Flex 2 components has been criticized quite a bit. There are a few articles on devnet that discuss this a bit but I have to say that skinning components really does require some effort.

The problem is that Flex tries to be the framework for everything and of course everyone’s requirement is just slightly different. Flash was always a language for personal expression and a lot of people have the same expectations for Flex (Hardly anyone asks the Java Swing developers for scrollbars that look drastically different from the basic look and feel). To do Flex justice, compare the pain of skinning Flex components to creating a new look-and-feel for the Swing widget set.

Enough philosophy though, here is my first attempt to actually skin the Slider component (Right-click to view source). Couple of points that struck me were:
1) Make sure your components report the correct dimensions to the measurement architecture. I am still fuzzy on that part but the component wasnt working correctly until I added the measure() implementation on the SliderButton class.
2) The slider scrub positions the scrub button at an x of width/2. The width/2 point is also used as the point to set the value the slider reports.
3) This is definitely wrong and I hope the Flex team fixes this: The Slider class puts the highlight track at 1 pixel below the progress track. This definitely needs to be configurable without extending the Slider base class itself.

As always, comments are always welcome.

Of course I had to do this but this was much easier. Now you can drag the tabs to reorder them. Works pretty well. The one thing that seems lacking is instant notification where the new tab is going (on MouseMove), like FireFox brings up a purple arrow at the point where the tab is going. I dont know if I have the time for that, especially since it doesn’t seem like I will be using this container for my project, but the implementation should be simple.

Check the swf out here, and right click to view source.

If you are using this in a commercial app or something make sure you catch history management errors since removing tabs screws up history before that event (there isnt a tab-add undo when you click back ), and brings up the error stack trace if you are running the debug player.

Hope this helps someone .

[Update] Responding to a query from someone, this code is released under the MIT license. You can download/fork the code from the GitHub Repository

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.

This is the most annoying point I have reached with AS3 yet. AS3 does not have an onReleaseOutside event, something I really needed for a menu to hide if the user clicked away from it. One implementation that I did find here involves a deeper understanding of the event bubbling mechanism. My own implementation is simpler and I just listen to a global application mouse click and see if my menu is down or not. However i do imagine lack of this event would make many developers go nuts. What sucks even more is that event isnt even available on the Flex framework. Maybe something we can ask for in 2.1 ?