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 entry was posted
on Thursday, January 25th, 2007 at 12:11 am and is filed under Flex.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
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 !