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?
#1 by Tink on January 23, 2008 - 11:41 am
Quote
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 by Tink on January 23, 2008 - 11:44 am
Quote
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 by Anuj Gakhar on January 23, 2008 - 1:35 pm
Quote
@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 by Tink on February 7, 2008 - 1:32 pm
Quote
IndexChangedEvent.CHANGE will be more useful
#5 by Anuj Gakhar on February 7, 2008 - 1:59 pm
Quote
Thats the confusion I think.
Flex gets confused between Event.CHANGE and indexChangedEvent.CHANGE because of the same names.
#6 by Tink on February 7, 2008 - 2:23 pm
Quote
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 by Anuj Gakhar on February 7, 2008 - 5:06 pm
Quote
Tink, thats a neat explanation. Thanks.
#8 by AndyChou on April 12, 2008 - 9:58 am
Quote
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 by Fernando Madruga on April 20, 2008 - 6:11 pm
Quote
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 by Tink on April 20, 2008 - 10:09 pm
Quote
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 by Anuj Gakhar on April 21, 2008 - 8:14 am
Quote
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 by fineglow on April 30, 2008 - 7:02 pm
Quote
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 by Manuel Guzman on August 1, 2008 - 8:28 am
Quote
Thank you…for the proper event and then introducing me to recaptcha…
#14 by JC on December 12, 2008 - 9:20 pm
Quote
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 by Tink on December 15, 2008 - 12:25 pm
Quote
Can you put a simplified example up with the source?
#16 by Anuj Gakhar on December 20, 2008 - 1:00 pm
Quote
@JC, It would help if we have some sample code to look at. Cheers.