Now, Let's look at a more real world example. In the Sample1.mxml I've created a Panel which has layout "horizontal". This Panel includes two components. One is "Accordion" another is "TabNavigator". For Accordion, an Alert message box will pop-up when you click on the menu. Like the other languages, Flex is also event-driven. Therefore, the "click" event will be trigger when you do mouse-click on the menu. And it will call the 'displayMe' method by define and pass the MouseEvent as parameter into the 'displayMe' function. Please take a look the function carefully. All it does is take the 'e' MouseEvent object and trying to get the 'text' attribute and display it. So, the 'e.currentTarget' represents the menu that you just clicked on. you may wonder how do I know what object (MouseEvent in this case) will be passed as parameter? Check the Flex API that associates to the Label click event and you should know what object is passed in. That's easy, right?
For the component TabNavigator, we have two Panels under it. Of course, you can use different containers other than Panel. However, I won't suggest you should have too many panels under TabNavigator since that will increase the memory usage as well as loading time. We will get into the memory issue later once we have better understanding of Flex.
Basically, TabNavigator creates indexes for you by the order you place your components inside of TabNavigator which is called 'selectedIndex'. Of course, this 'selectedIndex' can be selected by programmatically. E.g. "tn.selectedIndex=1" which 'tn' is the id for that TabNavigator component you created.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import flash.events.MouseEvent;
private function displayMe(e:MouseEvent):void {
Alert.show('You click ' + e.currentTarget.text);
}
]]>
</mx:Script>
<mx:Panel layout="horizontal">
<mx:Accordion width="200" height="200">
<mx:VBox label="Accordion Pane 1" width="100%" height="100%" >
<mx:Label text="Menu 1" click="displayMe(event)"/>
<mx:Label text="Menu 2" click="displayMe(event)"/>
</mx:VBox>
<mx:VBox label="Accordion Pane 2" width="100%" height="100%" >
<mx:Label text="Menu 3" click="displayMe(event)"/>
<mx:Label text="Menu 4" click="displayMe(event)"/>
</mx:VBox>
</mx:Accordion>
<mx:TabNavigator width="200" height="200">
<mx:Panel label="Tab 1" width="100%" height="100%">
<mx:Label text="Inside Tab 1" />
</mx:Panel>
<mx:Panel label="Tab 2" width="100%" height="100%">
<mx:Label text="Inside Tab 2" />
</mx:Panel>
</mx:TabNavigator>
</mx:Panel>
</mx:Application>
Link to the source code.
http://mail.njccps.org/files/Sample1.mxml
Thanks,
Nelson
| Attachment | Size |
|---|---|
| Sample1.mxml | 1.1 KB |
| Sample1.swf | 233.55 KB |
