Possible bug with TabNavigator?

On January 22, 2008, in Flex, by Anuj Gakhar

Ok, I have spent quite some time on this now and I am getting inclined towards the thinking that this might actually be a bug.I have a TabNavigator component in my code and I want to be able to run some code each time a particular tab is clicked. The obvious way to do that is add an event listener for the IndexChanged Event to the TabNavigator on the tabIndexChange property. Well, I did that and it doesn’t seem to work. I also tried the childIndexChange event listener and that didn’t work as well.

For demonstration purpose, I created this file which has event listeners for both tabIndexChange and childIndexChange. None of these seem to work.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">

<mx:Script>

<![CDATA[
import mx.events.IndexChangedEvent;
import mx.controls.Alert;

private function onChildIndexChange(event:Event):void
{
Alert.show("here");
}
private function onTabIndexChange(event:Event):void
{
Alert.show("there");
}

]]>
</mx:Script>

<mx:TabNavigator id="tbNav" width="100%" childIndexChange="onChildIndexChange(event)"
tabIndexChange="onTabIndexChange(event)">
<mx:VBox label="Accounts" width="300" height="150">
</mx:VBox>
<mx:VBox label="Stocks" width="300" height="150">
</mx:VBox>
<mx:VBox label="Futures" width="300" height="150">
</mx:VBox>
</mx:TabNavigator>

</mx:Application>

Anyone else face any similar situation?

Tagged with:  

20 Responses to Possible bug with TabNavigator?

  1. Tink says:

    Your listening to the incorrect events, you should be listening to Event.CHANGE.

    – change -Dispatched when the selected child container changes.

    tabIndexChange, would be fired when the tab index vale (i.e. hitting tab on your keyboard), is chang, childIndexChange is dispatched when you change the display index’s of the children, i.e. change the order they are displayed.

  2. Tink says:

    Just to clarify, tabIndexChange is when the value for the order at which the component gets focus as you tab through components using your tab key on your keyboard.

  3. Anuj Gakhar says:

    @Tink, I am sure I tried that before. That seems to work. However, the code I gave above was a demonstration only. In my original code, I was creating these child vboxes on the fly within actionscript and any event didnt seem to work in that case. I will try again. Thanks for pointing that out.

  4. Tink says:

    IndexChangedEvent.CHANGE will be more useful

  5. Anuj Gakhar says:

    Thats the confusion I think.
    Flex gets confused between Event.CHANGE and indexChangedEvent.CHANGE because of the same names.

  6. Tink says:

    Flex doesn’t get confused, but I see how users could. The event class that is dispatched is an IndexChangedEvent, which is a subclass of Event.

    The type of event dispatched is “change”, so both Event.CHANGE and IndexChangedEvent.CHANGE will work fine, but when u pick up the event, if you cast it to Event, u won’t be able to access the properties of IndexChangedEvent such as oldIndex or newIndex.

    There is no confusion or errors on the part of Flex though.

  7. Anuj Gakhar says:

    Tink, thats a neat explanation. Thanks.

  8. AndyChou says:

    Need 3 Flex engineers in New York City:
    1. Work part time or full time with us.
    2. Good at Adobe Flex technology.
    3. Please contact us for other requirement and details.
    Our website is http://www.busycode.com

  9. Flex *is* a bit more confusing than needed to be! Why list so many events on each component if many simply don’t ever get called? I was playing around for a while with a tabNavigator before resorting to check the web (and this site in particular). Even though the proper answer was not given for my problem (acting on a tab change event), I eventually managed to get there from some tips here. It appears that the event I was looking for is simply “change”…

  10. Tink says:

    definitely best off typing it as…

    IndexChangedEvent.CHANGE

    It’s confusing like anything else you don’t know or haven’t used before. Once used it makes perfect sense. when the Index in your TabNavigator changes it fires a ‘IndexChangedEvent.CHANGE’. That makes perfect sense to me.

  11. Anuj Gakhar says:

    I have seen more than a few people getting confused with this. Many wouldnt realize in first instance that which event they should cast to when they pick it up. It would have been better if the event was called indexChanged or something on those lines rather than a duplicate name CHANGE.

  12. fineglow says:

    Thanks for your post. I had a same problem. I used ‘TabIndexChange’ event, but it didn’t work. So, appreciating to your post, I use ‘Chang’ event and solve my problem. 🙂

  13. Thank you…for the proper event and then introducing me to recaptcha…

  14. JC says:

    I have run into an issue with the CHANGE event for the TabNavigator.

    I have a TabNavigator with several Canvas children that each contain form elements. When the user clicks to go to the next tab, the CHANGE handler calls some validation. If the validation returns false, then the SelectedIndex is set back to the previous tab. This works fine, but once the user fixes his mistakes and clicks to go to the next tab again, the CHANGE event does not fire. For example, they are on tab 0 and click on tab 1, if they didn’t fill out everything on tab 0, the CHANGE event sets the SelectedIndex back to 0 and displays an Alert. This works. However, once they fill out everything on tab 0 and click on tab 1 again, tab 1 is displayed, but the CHANGE event does not fire.

    Any ideas?

    Thanks,
    JC

  15. Tink says:

    Can you put a simplified example up with the source?

  16. Anuj Gakhar says:

    @JC, It would help if we have some sample code to look at. Cheers.

  17. Thanks. These comments solved my problems.

  18. Tavo says:

    Hi. Good post. My problem is that i nned to capture the IndexChangedEvent.CHANGE but at enter, look this line:
    tabNav.addEventListener(IndexChangedEvent.CHANGE, functionTest, true);
    The last boolean value, indicate that i need to capture before change the tab, but don’t work, because the function “functionTest” receive a Event (not a IndexChangedEvent) and the parameters newIndex, oldIndex are lost. Anyone know how to do this, without an MouseEvent.CLICK ?
    Thanks

  19. tom says:

    Thanks for your replies.

    It was a bit irritating to deal with it. Something was really odd with TabNavigator class in Flex 3. I have had some issues with indexes adding children at concrete positions – “addChildAt” worked strangely for me. Anyway, thanks for your help in this particular case.

    • Yury Euceda says:

      Another way in doing this is stopping the propagation of chnage event inside tabNavigator’s children

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 446 other subscribers

© 2011 Anuj Gakhar
%d bloggers like this: