Introduction:
Under mx.containers package TabNavigator class is defined.
Under TabNavigator class TabNavigator container is defined.
Tab Navigators are Navigator containers of flex.
In the following example, three tabs have been created using flex Layout container VBox. We also used the wipe effect behavior..
Example:
Step 1:
Create project named as ValidatorPro
Step 2:
Create ValidatorPro.mxml
Step 3:
Include following coding into the ValidatorPro.mxml
< ?xml version="1.0" encoding="utf-8"? >
< s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" >
< fx:Declarations >
< mx:WipeLeft id = 'wipe_left'/ >
< mx:WipeUp id="wipe_up"/ >
< /fx:Declarations >
< mx:Panel title = 'Tab Navigators' width = '100%' height = '100%' >
< mx:TabNavigator width = '100%' height = '100%' >
< mx:VBox label = 'Panel 1' showEffect = '{wipe_left}' >
< mx:Text text = 'You switched Panel1 Tab ' color = '#996600'/ >
< /mx:Vbox >
< mx:VBox label = 'Panel 2' showEffect = '{wipe_left}' >
< mx:Text text = 'You switched Panel2 Tab' color = '#FF9900'/ >
< /mx:Vbox >
< mx:VBox label = 'Panel 3' showEffect = '{wipe_up}' >
< mx:Text text = 'You switched Panel3 Tab' color = '#9966CC'/ >
< /mx:Vbox >
< /mx:TabNavigator >
< /mx:Panel >
< /s:Application >
Step 4:
Run the Application
Step 5:
Get the output like below
