Levels of Experience

Beginner

Intermediate

Advanced

---

Related Examples

Tab Navigation - Beginner

The Tab Navigation component is a built in container in Adobe Flex. The TabNavigator container exte...
Click for more

Accordian with Change Event

MXML Accordian component

The accordian component has 3 children. The 3 children are the 3 VBoxs with labels. Each label corresponds to the title of the accordian tab.

 <mx:Panel title="TabNavigator Container" layout="vertical" width="75%" color="0xffffff" borderAlpha="0.15" 
    	height="210" horizontalAlign="center">
    	<mx:Accordion id="myAccordian" color="0x000000" width="100%" height="100%">
    		<mx:VBox label="Question 1">
    			<mx:Label text="This is the answer to question 1!" />
    		</mx:VBox>
    		<mx:VBox label="Question 2">
    			<mx:Label text="This is the answer to question 2!" />
    		</mx:VBox>
    		<mx:VBox label="Question 3">
    			<mx:Label text="This is the answer to question 3!" />
    		</mx:VBox>
    	</mx:Accordion>
    </mx:Panel>

You can pass an event object, which contains information about the event, from the component to the event listener. For the Accordion container, the event object passed to the event listener for the change event is of class IndexChangedEvent. You can write your event listener to access the event object, as the following example shows:

<mx:Script>
    	<![CDATA[
    		import mx.events.IndexChangedEvent;
    		import mx.controls.Alert;
    		private function init():void{
    			//adding the change event to the accordian list
    			myAccordian.addEventListener(Event.CHANGE,myFunction);
    		}
    		private function myFunction(evt:IndexChangedEvent):void{
    			//Remember that the child list is 0 based. 
    			Alert.show(evt.newIndex.toString());
    		}
    	]]>
    </mx:Script>