flex 3学习小结1

flex 3 学习小结1

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>
  

4 柱型图实例
   <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:Script><![CDATA[
      import mx.collections.ArrayCollection;   //引用数组类
      [Bindable]  
      //定义数据集，数据集的内容为每月的收支情况       
      public var finance:ArrayCollection = new ArrayCollection([
         {Month:"一月", In:2000, Out:1500},
         {Month:"二月", In:1000, Out:200},
         {Month:"三月", In:1500, Out:200},
         {Month:"四月", In:3500, Out:1000},
         {Month:"五月", In:500, Out:800},
         {Month:"六月", In:4500, Out:600},
         {Month:"七月", In:2500, Out:500},
         {Month:"八月", In:1570, Out:300},
         {Month:"九月", In:1000, Out:450},
         {Month:"十月", In:1500, Out:400},
         {Month:"十一月", In:1700, Out:2500},
         {Month:"十二月", In:1800, Out:1500},
      ]);
   ]]></mx:Script>
   <mx:Panel title="柱状图实例">     <!--Panel容器，标题为“柱状图实例”-->
      <!--柱状图组件，也称直方图-->
      <mx:ColumnChart id="myChart" dataProvider="{finance}" >
         <!--定义横坐标，绑定到“finance”数据集中的“Month”上-->
         <mx:horizontalAxis>      
            <mx:CategoryAxis
                 dataProvider="{finance}"
                 categoryField="Month"
                 title="(月份)"
            />
         </mx:horizontalAxis>  
         <mx:series>        <!--数据以柱的形式表示-->
            <!--x轴为月份，y轴表示收入-->
            <mx:ColumnSeries                    
                 xField="Month"
                 yField="In"
                 displayName="收入"
            />
            <!--x轴为月份，y轴表示支出-->
            <mx:ColumnSeries       
                 xField="Month"
                 yField="Out"
                 displayName="支出"
            />
         </mx:series>
      </mx:ColumnChart>
      <!--Legend组件绑定柱状图中的数据名-->
      <mx:Legend dataProvider="{myChart}"/>  
   </mx:Panel>
</mx:Application>

   其中  <mx:ColumnChart id="myChart" dataProvider="{finance}" >定义数据源.

5 一个air的程序,就是本地的flash程序,读本地机器上的文件
   <?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:Script>
  <![CDATA[
       import flash.filesystem.File;  //引用File类
  ]]>
 </mx:Script>
    <mx:Panel width="800" height="600">
      <mx:VBox>
       <mx:HBox>
           <!--添加“FileSystemComboBox”组件，用以显示和选择文件目录-->
        <mx:FileSystemComboBox id="filecmb" directory="{filedg.directory}"

directoryChange="filedg.directory=filecmb.directory;"/>
           <!--添加“Button”组件，单击按钮实现“后退”功能-->
           <mx:Button id="btnBack" label="后退" click="filedg.directory=filedg.directory.parent"/>
       </mx:HBox>
       <!--添加“FileSystemDataGrid”组件，用以显示文件列表-->
     <mx:FileSystemDataGrid id="filedg" width="100%" height="400" directory="{new File('c:/')}"/> 
       </mx:VBox>
    </mx:Panel>
</mx:WindowedApplication>

6  actionscript 3调用javascript
   <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  layout="absolute">
    <mx:Script>
     <![CDATA[
     import flash.external.ExternalInterface;  //引用ExternalInterface类
     public function invokeJavaScript():void
     {
       //调用JavaScript中的“returnTheName”函数
       lblResult.text=ExternalInterface.call("returnTheName",txtName.text);
     }
     ]]>
    </mx:Script>
   <mx:Panel  width="245" height="130" title="ActionScript调用JavaScript">
      <mx:TextInput id="txtName" text="[请输入名字]"/>
      <mx:Button id="btnConnect" label="确定" click="invokeJavaScript()" x="229" y="204"/>
   <mx:Label id="lblResult" text="test" x="205" y="99" width="150" height="80"/>
   </mx:Panel>
</mx:Application>
     javascript

  javascript调用actionscript
   <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  layout="absolute" creationComplete="initApp()">
 <mx:Script>
  <![CDATA[
   import flash.external.ExternalInterface; //引用ExternelInterface类
   //add函数计算从1加到100，并返回结果
   public function add():int
   {
     var i:int;
     var sum:int=0;
     for(i=1;i<=100;i++)
     {
       sum+=i;
     }
     return sum;
   }
   public function initApp():void
   {
     //声明函数名
     ExternalInterface.addCallback("addTo100",add);
   }
  ]]>
 </mx:Script>
</mx:Application>
   在HTML页中调用javascript时
    <button onclick="addMethod()">xxx</button>
   function addMethod()
 {
  var s=JavscriptCallActionScript.addtTo100();
 ..
}

  }