Flex tab navigator Example

Flex Framework TabNavigator

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