[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 you’re dragging the actual tab.
This is the culmination of my work on making a better TabNavigator component for Flex. This includes lots of enhancements that have been discussed in the Flex community. We got draggable, re-orderable, closable tabs! We got scrolling tabs if too many tabs are open! We got a drop-down list of all open tabs! It slices, it dices! But seriously, it’s got a lot of stuff. I’ll try to go over everything briefly here, but the real way to figure this out is to download the source and go through it yourself. I tried to comment the bejesus out of most of the classes, so you should be able to follow along pretty well.
I’ve gotten ideas from various flexcoders threads, the sample posted on Flexible Experiments, the sample on code zen, darron schall’s demo, etc etc.
In keeping with Ely Geenfield’s naming conventions I’ve dubbed this component SuperTabNavigator. It is pretty super after all. This is a subclass of TabNavigator. I was actually able to do everything I wanted to do without having to copy/paste the code of TabNavigator, so using this component shouldn’t add too much to your Flex app’s footprint. The source included also includes the source of previous components I created that allow menu components to scroll. The SuperTabNavigator uses the scrolling version of the PopUpMenuButton for the button to the right of the tabs. So those scrolling menu components are thrown in here.
OK, so what makes this SuperTabNavigator so super?
Draggable, re-orderable tabs
You can drag tabs around to re-order them. An indicator shows where the tab is going to be placed if you drop it. You can drag tabs from one SuperTabNavigator to another. You can control the dragging ability by using the new dragEnabled and dropEnabled properties of the SuperTabNavigator. Those properties should work as you’d expect. The indicator is skinnable via CSS using the indicatorClass style.
Closable tabs
Tabs can display a close icon that will allow the user to close the tab. You can control if and when the close button is shown by setting the closePolicy property of a SuperTabNavigator. Possible values are: SuperTab.CLOSE_ALWAYS, CLOSE_SELECTED, CLOSE_ROLLOVER, CLOSE_NEVER. That should give you fairly good control over how the close buttons show up. The close button is fully skinnable via the CSS property closeButtonSkin just like any other button.
Scrollable tabs
If the tabs get too long to display then they will scroll. This means a little button on the right side will appear with an arrow and if you mouseover this arrow the tabs will scroll. The left and right buttons are skinnable via CSS with the leftButtonStyle and rightButtonStyle styles. You can set what the smallest acceptable width for the tabs is by using the minTabWidth property. If you don’t set tabWidth then the tabs should keep their natural width until there are too many to fit, then they’ll squish until they reach minTabWidth, then they’ll scroll. If you were to set minTabWidth to 0 then there would be no scrolling.
Drop-down list of tabs
On the right side is a PopUpMenuButton that shows a drop-down list of all open tabs. Selecting a tab in this list will obviously select that tab. Try selecting a tab that isn’t visible and see the sweet tween motion as the tab scrolls into view. The display of this drop-down button is controled via the popUpButtonPolicy policy, which can be set to POPUPPOLICY_AUTO, POPUPPOLICY_ON, or POPUPPOLICY_OFF. Auto means the button is shown if there is more than 1 tab. ON obviously means it’s always shown, and OFF means it’s never shown. That button is skinnable too via CSS with the popupButtonStyleName style.
So that’s the gist of it. But to really understand what the component can do you should read the source code. I’ll work on getting the ASDocs generated to accompany the code.
Now I’m sure you’ll read all this and say, “Wow, what a perfect TabNavigator, I had no idea such an amazing TabNavigator could exist. Surely there are no features missing.” Well, in fact, there are some more features I’d like to include. Here they are in no particular order:
- multiple rows of tabs
- tabs down the left or right sides or on the bottom
- ability to not show the close button for individual tabs
- right-click on tabs to get menu for “Close Tab” or “Close Other Tabs”
And you would then say, “But no, please, if such a TabNavigator existed I would be blinded by it’s perfection.” And I would reply, “Prepare yourself.”
View the source. [Note: you need the Flex 2.0.1 update to use this code]
This entry was posted
on Wednesday, February 7th, 2007 at 10:48 pm 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)
February 7th, 2007 at 11:22 pm
Very cool extension, as always, Doug. The scroll speed feels kinda fast, but other than that, I love it.
February 7th, 2007 at 11:49 pm
Nice work. Great mush up of all the different versions. Good to see you’ve extended the tab class as opposed to using a button (as I believe in your previous versions was the case).
You have a bit of work to do on the tab sizing, as it sometimes shows the “Ta…” in the label (I see some sporadic results).
Why not create the real drag proxy instead of the box, usability wise it allows a user to see what they are dragging, label, icon etc..
Perhaps in the list bold the ones that are not visible, or grey the visible tabs. Maybe offer a scroll on click as opposed to on mouse over.
good work.
jason
February 8th, 2007 at 5:17 am
Man that rocks, nice work :o)
February 8th, 2007 at 6:22 am
Doug,
nice work, very slick indeed, I was wondering if there was any chance of a version that was just the tab bar without the viewstack part? like there is in Flex with TabBar, I see from the source code that you do have separate classes, but do you have a single control that works without specific views attached? If you did, I could use it!
Regards
Chris
February 8th, 2007 at 9:15 am
Recently I was working on some Tab styling for the TabBar and TabNavigator. I went ahead and integrated it into your code. You can take a look here:
http://renaun.com/blog/2007/02/08/182/
And thanks for the great component!
February 8th, 2007 at 10:08 am
Yeah, cool stuff. As Ely said, the scroll speed is pretty fast. Hard for a user to stop where they want. I was actually expecting it to be a button that works like Firefox by pressing it to move forward or back one tab.
February 8th, 2007 at 10:13 am
New version allows you to adjust the scroll speed by setting the scrollSpeed property of the SuperTabNavigator. Also allows you to change the scroll left and right buttons to work via mouse down instead of mouse over. I’ll post the updates tonight.
February 8th, 2007 at 10:46 am
awesome work…
WE SO NEED THIS
February 8th, 2007 at 12:28 pm
Great work Doug. I am glad my code helped, since that never went into the project I wrote that for
February 8th, 2007 at 2:01 pm
Fantastic stuff… got it rolled into my project this morning and it was just what the doctor ordered.
One minor quibble that I ran across though… the Tabs really freaked out when I enabledDropShadow on the SuperTabNavigator. You end up getting what looks like a control bar overlayed on the tabs, and they became unusable. Not a big deal, but strange behavior to be sure.
I’ll also be waiting patiently for your future updates list. I would *really* love to see the “ability to not show the close button for individual tabs ” item tackled
February 8th, 2007 at 4:21 pm
Thanks for all the comments! I just updated the example and the source to include some of the suggestions. [maybe clear your cache if the example doesn't update]
Scroll speed is now adjustable with a new property of SuperTabNavigator (I must have been drinking way more coffee than you guys when I thought that the super-fast speed was OK). You can choose to make the scrolling work either with a mouse press or with mouse over (the top example uses mouse down, the bottom example uses mouse over). Again, this is with new properties of SuperTabNavigator. So now it works more like the Firefox scrolling functionality.
Jason, I implemented the proxy image for the drag.
Barry, I don’t know, I enabled drop shadow on the SuperTabNavigator and it seems to look fine, check the new example.
February 9th, 2007 at 1:32 am
[...] Componente SuperTabNavigator [...]
February 10th, 2007 at 5:29 am
Like in an earlier email. I wouldn’t call you God!! But man your dam close. Keep up the good work. One question just where I am unformiliar with it, can this be packaged up into a .swc?
February 12th, 2007 at 11:17 am
Re: tab bar going wonky
Doug, I may have found what was actually causing my issue… when I enabled the drop shadows, I was also removing the height and width of the SuperTabNavigator and giving it relative Left and Right settings instead (e.g. setting the “right” value to “5″ to keep the contianer sized 5 pixels from the right edge).
I think there is a redraw issue with the tabs when this is done. You can see an example here: http://sanford.xostech.com/0/C/user/community/cfcTest5/bin/cfcTest5.html
February 26th, 2007 at 9:33 am
Can u flip the tabs to vertical?
March 22nd, 2007 at 1:20 pm
Hi Doug,
Great job! I am currently involved in TabNavigator. I have a question, How can I place the tab on the bottom for Flex 2. Any suggestions?
Thanks a lot.
Hanping
April 12th, 2007 at 6:09 am
Any chance for a visible/true/false option on the tabbar contents? I would like to bind that value to a global setting to control whether a certain tab is visible or not. (not enabled) but actually even visible to the user.
Thanks
April 17th, 2007 at 12:31 pm
Hi Doug,
Thanks for a great component.
I’ve only been learning AS3 & MXML for the last couple of weeks or so, so bear with me if this is a dumb question.
As I’m using several instances of the SuperTabNavigator, I want to move the addTab function inside SuperTabNavigator.as.
So
navigator.addchild(child)
nav.selectedIndex = nav.numChildren - 1;
becomes
this.addchild(child).
this.selectedIndex = this.menu.dataProvider.length;
ensureTabIsVisible();
However the auto scrolling to ensure the new tab is visible is not happening (when enough tabs are opened to require it)
Any ideas / hints?
Thanks, Rich
May 16th, 2007 at 6:35 am
Hi Doug,
Thank you for the great work you did on creating this SuperTabNavigator.
I’m just wondering if there is a way to make individual tabs closeable/not closeable.
What does: child.setStyle(”closable”, true) do in the addTab() method?
Thanx again,
Rui
May 21st, 2007 at 12:26 pm
Hey Doug,
I’m starting to look at the code for the SuperTab stuff to add some customizations I need, and I notice that when you drag a tab and release it the removeDrag() function is not called in SuperTabBar. It is called however if you go and click back on the tab without dragging. I am guessing this has something to do with the image proxy since when you let go of the tab you are dragging, the MOUSE_UP event doesn’t seem to fire for the tab like you wold expect since you are actually dragging something else.
The goal of my changes is to allow closing of tabs on one bar to pop the tab back over to its original bar and also I think I need to not allow a user to drag all the tabs off the main bar so they can be placed back also. I’m only just starting, so if anyone has done something like this already, I’d love to hear from you!
Thanks,
Shawn
May 21st, 2007 at 2:04 pm
Doug,
I think I have a fix for what I mention above, drop me an email and I will send you the code. I’d be interested in hearing if what I’ve done fits ok.
Thanks,
Shawn
August 10th, 2007 at 11:21 pm
Did anyone figure out a way to make children not show the close button?
August 17th, 2007 at 3:50 am
Hi Doug,
geat job!
Is it possible to set a htmltext in the Tab and not only a normal label in the Tab?
For different font-size, font-color, … in one(!) Tab.
I tried to add a htmltext with this code:
//This is the TextField of the Tab (contains the text of the Tab)
var textfield:TextField = my_tab.getTabAt(0).getChildAt(1) as TextField;
var new_text:String = ”;
new_text += ”;
new_text += ”;
new_text += ‘1. ‘;
new_text += ”;
new_text += ‘My Tab‘;
new_text += ”;
textfield.htmlText = new_text;
This works, but if I “mouseover” the Tab the htmltext goes away and the normal text appears.
I it possible to implement this feature in a Tab-Navigator?
Have you a good idea or maybe a little bit of code?
Thanks!
Marcus
August 22nd, 2007 at 11:33 pm
Hi Doug,
Great job on that component! I am currently workin on a ’super’ TabNavigator. I have a question, How can I place the tab on the bottom for Flex 2??
Thanks!
Nico
November 16th, 2007 at 6:06 pm
Simply IMPRESSIVE! Thanks for this awesome SuperTabNavigator, Doug! Is it possible to limit the width of the tabs area (all tabs, not individual tab) to be a certain width. Then, is it possible to change the location of PopUpMenuButton to be aligned to the right of the last visible tab? I want to put other control to the right-most corner, such as close button to close all tabs, but cannot seem to override the location of the PopUpMenuButton.
December 13th, 2007 at 5:18 am
Hi,
This is a very good Navigator … but … as other developers i need also to be able to move the tab on the bottom … any suggestions for ActionScript 3, of course … Thank you!
December 17th, 2007 at 7:40 am
Is the perfect tab navigator still being quested for? In particular I’d like to see multiple rows of tabs. I don’t think anyone has implemented that one yet.
February 3rd, 2008 at 6:00 am
What a great component! It will be very usefull for me!
Thanks!!!!!!!!!!!
Elvis Fernandes
February 12th, 2008 at 2:48 am
[...] http://dougmccune.com/blog/2007/02/07/quest-for-the-perfect-tabnavigator-part-3-with-source/ [...]
February 25th, 2008 at 12:20 am
Hi!
First, this is a great component as many have mentioned before me.
I have 2 questions though:
1. For some reason, the drop-down list of tabs does not work for me… click on the button does nothing…
2. I need a way to have some tabs closable and others not closable. Is there a way to do this with this component? I tried supplying a “closable” style with a false value but it didn’t work..
Thanks!
March 5th, 2008 at 3:00 pm
Hello,
I too am trying to figure out how to have some tabs closeable and others not. I tried adding the style as found in the example:
child.setStyle(”closable”, false);
But this seems to do nothing. Is this broken or was this feature never actually added? Has anyone found a way to do this yet?
Thanks,
Nathan
March 6th, 2008 at 7:35 pm
Hi,
Nice work ! I tried to make all the tabs not closable with this code :
It’s not working. Did i do something wrong ?
Thanks.
March 6th, 2008 at 7:36 pm
ns2:SuperTabNavigator x=”0″ y=”40″ width=”100%” height=”100%” closePolicy=”SuperTab.CLOSE_ALWAYS”
March 10th, 2008 at 2:42 am
Hi Doug,
I found your component and did some small but necessary improvement. How can I send it to you?
Thanks,
Eric
March 25th, 2008 at 8:31 pm
As I found out, this is not working perfectly under Flex 3. Tab title can not allow more than 2 character, if a tab has 1 char as ‘y’, when the tab is in focus, nothing can be displayed for the tab title. Also, my components after moving from Flex 2 to 3, scoll bar on the right is no longer working.
March 25th, 2008 at 8:33 pm
Doug, can you please spend some time looking at the problem, highly appreciated.
March 26th, 2008 at 5:01 am
@bing zhu: make sure you’re sing the latest SuperTabNavigator from the FlexLib project, that’s the latest version of this component. http://flexlib.net
The Flex 3 issues should have all been addressed already. Check it out and make sure.
Doug
April 22nd, 2008 at 7:49 am
Hello,
great Job,
u’re a flex guru :o)
but i have a little problem ..
I don’t know how could I change a specified tab style … whitout being on the tab ?
does anyone have an idea ?
thanks a lot
May 6th, 2008 at 1:47 am
Hi Doug,
Thanks for a great component.
Can i let the SuperTabNavigator’s direction is vertical? like the TabBar have a property direction=”vertical”
thanks
johnc
May 6th, 2008 at 1:49 am
if i can , please tell me what should i do
thanks
johnc
May 7th, 2008 at 5:30 am
Truly a wicked enhancement.
In my heavily tab-based Flex 2.0.1 app I was able to simply replace TabNavigators with SuperTabNavigators, and it worked right off the hop.
It was then very straightforward to handle the Super new features (tab reordering, hiding, etc.)
Many thanks for providing the component, and the helpful examples — it’s a work of genius.
/PJW
June 16th, 2008 at 8:40 am
[...] Doug McCune just released a very nice post about the perfect tabnavigator, aka: SuperTabNavigator. I just happened to be messing with a skinning feature for TabBar’s and TabNavigator’s that I thought would go well with this awesome component. [...]
July 4th, 2008 at 11:12 am
[..] I’m trying to skin Doug McCune’s SuperTabNavigator, which is one of the many excellent components in the FlexLib project. The component is fantastic, and I’ve really enjoyed seeing how Doug implemented it.
So, when I ran up against a brick wall trying to skin it, I figured I did something wrong. It’s been a couple of hours, and I can’t figure out how to change the close button without modifying the original code. [...]
July 7th, 2008 at 3:04 pm
[...] I wrote a few days ago about my struggle to skin SuperTabNavigator without changing its code. It turned out to be impossible, and Doug recommended that I add a few styles to fix it.It turned out really well, and that mess I wrote about before collapsed into nothing but the following css. [...]
July 21st, 2008 at 3:18 pm
Doug, This looks great. Thanks for your hard work. Any idea’s on how to move the add tab button to be a part of the tabbar? so the end user would have all the controls within the tabbar. Thanks!
July 24th, 2008 at 2:32 pm
Hello my friend. It’s an awesome piece of work the one you did here.
I found a bug in both TabNavigator and SuperTabNavigator that can be recreated with the following steps:
1.- remove all tabs
2.- add new tab
3.- newly created tab is not focused
I tried to work this isse around by forcing the both selectedIndex and selectedChild properties but it didn’t work at all.
Any clues on this are appreciated.
Regards
July 29th, 2008 at 8:30 pm
HI.. Thanks…. thanks for sharing da code…….
September 10th, 2008 at 9:21 am
Just downloaded this as part of the flexlib package google code.
Thank you for releasing under MIT license! Very easy to use and integrate into my existing project.
September 20th, 2008 at 12:32 pm
Doug,
Do you have an idea how to include a tab loading icon ‘moving circle’, similar to what is used in FireFox? Is that icon a typical animated gif?
September 20th, 2008 at 12:40 pm
Its also called a Throbber.