Wednesday, September 15, 2010

TabBar buttons with hand cursor (Flex 3)

It's a small thing really, but I haven't seen it posted anywhere, so I thought I'd share.

PROBLEM:
You have a TabBar and you may want a hand cursor on mouseover of unselected tabs (the currently selected tab should keep showing a regular arrow cursor).

SOLUTION:
Extend TabBar, and -
  • Override resetNavItems() - adding a loop that also sets a hand cursor on all buttons.
  • Override hiliteSelectedNavItem()  - reset the cursor to a hand cursor on the currently selected tab. Select the new tab (by calling super.hiliteSelectedNavItem) and then clear the hand cursor from that tab.
  • Override public get dataProvider() just adding a call to hiliteSelectedNavItem(selectedIndex).
    The reason for that is that those other two methods are only called as a response to user interaction (clicking on tabs). We want to set the cursors as soon as the tabs are created, assuming the first tab is selected.

I'm pretty sure it's not the most efficient way of doing it, but hey - it works.
    Source code here.

    No comments:

    Post a Comment

    DermaRoller