November 20, 2006 

TabNavigator Update: Draggable Tabs

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

  • http://evilchimps.com Jake

    This helped me a ton!!! I was trying to figure out a way to provide a close button on each LinkButton in a LinkBar, and I only had to make a couple small changes from your code.

    This code made my day.

  • Pingback: dougmccune.com » Blog Archive » The Quest for the Perfect TabNavigator

  • Pingback: dougmccune.com » Blog Archive » Quest for the Perfect TabNavigator - Part 3 (with source)

  • Ravi Prakash

    hi, iam newbe to flex,

    the Custome tabNavigator is really good, an i have add another feature to it “Showing Tabs on Mouse Over”. Here is my code

    ==== ViewBar.as=========
    private function MouseOver(event:MouseEvent):void
    {
    var index:int = getChildIndex(DisplayObject(event.currentTarget));
    super.selectedIndex = index;
    }
    and

    ifdo.addEventListener(MouseEvent.MOUSE_OVER, MouseOver); in createNavItem Block
    =========================================
    and still i have a problem to make this option Dynamic
    (ie: i like to pass bool value in mxml page where the component is called, if i say true the mouse over should work else it should not )
    i can able pass the value only to ViewNavigator.as page by creating a public variable and not to ViewBar.as page,

    is there any other idea to control the MouseOver Event? reply requsted

    thanks in adv.
    ravi prakash

  • Pingback: code zen » Blog Archive » 100 Posts! A retrospective and the best links from my blog.

  • scuty

    Ravi Prakash have the answer for me.

    Thanks.

  • FlexyK

    Hi Arpit,

    This is a genius work and it is useful in my project.

    However, I am trying to achieve a little bit different from what you have shown in your example. I am trying to drag a tab outside the application window for it to become a new window/container.

    Therefore like in your case, if a Tab is Dragged and Dropped outside the Panel container, then it should be opened as a new Panel with the content of that tab – just like how Mozzila firefox tabs work. Is this possible? Can you please help me with some suggestions.

    Thanks.

  • Abhishekchess1

    how can i use scroll button to scroll tabs if tabs r more than ViewNavigator width  
    ?