Flex 2.0.1 Extending the Tab Navigator
February 5th, 2007
Well here is my version of an extended Flex tab navigator. I implemented a proper proxy image for the drag operations. Dragging between navigators (very handy for larger applications). Got your standard close button happening, optional of course (as a style). Click an item in the popup list, if not visible the item clicked becomes the first tab. Drag from the popup list is implemented. Drag and drop into a navigator container places the tab as the first item.
With little effort you should be able to separate the tabBar from the navigator if your required to do so.
Doug has posted something similar over on his blog. I have tried to add some interesting things, but heck; it’s a tab navigator. I successfully abstained from looking at his implementation while finishing mine.
This one extends a few different components in order to achieve the desired effect. Here is what I ended up extending.
Tab
TabBar
TabNavigator
PopUpMenuButton
ProgrammaticSkin
HaloBorder
I haven’t overloaded this one with comments, so if you have questions feel free to ask.
The popup menu for the none visible tabs works as I had hoped. I didn’t add a scroll bar to the menu as I thought that if you need one; you should probably rethink your interface. To many tabs is certainly not a good thing. On average in my opinion a user will open between 5 and 12 tabs before they start doing cleanup.
It’ll use the icon and label specified in your container for display within the tab and popup menu.
Perhaps Doug will take this code; look it over and create a combined version that covers the broad spectrum of requirements for such a component. I’d be interested in collaborating with him on a couple other ideas I’ve got rolling around for future things. If you haven’t checked out his blog I suggest you do so. He has a couple of gems over there.
The one thing I wish would have been possible is with regards to the click event on a tab. There seems to be no way to properly have the tab close on mouse up. It seems to be set in stone that this is mouse down only. Normally it wouldn’t be a problem but it doesn’t allow me to conform to a standard action with regards to click hold mouse out button deactivation kind of interaction.
As most things here this is not tested in a production environment so post any bugs you stumble upon, enjoy.
Requires Flash 9 player.
Sample and Source : Extended Tab Navigator
I’ve got some big things coming for the next couple of posts. In the mean time hopefully some people can make use of this one.
EDIT: My bad, title spelling was wrong. I was wondering why It didn’t show up in the flex categories. Anyway I’ll re ping this. Hopefully it doesn’t re show. If it does, my apologies..
Jason Hawryluk
February 5th, 2007 at 10:48 pm
I did the closeable thing a long time ago. I only mention it here because I have the tabs closing on mouse up — http://www.darronschall.com/weblog/archives/000244.cfm
Since my initial take on it this past September, I’ve worked on it to the point where it’s the “mother of all tab navigators”.. unfortunately, it was for a client and I can’t release it. However, if you and Doug combine efforts, I can probably throw my two cents in and polish up anything left out and we can re-create my “mother of all tab navigators” as code in the open domain.
February 5th, 2007 at 10:54 pm
Nice. Yeah, looks like we were working on some of the same stuff at the same time. I like your proxy image for dragging a tab. And the dragging between controls and dragging from the popup menu is something I didn’t even think about.
I got caught up trying to make side tabs, but soon I’ll release the source to my version (soon = within a week).
February 5th, 2007 at 10:59 pm
Darron,
That’s sounds great and I’m certainly willing to do what I can. I had a heck of a time trying to get the tabs closing on mouse up. Unfortunately didn’t get to an acceptable solution for that.
We’ll see what Doug has to say, I’m sure between us all we can get something close to the mother of all tab navigators.
Jason
February 5th, 2007 at 11:03 pm
Doug,
Perhaps there are ways in which we can collaborate on some of these things as Darron proposed. Not quite sure where to start, but drop me a mail when you get time. Maybe RIAForge is a solution for this as it seems to be something quite popular.
February 5th, 2007 at 11:36 pm
Hey great work. Also, in case you did not notice, moving tabs is off by one. IE: If you drag tab 2 between 5 & 6, it shows up AFTER 6. Just thought you would want to know. Thanks for contributing!!!
February 6th, 2007 at 8:35 am
Pat,
Thanks. It does drop in the correct location, but it depends on where your mouse is at when you drop. I.e. if your more to the left then it’ll drop to the left. I’ll take some time this week and update it to properly portrait this with the drop indication. As well as add a couple new things.
Jason
February 6th, 2007 at 11:16 am
Wow y’all - this is cool… i didn’t realize how cool until i woke up at 4am (early for me) and was lying there trying to go back to sleep when i realized this would be the perfect idea for the redesign of a site i’ve been wanting to redo… the old site is CFMX 7 based and uses flash forms, but it is clunky and this would be a much better visual tool in this case than a list grid with popup forms.
Way cool - i’ll be watching to see if you combine these into a super collaboration.
Mitch
February 8th, 2007 at 6:49 am
[…] gotten ideas from various flexcoders threads, the sample posted on Flexible Experiments, the sample on code zen, darron schall’s demo, etc […]
July 23rd, 2007 at 8:25 pm
Seriously nice component. I was wondering what license you’ve released it under. I’m considering using it in a project of mine, but wanted to make sure this would be kosher. Thanks,
Brent
July 24th, 2007 at 6:27 am
Brent,
Everything on this blog is considered creative commons unless otherwise stated, use anything here as you would like. For commercial purposes or otherwise.
I do appreciate your asking.
Cheers.
Jason
October 14th, 2008 at 11:26 pm
Hi Jason,
There’s maybe a BUG in your sample!! Or it’s maybe a BUG with FLEX.
When I click the item which refer to hidden Tab in ScrollablePopUpMenuButton several times, the content of ExtendingTabNavigator overlaps.
Look forward to your reply.