closable and draggable tab component for Flex 2

demo video

two weeks ago someone in flexcoder list asked this :

is it possible to build an eclipse-style tab with close button on the right ?

this interested me and thought it should be very useful in the future, so I took some spare cycles (actually a lot more than I originally thought it should , but it’s another story) to dig into this problem and eventually came to what to present today

*features

-100% based on flex 2 mx:TabBar and mx:TabNavigator component, just added in needed APIs, so usage is pretty much the same as those two.(READ: no learning curve for newbie)

-show/hide close button

-close tab when close button clicked (broadcasting closeButton event so user can handle it before the tab are dismiss)

-can assign custom button or button skin to show as the close button (currently it’s using the one from Firefox’s tab

-drag and drop the tab to re-order the tabs

-drag and drop can be disabled

-all the closing and drag/drop operation can be handled by the component itself so user don’t have to worry about manually handling any event. (good for quick prototyping or rapid application development)

-there’s also a TabNavigator version (since TabNavigator is basically TabBar plus ViewStack, it’s just a replacement routine)

*more details

surprisingly this is probably the hardest component I had been working on (even harder than GridTree), at start I thought it should be easy to attach an icon to the button then catch every event from it, but turned out that flex 2 button ain’t working in the way I thought, it’s dynamically generating every visual assets (skins, borders, icons) for each state of the button, so it’s not easy to just attach one icon there and catch events from it.

in the end, I had to take the long (and winding ?) way extending and overriding lot of things to put the custom icon there and handle events from it, once I have the icon in place, the rest is pretty easy, just have to carefully catch, augment and re-dispatch some event and deal with DragManager to re-order the tabs.

this is a very interesting devloping experience, learned a ton about Button and DragManager, has to say flex 2 framework and AS3 really rocks ! (did I say that agian ? )

if you thought there should be other components like this being built, just let me know, I’m taking open request now.

I will see if it’s interesting enough for me to take some spare cycles to work on it.

cheers.