Flex----控制运行状态

    以一个登陆和登出为例，控制panel的状态。

<?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"
               xmlns:components="components.*" currentState="login">

    <fx:Script>
        <![CDATA[
            protected function login_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                
            }
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="login"/>
        <s:State name="logout"/>
        
    </s:states>
    
        <s:Panel includeIn="login" x="119" y="271"  height="200" title="登陆" width="243">
        <s:TextInput x="74" y="10"/>
        <s:Label x="6" y="10" text="账号" width="43" height="22" fontSize="14" textAlign="right" verticalAlign="middle"/>
        <s:Label x="21" y="48" text="密码" fontSize="14" height="25" verticalAlign="middle"/>
        <s:TextInput x="75" y="51"/>
        <s:Button x="21" y="105" label="登陆" id="login" click="currentState='logout'"/>
        <s:Button x="133" y="105"  label="取消"/>
    </s:Panel>
    <s:Panel includeIn="logout" 
             
             x="385" y="271" 
             
             width="250" 
             
             height="200" 
             
             title="用户信息">
        
        <components:imageDisplay 
            
            imagefile="image2.jpg" 
            imagelabel="flower"
              width="131" height="107" />
        
        <s:Button x="158" y="136" 
                  
                  label=" 注 销 " 
                  
                  id="logout" 
                  
                  click="currentState='login'"/>
        
    </s:Panel>
    

</s:Application>

 

说明：

       Panel的includeIn属性：设置Panel所属的状态，它还有一个属性：excludeFrom，表示不属于的状态，多个用逗号隔开。

       Panel的click=”currentState=’login’”属性表示，单击触发currentState事件，事件将Panel的状态切换到login状态。

       设置默认启动状态可以，在Design模式下，选择一个状态，右击“edit”，然后将：Set as Start Status 勾选即可。 

      附程序中所调用的image组件代码：

  

<?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" >
    
    <fx:Script>
        <![CDATA[
            [Bindable]
        public    var imagefile:String;
            [Bindable]
        public    var imagelabel:String;
            
        ]]>
    </fx:Script>
    
    <mx:Image  source="data/{imagefile}"  width="133" height="133" x="5" y="5"/>
    <s:Label    text="{imagelabel}" width="133" height="23"  textAlign="center" fontSize="16" fontFamily="Times New Roman" x="10" y="141" verticalAlign="top"/>
</s:Application>

效果图：

                  login状态                                         logout状态