Sunday, December 12, 2010

Flex 4 Custom TabBar

I needed a drag enabled spark TabBar so you could reorder its tabs.  I searched the web and could only find the SuperTabBar component in the FlexLib library.  But that was still based off the old mx components.

So, I bunkered down and created a drag enabled TabBar.  You can reorder and close each tab.  I based this CustomTabBar class off of Saturn Boy's TeffificTabBar component, so I was able to get the closing tabs functionality for free :)

The real challenge was adding in the dragging functionality of the tabs.  Luckily, the spark TabBar is based off the ListBase class.  This means I could just follow along with how the spark List component does its dragEnabled/dropEnabled functionality.

Take a look at the sample below.
View the sample (right click to view source)






-Dan

17 comments:

  1. Nicely done. Thanks for the example.

    ReplyDelete
  2. Thanks for sharing. When I run your demo code in my environment, I get a null object reference exception at CustomTabBar.as 395. (the close button is null). Also, I don't see where the CustomTabBarButton style is ever applied. (so is the close button ever instantiated?). Obviously, I don't see the close button appear as I do when I run the demo on your blog. Sorry if I'm missing something here, but I'm a Flex newbie.

    ReplyDelete
  3. I am posting this through my phone so this is a shot in the dark, but I am guessing the style is missing. Take a look at the style sheet in my example. I am betting you are missing the styles.

    ReplyDelete
  4. Very nice example. I also tried to integrate it to flex hero. But I still get the 2 errors in CustomTabBarButton.as in line 46 and 62. There stands

    (labelDisplay as Label).right = (val ? 30 : 14);

    The error message is:
    1120: Access of undefined property Label.

    I am new to Flex so I don't know how the handle the error. Do you have any suggestions?

    ReplyDelete
  5. I solved the Problem now I get the same error like Anonymous posted on 01.02.2011

    ReplyDelete
  6. Help!! I'm building an app with 4.5 and keep running into errors with this line of code:

    labelDisplay.right = (val ? 30 : 14);

    I understand what its trying to do... I just can't figure out the work-around. Any ideas on how I might get this to work?

    ReplyDelete
  7. I got it. Put this code in the appropriate spots.

    import spark.components.Label;

    (labelDisplay as Label).right = (val ? 40 : 14);
    (labelDisplay as Label).right = (closeable ? 40 : 14);

    ReplyDelete
  8. @Matthew
    It looks like Adobe changed some stuff in flex 4.5.
    Replace
    labelDisplay.right = (val?30:14);
    with
    Label(labelDisplay).right = (val ? 30 : 14);

    That should fix it.

    ReplyDelete
  9. Hi Dan,
    I'm quite new to Flex, but sofar it's overwhelmingly awesome.
    So I have a freshly installed Adobe Flashbuilder 4.5 with PHP, and I've imported your sourcecode as a new project. But I can't compile it, because it throws the following errors right from the start:
    CustomTabBar.as in /CustomTabBarSample/src/net/flashdan/controls/customtabbar
    1000: Ambiguous reference to dataGroup_rendererAddHandler. line 435 Flex Problem
    1000: Ambiguous reference to dataGroup_rendererAddHandler. line 445 Flex Problem
    1000: Ambiguous reference to dataGroup_rendererRemoveHandler. line 436 Flex Problem
    1000: Ambiguous reference to dataGroup_rendererRemoveHandler. line 446 Flex Problem
    1023: Incompatible override. line 117 Flex Problem
    1023: Incompatible override. line 373 Flex Problem
    1024: Overriding a function that is not marked for override. line 117 Flex Problem
    1024: Overriding a function that is not marked for override. line 373 Flex Problem

    ReplyDelete
  10. Hi Dan, sources is not available, fix it please

    ReplyDelete
  11. I also get Oscar's error. Did you solve the issue?

    ReplyDelete
  12. Guys, to fix:
    1. rename dataGroup_rendererAddHandler function on lines 435,445 to dataGroup_rendererAddHandler2.

    2. rename dataGroup_rendererRemoveHandler function on lines 436,446 to dataGroup_rendererRemoveHandler2.

    This will fix your problems. I will try to update source sometime tonight.

    ReplyDelete
  13. Could you have extended list to get all the drag and drop for free?

    Then added a custom ButtonItemRenderer with a close that you listened to when each element was added, removing each element when it was dispatched?

    ReplyDelete
  14. Tink. You could probably go that route. It might actually be easier. Extending the TabBar class just seemed to be the natural route to go at the time.

    ReplyDelete
  15. Hi Dan, thanks for this component. It is great. One thing though, I am trying to add more functionality to make this more like the tabs in Firefox/browsers. I need to mask the tabs when I am sliding, but when I do that they blink. The drawn graphics flash white, they lose their background colours. Any ideas for workarounds to this problem? It would be great if you could give me some advice, cheers.

    ReplyDelete
  16. Hi, great work, really. I'm googling since a month now for some hint to have the possibility to style individual tabs when i programmatically add children to the tabNavigator(as you have in most updated browsers for example, i think everyone noticed that now each tab has its own color), your code seems to be the nearest to what i need, but i still miss the functionality to style each tab. I've tried by my own using the styleName property on tab creationcomplete handler, but it seems that in some cases (for example when you add a new tab) the bar is redrown and all the stylNames reverted to the one set into the tabBar container, so i have to record all the tabs styles in an array and re-change all the styleNames after the redrow..... this is not the best as you may agree, And this happens both with the adobe TabNavigator-TabBar-Tab, and with the superTab from flexlib, and with the "extended_TabNavigator" i found in google.
    Do you have any ideas/hints to share with me?
    many tahnks

    ReplyDelete
  17. I know this is a quite old thread, can we somehow get the example URL working again? Thanks!

    ReplyDelete