Flex4 - Use ButtonBar to navigate from one .mxml file to another - actionscript-3

Question

I am creating a Windowed Application in Flex3 with Adobe Flash Builder 4.7
I have two .mxml files (Main.mxml and Home.mxml)
In Main.mxml I have ButtonBar, when the user clicks on the Home ButtonBar, I want the user to be redirected to Home.mxml
I have been googling this for awhile now and there is no clear answer on this.
I have looked into ViewStack and TabNavigator and States, I am not sure if that is what I am looking for.
Here is my Main.mxml File
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
applicationComplete="init()"
showStatusBar="false">
<fx:Declarations></fx:Declarations>
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
s|ButtonBar s|ButtonBarButton:upAndSelected,
s|ButtonBar s|ButtonBarButton:overAndSelected,
s|ButtonBar s|ButtonBarButton:downAndSelected,
s|ButtonBar s|ButtonBarButton:disabledAndSelected {
chromeColor: #666666;
color: #FFFFFF;
fontSize: 32;
}
s|ButtonBar {
chromeColor: #000000;
color: #FFFFFF;
fontSize: 32;
bottom: 0;
typographicCase: uppercase;
}
</fx:Style>
<s:ButtonBar width="100%" height="13%">
<mx:ArrayCollection>
<fx:String>Home</fx:String>
</mx:ArrayCollection>
</s:ButtonBar>
</s:WindowedApplication>
and here is my Home.mxml file
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Label text="Here"/>
</s:WindowedApplication>
Please Help

Answer 1

You can approach this issue in several ways. I will elaborate in the one I'm more experienced in.
First, please take a look at the video inside this repository, so you can know what I'm talking about.
This application uses a lateral menu consisting on individual buttons, a similar approach to a ButtonBar.
On the right there's a TabNavigator, which I have manually added some MXML Views on it. Each View is represented as its own .mxml file.
Here's a simplified version of the main file:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:views="views.*">
<s:VGroup left="0" top="0" bottom="0" width="100" horizontalAlign="center">
<s:Image width="60" height="60" source="assets/someicon.png" click="goHome(event)"/>
<s:Image width="60" height="60" source="assets/someicon.png" click="goIcons(event)"/>
</s:VGroup>
<mx:TabNavigator id="myTabNavigator" left="100" right="0" top="0" bottom="0" borderStyle="none" paddingTop="0" tabHeight="0" tabWidth="0" creationPolicy="auto" backgroundAlpha="0">
<views:HomeView />
<views:IconsView />
</mx:TabNavigator>
</s:WindowedApplication>
When a user clicks one of the buttons, the TabNavigator will change its index:
protected function goHome(event:MouseEvent):void
{
myTabNavigator.selectedIndex = 0; //This value will change depending on the clicked button.
}
protected function goIcons(event:MouseEvent):void
{
myTabNavigator.selectedIndex = 1; //This value will change depending on the clicked button.
}
Those 2 functions need to be inside your fx:Script block.
This way you can change the current shown tab in the TabNavigator from your ButtonBar.