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.
Entries (RSS)
January 25th, 2007 at 5:43 am
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.
January 25th, 2007 at 10:08 am
Looks good! I agree, multiple rows of tab headers is a great option to have as an alternative to scrolling.
January 25th, 2007 at 6:09 pm
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.
January 26th, 2007 at 4:27 pm
Are you trying to make FlexFox or FireFlex? ’cause, that’d be pretty cool.
January 26th, 2007 at 4:31 pm
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.
January 31st, 2007 at 4:41 am
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?
February 7th, 2007 at 11:00 am
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.
February 19th, 2007 at 9:42 am
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.
March 3rd, 2007 at 5:02 pm
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…
March 31st, 2007 at 7:29 am
Did you ever post the source code for this? It looks great and would really save me a lot of time.
June 25th, 2007 at 8:57 pm
Please post the code for this !
June 25th, 2007 at 9:04 pm
Hi, me again.
Code and more examples can be found here: http://code.google.com/p/flexlib/
Thanks doug !
September 16th, 2010 at 6:26 am
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…
February 23rd, 2012 at 2:11 pm
It is tough to come across knowledgeable individuals on this matter, but you sound like you know what you’re speaking about! Thanks Best Regards http://www.platosoul.com/band/oldcalendar/calendar.pl?ACTION=VIEWDAY&Year=2011&Month=11&Date=3
March 11th, 2012 at 3:31 am
Great goods from you, man. I’ve understand your stuff previous to and you are just too wonderful. I really like what you’ve acquired here, certainly like what you are saying and the way in which you say it. You make it entertaining and you still take care of to keep it sensible. I cant wait to read far more from you. This is actually a terrific site.
March 12th, 2012 at 7:43 pm
I as well as my friends were found to be following the good techniques located on your website and quickly developed an awful suspicion I had not thanked the site owner for them. These men are already consequently warmed to learn them and now have extremely been taking pleasure in them. I appreciate you for being so kind and for selecting this form of high-quality useful guides millions of individuals are really needing to understand about. My personal sincere regret for not saying thanks to you earlier.
April 29th, 2012 at 3:33 pm
Some tips i have usually told persons is that when you are evaluating a good online electronics retail store, there are a few aspects that you have to take into account. First and foremost, you need to make sure to find a reputable plus reliable retail store that has enjoyed great opinions and scores from other customers and business sector professionals. This will make certain you are getting along with a well-known store that delivers good assistance and support to its patrons. Thanks for sharing your ideas on this web site.