FLEX4 - 使用按鈕欄從一個文件的.mxml導航到另一個

Question

我創造了Flex3與窗口式應用程序的Adobe Flash Builder的4.7

我有兩個的.mxml文件（Main.mxml和Home.mxml）

在Main.mxml我有按鈕欄，當上了首頁按鈕欄，用戶點擊，我希望用戶被重定向到Home.mxml

我一直在谷歌上搜索這一段時間，現在並沒有明確的答案在這。

我已經看過ViewStack和TabNavigator和國家，我不知道如果這是我正在尋找。

這裏是我的Main.mxml文件

<?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> 

，這裏是我的Home.mxml文件

<?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> 

請幫助

Answer 1

您可以通過多種方式處理這一問題。我會詳細介紹一個我更有經驗的人。

首先，請看看repository裏面的視頻，這樣你就可以知道我在說什麼了。

此應用程序使用由各個按鈕組成的橫向菜單，與ButtonBar類似。

在右邊有一個TabNavigator，我已經在其上手動添加了一些MXML視圖。每個視圖都表示爲它自己的.mxml文件。

這裏的主文件的簡化版本：

<?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> 

當用戶點擊一個按鈕，與TabNavigator將改變其索引：

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. 
} 

這2個功能，需要在裏面你的fx：腳本塊。

這樣，您可以從ButtonBar更改TabNavigator中當前顯示的選項卡。