Data Artist

The Quest for the Perfect Tab Navigator – Part 2

Here’s my progress on coming up with a TabNavigator component with all the features I’ve heard people talking about.

Drag the tabs to re-order them. An indicator appears showing you where the tabs will be dropped. You can drop tabs before or after any other tab currently in the list

Closable tabs. Click the close icon on each tab to remove it.

List of tabs in a drop-down menu on the right. I’ve changed it now so the menu won’t go off the screen. It adds a scrollbar to the menu if it gets too long.

If you don’t specify a tabWidth, the tabs are all at their own default widths.

If there are too many tabs to fit the component first tries to squeeze the tabs in by making them smaller. You can set minTabWidth, which specifies the smallest that the tabs are allowed to be squeezed down to. If the tabs can’t be squeezed more then scrolling occurs (next point)

Scrollable tabs. If the number of tabs is too many to fit, then arrow icons appear on the left and right side that allow you to scroll through all available tabs.

There are some definite bugs, especially when it comes to trying to set tabWidth and minTabWidth. Once I upload the source in the next day or so maybe someone else can figure it out.

So that’s pretty much where I’m at. Hopefully I’ll post the code tomorrow once I get around to cleaning it up a tiny bit more. Here’s the example of the current component. If you’ve got any more feature requests just post them in the comments and I’ll see if I can include them. Cool.

This movie requires Flash Player 9.

Related:

[UPDATE 02-08-2007 4:05 pm] Added the ability to adjust the scroll speed via scrollSpeed property. Changed scrolling buttons to work via mouse down or mouse over, customizable with the startScrollingEvent and stopScrollingEvent properties. Made the drag proxy image a copy of the bitmap of the tab so it looks like…

[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…

Hmm, multiple rows of tabs suddenly makes the component a lot more complicated. Basically all the differences between my current version and the original TabNavigator are fairly minor in the grand scheme of things. But the TabNavigator only has one instance of a TabBar component. All I did to get the scrolling was make that TabBar not resize smaller than a certain amount, and then wrap it in a scrollable Canvas. If we have to break up the tabs and disitribute them among multiple TabBar components, then it gets a lot harder.

The other option would be to extend TabBar so it would be able to lay out multiple rows. That’s probably the easier way, but I *think* I’ll let someone else do that.

Ha, well actually Apollo will have a HTML control, so once that’s incorporated making this TabNavigator control tabbed webpages would be a snap. So I guess we’ll wait until Apollo is released, then a tabbed web browser in Flex will become a reality.

Personally, what I’d most like to see in a tabnavigator is the option to have the tabs vertically down the left (or right?!) side rather than having to have them horizontally at the top. How much effort do you think would be required to do this? I’m fairly new to Flex and haven’t really looked at creating/extending components so far. Do you think this could be achieved in a similar way to your new HAccordian component?

One feature request, though, that you could probably answer a LOT faster: Is there a way to only display the closing icon on some tabs, but not all? I have the need for a tab navigator that can open arbitrary new tabs, but there will always been some core tabs (e.g. ‘home’) that need to remain open and not let the user close them. It would be fantastic if displaying the close button was an optional attribute of each tab.

I’ve got a feature request but it may fall outside the scope of this component. When a tab is dragged outside of the tab navigator, turn it into a floating window. Sorta like the way the Photoshop CS3 UI works, with docking panels that can also be windows and such.

did you know about a special feature which appears in the native TabNavigator as well as in your modified one: if you click (amost) anywhere in the area of an opened tab, then press and move the arrow keys, you are able to switch to a different tab by hitting again. Seems like a hidden feature to me, and it could turn out that you have an editable textfield in your tab, enter something, insert blank, use arrow keys, enter blank again and… yes, you are in a different tab instead of having changed your text entry. Just wanted to let you know…