how to navigate from one mxml to another mxml in flex3

Question

suppose i have 3 buttons(for example say, productin, marketing, sales ) on my main.mxml.. once i click on one button it should take me to abc.mxml page with production data, once again if i click on second button it should take me to the same abc.mxml but with marketing data. same as for 3rd button also,

how can i achieve this ?

Answer 1

1. you can user tabs with TabNavigator and inclide all 3 mxml's inside it

   • the are not buttons needed and navigation is made automatically http://livedocs.adobe.com/flex/3/html/help.html?content=navigators_4.html

2. you can use a ViewStack where you include all 3 mxml's and on your buttons click you set the viewstack's selectedIndes = "0" , 1 or 2 depending on the button. http://livedocs.adobe.com/flex/3/html/help.html?content=navigators_3.html

Also you may want to check adobe flex help for "Navigator Containers"

Answer 2

Use a TabNavigator

<?xml version="1.0"?>
<!-- Simple example to demonstrate the TabNavigator layout container. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"&gt;

    <mx:Panel title="TabNavigator Container Example" height="90%" width="90%" 
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Label width="100%" color="blue"
            text="Select the tabs to change the panel."/>

        <mx:TabNavigator id="tn"  width="100%" height="100%">
            <!-- Define each panel using a VBox container. -->

            <mx:VBox label="Panel 1">
                <mx:Label text="TabNavigator container panel 1"/>
            </mx:VBox>

            <mx:VBox label="Panel 2">
                <mx:Label text="TabNavigator container panel 2"/>
            </mx:VBox>

            <mx:VBox label="Panel 3">
                <mx:Label text="TabNavigator container panel 3"/>
            </mx:VBox>
        </mx:TabNavigator>

        <mx:Label width="100%" color="blue"
            text="Programmatically select the panel using a Button control."/>

        <mx:HBox>
            <mx:Button label="Select Tab 1" click="tn.selectedIndex=0"/>
            <mx:Button label="Select Tab 2" click="tn.selectedIndex=1"/>
            <mx:Button label="Select Tab 3" click="tn.selectedIndex=2"/>
        </mx:HBox>

    </mx:Panel>
</mx:Application>

The code is copied from the linked page; check the page for a live demo.