[UPDATE: See Part 2 for the current component]
There’s been some discussion on flexcoders about a better TabNavigator component. And a few people have done some good stuff expanding on the original TabNavigator in the Flex framework. I figured I’d play around and try to add a little to the current TabNavigator modifications that are floating around.
First, a few references. Here’s a TabNavigator with draggable tabs that was posted on a blog called code zen. I used this as my starting point (well, actually I started from scratch, then realized this was already out there). The customized TabNavigator component there is pretty good. So I grabbed that, cleaned up a bit of the re-ordering of tabs stuff, made a few other tweaks, and then added some functionality of my own.
The demo’s below. Basically this allows you to add and remove tabs, drag tabs, but the cool part about what I added is the scrolling of the tabs. If the tabs get too long they do sort of what Firefox does, which is put buttons with left and right arrows on the sides of the tabs and allow you to scroll through them. I also added a drop-down button to the right edge that lets you select any of the tabs from a list, again a la Firefox.
I know Jason from Flexible Experiments has said he’s about to release the same component with the source. So his might come out in the next few days and make mine irrelevant.
I’ll release the source of my stuff in a day or two, after I clean it up a bit. Like I said, I used the code off of the code zen blog as my base, and I’m not in any way trying to steal that and claim it as my own. I’ll pubish the source of all my additions, and hopefully everyone can work together to make a TabNavigator that finally meets everyone’s demands. I figure between what’s already out there, whatever’s coming from Flexible Experiments, and anything that I included that’s not in the others, we’ll be able to get a pretty solid TabNavigator.
So here’s the demo. Try adding a bunch of tabs and see what happens when you add too many to display at once. Try re-ordering the tabs by dragging them. See the pretty little indicator arrow? ooh aah…
This entry was posted
on Tuesday, January 23rd, 2007 at 3:37 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 23rd, 2007 at 5:48 am
Nice job, mine works about the same except the scrolling buttons. Close button drag & drop etc.. Your drag indicator is nicer though
Perhaps when I get done (it’s pretty much done) we can compare, take the best parts from the 2 and make a real solid implementation together. I don’t see the point in having 2 components that do the same thing lying around.
Jason
January 23rd, 2007 at 6:52 am
Thanks, Doug. Give or take a bit, this is kinda the behaviour I’m attempting (a bit of a mish-mash of sorts). Nice touch with the Move effect =)
January 23rd, 2007 at 11:17 am
Jason, my thoughts exactly. I’ll take a look at what you release, and after I release my code you can take a look. Since it seems like a few people have been working on the same issue and it’s been requested by multiple people, we can try to pull it all together into one implementation.
Ciarán: is there functionality that you were looking for that’s not included? Also, it’s not a Move effect, but rather it’s using the Canvas.horizontalScrollPosition to scroll the tabs
January 24th, 2007 at 9:46 am
Doug: It seemed to execute over a period of time which is why I thought it was something to do with that magic. The other functionality I’m questing for would be to measure the text on the label and resize the individual tab accordingly, so it’s not fixed according to the tabWidth property where not specified. I’ve had to put tinkering with this on hold because of other Jobs flying around at the moment, but I will be getting back to it…
January 24th, 2007 at 5:09 pm
Now we just need a pulldown menu that can scroll….
January 25th, 2007 at 12:27 am
Check out the new post I just wrote, it now includes the requests from Ciaran and Ray, which are for individual resizing of tabs based on the label, and a scrollable pulldown menu.
February 6th, 2007 at 12:01 am
[...] 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. [...]
October 28th, 2007 at 3:56 am
[...] 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. [...]
March 25th, 2008 at 6:53 pm
[...] TADAAAAA ! This post is the 100th blog post on my blog. Its been a fun ride so I figured I wrote a bit on the history of this blog as well as link to my favorite posts here. Part of the team at Flash Forward, Austin, 2006. The Fan 3.0 won the People’s Choice Award (which is voted for by people on the www and not a panel of judges). A lot has changed since then: The team has changed, Fan 4 is a 100% Flex app and I have longer hair . My first post here was on July 19, 2006. That said, this was my second attempt at blogging, the first attempt was something on blogger, where I posted my opinions on Flash, but I got bored of that real quick as I hardly got any traffic. I started Code Zen with the basic assumption that I will get no traffic at all. I basically wanted a place to keep all the code I worked on and get back to it months later. This was around the time Flex 2 was coming out of beta, and I needed a place to host FlexAmp, my entry to the Flex developer contest (FlexAmp was featured on labs.adobe.com for quite a while and is still featured on the community sample apps section on Adobe.com).Of course once in a while the entries here would be purely opinion, like defending Flex when someone took cheap shots at it, but for the most part, I used this blog to document Flex techniques and gotchas or full blown components (list at the end of this). Some of the examples have even inspired greater work within the community. For example, SuperTabNavigator, one of the most used components on FlexLib, the open source Flex library that seems to be the one with the most traction right now was developed by Doug McCune on top example code on this blog (He of course packaged it into a complete component from the proof of concept I had here). [...]
April 24th, 2008 at 8:19 am
Where is the code for this ..? Can anybody point me where I could get this from?
August 29th, 2008 at 9:52 am
Same question as ab. where is the code for this? very nice looking component.