跟我StepByStep学FLEX教程------Demo1之开始（原创）

跟我StepByStep学FLEX教程------Demo1之开始（原创）

 

说明：该文系作者原创，请勿商用或者用于论文发表，转载必须经作者同意并且注明出处。

 

      开始真正的做一个有AS3语法的Demo，这个Demo作者没想好主题定义为什么，所以就叫开始吧。

      由于是文字描述，所以可能会有一些地方描述的不如讲课方式更清楚（作者尽量哦），如果读者有什么不明白的，可以发表评论，作者尽量做到一一回复，以后亦如此。

      首先使用可视化组件编写如下界面，命名各控件名称以及事件名称：

     

        然后编写代码，如下：

 <mx:Script>
   <![CDATA[
       //初始化
    internal function InitLs():void{
     var srcArr:Array = new Array();
     srcArr.push("China Soft");
     srcArr.unshift("BOCO");
     srcArr.unshift("PCCW");
     SrcLs.dataProvider = srcArr;
     
     var desArr:Array = new Array("PM", "PL", "SE");
    DesLs.dataProvider=desArr;
   }
   
   //循环初始化
   internal function ForInitLs():void{
    var cycleArr:Array = new Array();
    
    for(var i:Number = 0; i < 3; i++){
     cycleArr.push("TestLs" + i);
    }
    
    DesLs.dataProvider = cycleArr;
   }
   
   //拖拽效果
   internal function MovLs():void{
    SrcLs.dragEnabled = true;
    SrcLs.dropEnabled = true;
    SrcLs.allowMultipleSelection = true;
    
    DesLs.dragEnabled = true;
//    DesLs.dropEnabled = true;
    var testDebStr:String = new String("Drag Success");
    
    trace(testDebStr); //在flash环境下输出调试信息;
   }
   ]]>
  </mx:Script>

  
  <mx:List x="54" y="10" backgroundColor="#ED8888" height="264" width = "200" id="SrcLs"></mx:List>
  <mx:List x="391" y="10" height="264" width = "200" backgroundColor="#3AA2C4" id="DesLs"></mx:List>
  <mx:Button x="278.5" y="134" label="循环初始化" width="91" id="ForInitBtn" click="ForInitLs()"/>
  <mx:Button x="278.5" y="216" label="拖拽效果" width="91" id="LeftMovBtn" click="MovLs()"/>
  <mx:Button x="278.5" y="54" label="初始化" fontSize="12" id="InitBtn" click="InitLs()" width="91"/>

      这段代码简单分析一下（如有没有讲到还不明白的可以留评论，作者尽量会一一回复）：

      <mx:Script>
      <![CDATA[  //如果使用过AJAX技术的DWR框架（dwr.xml配置），看见这个会觉得很熟悉

      ......//这儿就是写AS3语法的编码    

      ]]>
      </mx:Script>
     

      定义方法：如果读者用过Delphi和Java的话，你会感觉就是这两个的综合体，呵呵

      返回值不是在前边，而是在后边，方法前边有function的显示定义

       internal function ForInitLs():void{
            var cycleArr:Array = new Array(); //变量前边有var，Delphi是吧？
    
            for(var i:Number = 0; i < 3; i++){ //for循环这个大家很熟悉吧
                 cycleArr.push("TestLs" + i);
       }
      

       初始化这个Demo是使用按钮触发的，当然可以在页面的初始化creationComplete事件中触发，这儿用按钮主要是为了让这个Demo更加直观一点。

      拖拽效果主要是让读者感受到可视化组件的功能，很不错吧，而且很简单。

     

     在这个拖拽方法中有以下这个方法：

      trace(testDebStr); //在flash环境下输出调试信息;
      这个方法需要在调试环境中运行才有效果，而且需要安装Flash Player，如果没有安装，会提示如下信息：

       

       然后下载下图的蓝色部分，安装即可：
 

         然后在调试环境下运行，控制台就会出现调试信息：

       很自然的，读者也可以将调试信息输出到自定义页面的文本框中，这儿就不具体介绍了，很简单可以实现。

       DEMO运行效果如下，读者可以按照代码编写一下，运行一下，就会对FLEX的兴趣越来越大了
 

 
      从这个Demo开始，将在后边几讲开始结合DEMO主要对AS3的重点语法以及MXML的一些知识进行讲解，为后边的高级应用打下坚实的基础。StepByStep，呵呵