状态导航

 

<?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">
 <s:layout>
  <s:BasicLayout/>
 </s:layout>
 <fx:Script>
  <![CDATA[
   
   /*
   package com.icon
   {
   [Bindable]
   public class AppIcon {
   public function AppIcon(){ }  
   [Embed(source="new.jpg")]
   public static var newIcon:Class;
   }
   }
   */
   import mx.events.MenuEvent;
   
   private function changeMenu(e:MenuEvent):void{
    switch(e.label){
     case "New":
      currentState = "newState";
      break;
     case "Open":
      currentState = "open";
      break;
    }
   }
  ]]>
 </fx:Script>
 <s:states>
  <s:State name="State1"/>
  <s:State name="newState"/>
  <s:State name="open"/>
 </s:states>
 
 <fx:Declarations>
  <!-- 将非可视元素（例如服务、值对象）放在此处 -->
  <fx:XMLList id="caidanData">
   <caidan id="File"  icon="newIcon">
    <caidan id="New"/>
    <caidan id="Open"/>
    <caidan id="Save"/>
    <caidan id="Save As..."/>   
   </caidan>
   <caidan id="Edit">
    <caidan id="Undo"/>
    <caidan id="Copy"/>
    <caidan id="Delete"/>
    <caidan id="Select All"/>   
   </caidan>
   <caidan id="Source">
    <caidan id="Remove Right"/>
    <caidan id="Remove Left"/>    
   </caidan>
   <caidan id="Navigate">
    <caidan id="Goto"/>
    <caidan id="Back"/>    
   </caidan>  
  </fx:XMLList>
 </fx:Declarations>
 
 <!-- 显示过度效果 -->
 <s:transitions>
  <s:Transition id="tr1" fromState="*" toState="newState">
   <s:Parallel target="{pOpen}">
    <s:Wipe direction="down" duration="2000"/>
   </s:Parallel>
  </s:Transition>
  
  <s:Transition id="tr2" fromState="*" toState="open">
   <s:Parallel target="{pNew}">
    <s:Wipe direction="left" duration="2000"/>
   </s:Parallel>
  </s:Transition> 
 </s:transitions>
 
 <!-- @表示读取XML中的数据 -->
 <mx:MenuBar y="10" width="266" dataProvider="{caidanData}" labelField="@id" iconField="@icon" horizontalCenter="0" change="changeMenu(event)" width.open="266" x.State1="203" x.newState="203" horizontalCenter.open="0"/>
 <s:Panel includeIn="newState" y="40" width="266" height="319" title="New" horizontalCenter="0" id="pNew">
 </s:Panel>
 <s:Panel includeIn="open" y="40" width="266" height="319" title="Open" horizontalCenter="0" id="pOpen">
 </s:Panel>
</s:Application>