跟我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，呵呵

 

 

 

 

 

评论

7 楼 娇雨zj 2013-10-31  

你好，我才学习flex！请问实现拖拽的时候 可以达到这个效果吗？
就是拖拽了后面的"PM“到"SE"之后，可以把原有的"PM"删掉只显示在"SE"后面的一个"PM"吗？

6 楼 feifeiyu1000 2011-09-16  

不知道这个拖拽效果是什么样的？

5 楼 purpen 2011-01-09  

flex4 list数据源形式必须为slist
声明为如下：
var srcArr:ArrayCollection = new ArrayCollection();

4 楼 tongliaozhang 2009-12-18  

真郁闷 刚刚清理一下工程就不报错了 呵呵 还是来感谢一下你的教程呵呵 辛苦辛苦~~

3 楼 tongliaozhang 2009-12-18  

我在做这个例子的时候 mxml提示类不能嵌套 我也找不到在哪有问题啊 能帮我解答一下么？

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="1024" height="700">
<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 clyleArr:Array=new Array();
  for(var i:Number=0;i<3;i++){
  clyleArr.push("TestLs"+i);
  }
 
  DesLs.dataProvider=clyleArr;
}

//拖拽效果
internal function MovLs():void{
  SrcLs.dragEnabled=true;
  SrcLs.dropEnabled=true;
  SrcLs.allowDragSelection=true;
 
  DesLs.dragEnabled=true;
  DesLs.dropEnabled=true;
  var testDebStr:String=new String("Drag Success");
  trace(testDebStr);
}
]]>
</mx:Script>

<mx:List x="19" y="20" width="110" height="179" id="SrcLs"></mx:List>
<mx:List x="236" y="20" width="116" height="179" id="DesLs"></mx:List>
<mx:Button x="147" y="150" label="拖拽" textAlign="center" width="81" id="LeftMovBtn" click="MovLs()"/>
<mx:Button x="147" y="101" label="循环初始化" width="81" id="ForInitBtn" click="ForInitLs()"/>
<mx:Button x="147" y="49" label="初始化" id="InitBtn" width="81" click="InitLs()"/>
</mx:Application>

谢谢 最近正在看你的pdf呢

2 楼 smartzxy 2009-06-06  

博客里不是可以添加flash嘛，把demo打包成swf文件插进教程里不是更直观吗？我看到CSDN上很多flex文章都是这么做的，看文章的同时就能体验效果了……

1 楼 dongqdong 2009-04-02  

谢谢写得很好适合新手一步一步学习，我以前粗粗得学过点现在跟着您来学习了，呵呵更新必看！