[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]
Very cool extension, as always, Doug. The scroll speed feels kinda fast, but other than that, I love it.
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
Man that rocks, nice work :o)
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
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!
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.
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.
awesome work…
WE SO NEED THIS
Great work Doug. I am glad my code helped, since that never went into the project I wrote that for 😉
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 🙂
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.
Pingback: MadeInFlex » Blog Archive » Componente SuperTabNavigator
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?
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
Can u flip the tabs to vertical?
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
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
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
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
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
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
Did anyone figure out a way to make children not show the close button?
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
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
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.
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!
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.
What a great component! It will be very usefull for me!
Thanks!!!!!!!!!!!
Elvis Fernandes
Pingback: Tab Navigator with a drop-down list of all open tabs! « FLEXing Experience
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!
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
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.
ns2:SuperTabNavigator x=”0″ y=”40″ width=”100%” height=”100%” closePolicy=”SuperTab.CLOSE_ALWAYS”
Hi Doug,
I found your component and did some small but necessary improvement. How can I send it to you?
Thanks,
Eric
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.
Doug, can you please spend some time looking at the problem, highly appreciated.
@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
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
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
if i can , please tell me what should i do
thanks
johnc
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
Pingback: Renaun Erickson » My Additions to the SuperTabNavigator
[..] 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. […]
[…] 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. […]
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!
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
HI.. Thanks…. thanks for sharing da code…….
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.
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?
Its also called a Throbber.
first of all thx for the great work
uuurhh…… ii just downloaded flexlib 2.4 ‘cos superTabBNavigator is just the component i need. i’m using flex builder 3, i just copied/pasted (shame on the lazy newbie – just wanted to figure out how it works to implement it well) the source of supertabnavigator example, it does not compile… got this error: 1067 Implicit coercion of a value of type flexlib.containers.SuperTabNavigator to an unrelated type SuperTabNavigator.
line 51: addTab(“Home”, nav, “This tab can’t be closed”, home_icon);
line 54: addTab(“Tab ” + (i + 1), nav);
line 58: addTab(“Tab ” + (i + 1), nav2);
i’m stuck 🙁 Any idea? Help would be highly appreciated
Hi Doug
thanks, Great job……..
I need to know that is there any way to set the width of each Tab, i mean according to text width?
Hi,
Is there any way to position the poup menu little left to browser? Now the popup menu touches the side of the browser.
Great Work
thanks
Gautham
I just started looking at your SuperTabNavigator and I am very impressed! Our UI person has come up with something that I want to find out if its possible. In your example there is a red ‘X’ on the right to delete the current tab. What I am being asked to do is to replace the red circled ‘X’ with another icon that when pressed brings up a popup menu that display options (one of which is to delete the tab). Is this override of the icon possible?
Many thanks for this great component!
Did some more digging. Looks like like I can extend SuperTabNavigator and overide the SuperTab that way. Continuing to investigate. Thanks again for STN!
Hi all,
Can anyone tell me how to position the popup menu so that it doesn’t touch the sides of the screen
Thanks
Gautham
And I thought I was the coolest man on the planet.
I will retire and you shall henceforth be known as ‘Doug Norris’.
HI can some Body Tell me if this problem is fixed or Not
How do I get the variable Tab width ability back into supertab with Full labels without ….?
Please Help
Its Urgent now 🙁
Hey! Nice work..
But T think missing something in SuperTabnavigator..
I think the Static image of closed button should be there on focused tab and dynamic image for the mouse rollover.
I think u understand it..
Try for that..
Its good fun..
Otherwise its great work..
Hi there,
This SuperTabNavigator is great but i found some bug if this is really a bug. When i minimize or resize my browser, or when i resize the SuperTabNavigator, the PopUpMenuButton is no longer working (the drop down list of all tabs). Can someone help me how to fix this.
thanks a lot..
Only works on Flex 3.2!
on SDK 3.3 or 3.4 it sucks a lot.
There is an current working version for this SDKs?
The only mod I had to make to get things to work in the 3.4 SDK is the following addition to my stylesheet (not using the swc):
SuperTab {
tabCloseButtonStyleName:”tabCloseButton”;
}
.tabCloseButton {
upSkin: Embed(source=’/flexlib/assets/assets.swf’, symbol=’firefox_close_up’);
overSkin: Embed(source=’/flexlib/assets/assets.swf’, symbol=’firefox_close_over’);
downSkin: Embed(source=’/flexlib/assets/assets.swf’, symbol=’firefox_close_down’);
disabled-skin: Embed(source=’/flexlib/assets/assets.swf’, symbol=’firefox_close_disabled’);
}
great component doug!
@Nathan Redding
dude try the setClosePolicyForTab method man 🙂
my bad. nathan’s post was like a year ago ^^. anyway was just trying to help 😀
1046: Type was not found or was not a compile-time constant: SuperTabNavigator.
is the error. I am using it for a web browser want to create. If I need to get somethng then where to I get it?
http://www.zambala.net/images/VerticalTab.jpg
Vertical Tabs – Not always vertical
Is there a way to position the Titles the right way up as I have only seen examples of vertical tabbing with titles rotated 90 deg ccw?
hi,
can tell me how to add a tab like the righttop tabmenu?please?i can not find the interface or where let me extend?
good work, keep it up!
Regards
hi
I am not sure is this a bug or not? I am creating 10-15 tabs (which has datagrid) at runtime but it is taking too much time to display. Assume that there are total 3500 records which are divided in all the tabs.
I had tried one scenario like i first created 15 hard coded tabs. and at runtime i am just assigning the data provider to my grid. it much faster than earlier.
so main question is that Is the tab rendering is taking time? if so can we invisible tabs runtime rather adding it on runtime?
Hope you will get my question.
Thanks
I’m extending the SUperTabNavigator in my application. How should i change the close button to an custom image. Could any one please give me some explanation. I’ve tried everything avaialble in the internet. it does not seems to work.. already spent 8 hours on it..
Thanks..
Hello.
First, thanks for this awesome component!
I found a workaround for the bug reported by Nicolás Dijkstra about the selectedIndex setter not working.
This property is very useful to programmatically change the selected tab.
Actually, the selectedIndex setter works, but after, during the updateDisplayList of the underlying ToggleButtonBar, the selectedIndex property is reset to it’s previous value.
Here is the workaround:
1/ create a class that extend SuperTabNavigator, say MySuperTabNavigator.
2/ override the updateDisplayList method to backup the selectedIndex, call the method of the super class, then restore the selectedIndex property in the wiew stack and in the tab bar:
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
var backupSelectedIndex:int = selectedIndex;
super.updateDisplayList(unscaledWidth, unscaledHeight);
selectedIndex = backupSelectedIndex;
tabBar.selectedIndex = backupSelectedIndex;
}
3/ Use MySuperTabNavigator instead of SuperTabNavigator to create tabbed panes in which the setter of the selectedIndex property works.
This is not very clean, but it’s the only way i found. I would gladly use a better solution if someone finds one.
Thanks.
Hi Doug,
First of all thanks for the wonderful component. I have an issue while using the STN. I am creating a custom TabNavigator that extends the SuperTabNavigator. When I do this, the first tab in the custom tabnavigator is missing. Can you help me find out what might be the issue.
MyCustomTabNavigator extends SuperTabNavigator
{
override protected function createChildren():void{
if (!tabBar){
tabBar = new MyCustomTabBar();
tabBar.focusEnabled = false;
tabBar.styleName = this;
rawChildren.addChild(tabBar);
}
super.createChildren();
popUpButtonPolicy = POPUPPOLICY_OFF;
closePolicy = SuperTab.CLOSE_SELECTED;
}
}
———
public class MyCustomTabBar extends SuperTabBar{
public function DroppableTabBar(){
super();
navItemFactory = new ClassFactory(MyCustomTab);
}
}
———–
public class MyCustomTab extends SuperTab
{
override protected function createChildren():void{
super.createChildren();
}
}
Any help is highly appreciated.
thanks
Hi Doug,
Really great extension, thanks for sharing. I was looking for the exact same thing. But I need this in Flex 3. So could you please help with this that how can do the same thing in Flex 3.
Thanks.
Hello
(I’m French, so I’m sorry for my bad english)
I want to integrate a load of tabs for each open tab, but I find no solution on the Internet. Would it be possible to give me a track or a solution?
Thank you very much in advance, I wish you a great day.
I cannot see any of the images 🙁 All I can see is like a box where the close images should be.
I am using Flex 4 – could this be the cause of the issue ??? Everything else is working.
I am also using Flex 4 and i cant see the images but everything works fine. Is there a fix for this?
Thanks in advance.
Hi Doug,
This is really excellant but, I got a small problem with this, after removing all tabs if I click on addtab button the new tab is coming in inactive mode, And the second tab is in active mode. How can I show the first tab in active mode?
Thanks in advance.
I have the same issue as Jon & TK. I’m using FlexBuilder 4 and I can’t get the close icons to appear. I even tried building the sample app and I get the same results. Can you post a zip file of the sample project so we can try to see why yours works and ours doesn’t?
Anyone know how I can make the tabs vertical, versus horizontal?
Hi there,
I’d like to remove the close icon in a SuperTabNavigator from some tab (not from all). Has anybody an idea how to do this? ? Thx in advance,
—
Luca
Doug, your component is great!
I have the same issue as Jon, TK and Les. I’m using FlexBuilder 4 (Flex 4.1 compiler) and I can’t get neither the close icons to appear nor the tab indicator. I even tried building the sample app, changing the references to the assets.swf to png icons, using reference to a css, and even hard-coded values directly into the component and I get the same results. Can you post a zip file of the sample project so we can try to see why yours works and ours doesn’t? or just suggest me how to solve this problem? I Also saw some post on the flexlib project, bur nothing to point me to the right direction…
Thanks in advance,
Benkla
Dough,
thank you very much vor the amazing TabNavigator.
I also can’t see the close icon. Is there a fix?
Also, the first Tab shows always the home-icon. i don’t want the home icon on the first tab.
a nice enhancement would be a small tab at the right, wich opens a new tab after clicking on it.
But i had a issue. I placed a barChart into the tab and the barChart defined a ItemClick-Event. When i start the application and clicking on a bar element, FlashBuilder throws the errorMessage “TypeError: Error #1034: Type Coercion failed: cannot convert mx.charts.events::ChartItemEvent@7f564a1 to mx.events.IndexChangedEvent.”
How can i fix that?
Thanks in advanced
Frank
Hi,
your code doesn’t work like the way on this site. For example, the label/textField of the tabs got truncated on the code we downloaded; but we want it
(the text of the tab) to be shown in full length when the closed button is visible.
Please let me know
Thanks
For the close icon to appear in Flex 4, you have to say explicitly
>>
closeButton.styleName = “closeButton”;
<<
That will work nicely for sure.
Thanks for the great component !!
May I know how to handle the CLOSE event? I want to restirct one TAB, that should not close.
Has anyone gotten any feedback from the author?
Flex 4/Spark implementation, any time soon? 😉
I had to implement a similar control but for flex4/spark web application, but mine has some problems and bugs.