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.
You may want to consider being able to have multiple rows in addition to or instead of having to scroll if there are too many tabs.
Also, if you are going to have the dropdown on the right, then consider filling the space from the last tab with a blank, non clickable, tab.
Just my thoughts.
Looks good! I agree, multiple rows of tab headers is a great option to have as an alternative to scrolling.
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.
Are you trying to make FlexFox or FireFlex? ’cause, that’d be pretty cool.
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.
This is looking good!
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?
Fantastic work Doug, this is going to save me a ton of time…
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.
Man this is awesome! Great work.
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.
I also would like what Chris requested. If the tab is dragged outside of the panel to become something like a floating panel or titlewindow…
Did you ever post the source code for this? It looks great and would really save me a lot of time.
Please post the code for this !
Hi, me again.
Code and more examples can be found here: http://code.google.com/p/flexlib/
Thanks doug !
Dear Doug,
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…