Flex/Flash/Actionscript

The Quest for the Perfect TabNavigator

[UPDATE: See Part 2 for the current component]

There’s been some discussion on flexcoders about a better TabNavigator component. And a few people have done some good stuff expanding on the original TabNavigator in the Flex framework. I figured I’d play around and try to add a little to the current TabNavigator modifications that are floating around.

First, a few references. Here’s a TabNavigator with draggable tabs that was posted on a blog called code zen. I used this as my starting point (well, actually I started from scratch, then realized this was already out there). The customized TabNavigator component there is pretty good. So I grabbed that, cleaned up a bit of the re-ordering of tabs stuff, made a few other tweaks, and then added some functionality of my own.

The demo’s below. Basically this allows you to add and remove tabs, drag tabs, but the cool part about what I added is the scrolling of the tabs. If the tabs get too long they do sort of what Firefox does, which is put buttons with left and right arrows on the sides of the tabs and allow you to scroll through them. I also added a drop-down button to the right edge that lets you select any of the tabs from a list, again a la Firefox.

I know Jason from Flexible Experiments has said he’s about to release the same component with the source. So his might come out in the next few days and make mine irrelevant.

I’ll release the source of my stuff in a day or two, after I clean it up a bit. Like I said, I used the code off of the code zen blog as my base, and I’m not in any way trying to steal that and claim it as my own. I’ll pubish the source of all my additions, and hopefully everyone can work together to make a TabNavigator that finally meets everyone’s demands. I figure between what’s already out there, whatever’s coming from Flexible Experiments, and anything that I included that’s not in the others, we’ll be able to get a pretty solid TabNavigator.

So here’s the demo. Try adding a bunch of tabs and see what happens when you add too many to display at once. Try re-ordering the tabs by dragging them. See the pretty little indicator arrow? ooh aah…

This movie requires Flash Player 9.

Standard

11 thoughts on “The Quest for the Perfect TabNavigator

  1. Jason Hawryluk says:

    Nice job, mine works about the same except the scrolling buttons. Close button drag & drop etc.. Your drag indicator is nicer though 🙂

    Perhaps when I get done (it’s pretty much done) we can compare, take the best parts from the 2 and make a real solid implementation together. I don’t see the point in having 2 components that do the same thing lying around.

    Jason

  2. Ciarán says:

    Thanks, Doug. Give or take a bit, this is kinda the behaviour I’m attempting (a bit of a mish-mash of sorts). Nice touch with the Move effect =)

  3. Jason, my thoughts exactly. I’ll take a look at what you release, and after I release my code you can take a look. Since it seems like a few people have been working on the same issue and it’s been requested by multiple people, we can try to pull it all together into one implementation.

    Ciarán: is there functionality that you were looking for that’s not included? Also, it’s not a Move effect, but rather it’s using the Canvas.horizontalScrollPosition to scroll the tabs 🙂

  4. Ciarán says:

    Doug: It seemed to execute over a period of time which is why I thought it was something to do with that magic. The other functionality I’m questing for would be to measure the text on the label and resize the individual tab accordingly, so it’s not fixed according to the tabWidth property where not specified. I’ve had to put tinkering with this on hold because of other Jobs flying around at the moment, but I will be getting back to it…

  5. Check out the new post I just wrote, it now includes the requests from Ciaran and Ray, which are for individual resizing of tabs based on the label, and a scrollable pulldown menu.

  6. Pingback: Flex 2.01 Extending the Tab Navigator « Flexible Experiments

  7. Pingback: Flexible Experiments » Blog Archive » Flex 2.0.1 Extending the Tab Navigator

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

Comments are closed.