flex 3 学习小结(状态效果篇)

1 登陆+验证码

 

 <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
 <mx:states>
     <!--新建“index”State-->
  <mx:State name="index">
      <!--移除“登录框”-->
   <mx:RemoveChild target="{panel1}"/>
   <!--添加新的组件-->
   <mx:AddChild position="lastChild">
    <mx:Label x="231" y="174" text="欢迎来到主页" fontFamily="Georgia" fontSize="20" />
   </mx:AddChild>
  </mx:State>
 </mx:states>
 <mx:Script>
  <![CDATA[
      import mx.controls.Alert;
      private function initApp():void
      {
       //显示校验码
         lblCheckCode.text=GenerateCheckCode(); 
      }
   private function loginHandle():void
   {
    //空的情况
    if(txtUsername.text==""||txtPassword.text=="")
    {
     Alert.show("请输入完整数据!");
    }
    else
    {
     //合法用户
     if

(txtUsername.text=="Administrator"&&txtPassword.text=="123456"&&txtCheckCode.text.toLocaleLowerCase()

==lblCheckCode.text.toLowerCase())
     {
      currentState="index";
     }
     //登录失败
     else  
     {
      //校验码错误
      if(txtCheckCode.text.toLowerCase()!=lblCheckCode.text.toLowerCase()) 
         {
            Alert.show("校验码错误!");
            //重新生成校验码
            lblCheckCode.text=GenerateCheckCode(); 
         }
         //用户名或密码错误
         else  
        Alert.show("用户名或密码错误!");
     }
    }
   }
   private function resetHandle():void
   {
    txtUsername.text="";
    txtPassword.text="";
    txtCheckCode.text="";
   }
            
            //生成随机码
   private function GenerateCheckCode():String
   {
    //初始化
    var ran:Number;
    var number:Number;
    var  code:String;
    var checkCode:String ="";
    //生成四位随机数
    for(var i:int=0; i<4; i++)
    {
     //Math.random生成数为类似为0.1234
     ran=Math.random();
     number =Math.round(ran*10000); 
     //如果是2的倍数生成一个数字
     if(number % 2 == 0)
       //"0"的ASCII码是48  
       code = String.fromCharCode(48+(number % 10)); 
     //生成一个字母
     else  
       //"A"的ASCII码为65
       code = String.fromCharCode(65+(number % 26)) ;
     checkCode += code;
    }
    return checkCode;
   }

  ]]>
 </mx:Script>
 <mx:Panel x="108" y="71" width="349" height="257" layout="absolute" title="用户登录" fontFamily="Georgia" 

fontSize="12" id="panel1">
  <!--  "用户名"标签  -->
  <mx:Label x="41.5" y="33" text="用户名"/> 
  <!--  "密码"标签  -->   
  <mx:Label x="42.5" y="81" text="密码"/> 
  <!--  "用户名"输入框  -->    
  <mx:TextInput x="94.5" y="33" id="txtUsername"/>  
  <!--  "密码"输入框  -->
  <mx:TextInput x="95.5" y="81" id="txtPassword" displayAsPassword="true"/>
  <!--  "登录"按钮  --> 
  <mx:Button x="82.5" y="159" label="登录" id="btnLogin" click="loginHandle()"/> 
        <!--  "重置"按钮  --> 
  <mx:Button x="181.5" y="159" label="重置" id="btnReset" click="resetHandle()"/> 
  <!--  "校验码"标签  --> 
  <mx:Label x="165.5" y="125" id="lblCheckCode" width="42.5" color="#377CD0"/>
  <mx:LinkButton x="216" y="123" label="看不清楚?" id="linkbtnReGenerate" 

click="lblCheckCode.text=GenerateCheckCode();" fontFamily="Georgia" fontSize="11"/>
  <mx:Label x="39.5" y="123" text="校验码"/>
  <!--  "校验码"输入框  --> 
  <mx:TextInput x="96.5" y="121" id="txtCheckCode" width="61" maxChars="4"/>
 </mx:Panel>
</mx:Application>

 

 注意,flex 3里,没新窗口的概念,因此有象flash中的state状态的概念,因此在状态面板中可以新建状态state即可,
比如这里建立了index的状态,写下登陆后的主页.并且用
 currentState="index";去跳转了.

 

2 菜单导航
   基本的:

 <mx:MenuBar id="myMenuBar" labelField="@id" showRoot="false" width="293" horizontalCenter="0" y="24"  

change="menuClickHandle(event)">
        <mx:XMLList>     <!-- XMLList标签表示以xml形式存储数据 --> 
            <menuitem  id="Menu1" >  <!-- 菜单项，以关系来表示菜单项与子菜单项 -->
                <menuitem id="SubMenu1" type="radio" groupName="one"/>
                 <menuitem id="SubMenu2" type="radio" groupName="one"/>
            </menuitem>
            <menuitem id="Menu2" />
            <menuitem id="Menu3" />
            <menuitem id="Menu4" >
                <menuitem id="SubMenu3" type="radio" groupName="two"/>
                <menuitem id="SubMenu4" type="radio" groupName="two"
                    selected="true"/>
                <menuitem id="SubMenu5" type="radio" groupName="two"/>
            </menuitem>
        </mx:XMLList>
还可以切换状态,根据菜单的事件
  import mx.events.MenuEvent;       //引用MenuEvent类
   private function menuClickHandle(e:MenuEvent):void
   {
    if(e.label=="SubMenu1")       //单击

“SubMenu1”时切换至“index1”
      currentState="index1";
    else if(e.label=="SubMenu2")     //单击“SubMenu2”时

切换至“index2”
      currentState="index2";
    else if(e.label=="SubMenu3")     //单击“SubMenu3”时

切换至“index3”
      currentState="index3";
    else if(e.label=="SubMenu4")     //单击“SubMenu4”时

切换至“index4”
      currentState="index4";
    else if(e.label=="SubMenu5")     //单击“SubMenu5”时

切换至“index5”
      currentState="index5";
   }

 

3  状态效果改变,比如

 

<mx:transitions>
        <mx:Transition id="myTransition1" fromState="*" toState="index1">
            <mx:Parallel target="{myVBox1}">
                <mx:WipeDown duration="2000"/>
                <mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="2000"/>
            </mx:Parallel>
        </mx:Transition>
....
</mx:tranmsitions>