Flex 2.0.1 Extending the Tab Navigator

February 5, 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.

Extended TabNavigator

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

Advertisements

22 Responses to “Flex 2.0.1 Extending the Tab Navigator”

  1. darron Says:

    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.

  2. Doug Says:

    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).


  3. 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


  4. 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.

  5. Pat Says:

    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!!!


  6. 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

  7. Mitch Says:

    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


  8. […] gotten ideas from various flexcoders threads, the sample posted on Flexible Experiments, the sample on code zen, darron schall’s demo, etc […]

  9. Brent Broome Says:

    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


  10. 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

  11. prashant Says:

    Hi,this looks really cool.

    i have a doubt. can we set some style for disabled tabs. i need to make the font for disabled tabs italic. but i could not find the way to do it. i tried using CSS but could not achieve it.
    can you please help me out.
    Thanks

    -prashant


  12. […] :: More info Jason Hawryluk :: Extended Tab Navigator :: Drag tabs from one instance to another :: More info Jason Hawryluk :: Tree With Spring Loaded Folders :: More info :: Update Joe Berkovitz & Todd […]


  13. […] Jason Hawryluk :: Extended Tab Navigator :: Drag tabs from one instance to another :: More info […]


  14. […] :: More info Jason Hawryluk :: Extended Tab Navigator :: Drag tabs from one instance to another :: More info Jason Hawryluk :: Tree With Spring Loaded Folders :: More info :: Update Joe Berkovitz & Todd […]

  15. NathanLEE Says:

    Hi,
    There is maybe a BUG in your project. After create many tabs in container1, click item which refers to hidden tab in popup menu for several times, the content of container1 overlaps!

    U can c following URL: http://www.flickr.com/photos/31851997@N03/2981087740/

  16. NathanLEE Says:

    I’m now working on the similar stuff, and I find the same bug as yours. It’s maybe a BUG of FLEX!

  17. NathanLEE Says:

    I am working on a project with the similar functionality and the same BUG:

    http://flexrock.googlecode.com

    pls check the BUG

  18. Esteban Says:

    Hi, I need to do same tab showCloseButton = true and others showCloseButton = false in the same TabNavigator. It’s possible?

    Thanks in advance.

  19. Sekhar Says:

    Cool. You made my day

  20. Louise Says:

    This is really helpful – thank you for sharing!

  21. abc Says:

    Gr8 work done….and exactly the thing I am looking for…I am new to flex…
    how to see the source of this ?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: