[原创]FLEX HSilder 数据筛选设备管理系统附程序

关键字: silder 筛选 flex

这是 设备管理系统 中的一小部分,主要展示的是用hslider 实现数据的筛选,以及用move 实现组件的移动。

主要功能有这么几个

   1,用combobox实现,下拉类表

   2,关键字的模糊搜索。

   3,自定义事件类。

    4,用HSLIDER实现数据的筛选

   5,用move实现组件的移动

    6. 简单的登录框

   7. httpService 加载外部 xml

下面主要说明一下,筛选移动的想法,有其他的问题,望大家交流,程序在附件,如果xml 加载不了要更改一下flash 的信任域.zip的为工程,直接导入就行

(效果如下图)

移动筛选

一.解决组件的布局,下面红色的是 Canvas 画布,好处是用的{jd1}坐标,方便后面用move移动。

二.选定数据源,关键代码如下

  1. private function createcovetdisplay():void{   
  2.          coverdisplays=new Array();   //定义一个新的数组用于存放组件的引用        
  1. var cx:int=0;   
  2. var cy:int=0;   
  3. var rx:int;   
  4. var ry:int;//定义四个整形变量,用于计算{jd1}位置   
  5. for(var i:int=0;i<equipments1.length;i++)//equipments1储存的是数据源   
  6. {   
  7.    var coverdis:coverdisplay = new coverdisplay();//coverdisplay 为要展示的组件   
  8.         coverdisplays[i] = coverdis; //把组件的引用,给数组中方便以后的查找   
  9.         coverdisplays[i].showInAutomationHierarchy = true;   
  10.         coverdis.coverdata=equipments1[i];//给数据   
  11.         ry=i/5;   
  12.         cy=10+ry*130;   
  13.         coverdis.y=cy;   
  14.         coverdis.x=-100;   
  15.         canvas1.addChild(coverdis);//加到画布中增加组件   
  16.         coverdis.addEventListener(coversevent.SHOW,goodsdetails);//coversevent,为自定义事件在下面说明   
  17.         rx=i%5;   
  18.         if(rx==0) cx=16;   
  19.         if(rx==1) cx=192;   
  20.         if(rx==2) cx=368;   
  21.         if(rx==3) cx=544;   
  22.         if(rx==4) cx=720;             
  23.         var move:Move= new Move(coverdis);   
  24.                     move.xTo =cx;   
  25.                     move.duration=2000;   
  26.                     move.play();      
  27.           
  28. }   

上面的代码为初始化,就是说确定的组件在容器中的位置。因为向画布中添加东西要确定位置,即:x,y 所以要进行计算。

   方法是

      1通过除法的商 和余数的方法, 例如 一排要4个就要/4 商是几,就是在第几行,余数是几就在第几列。

      2由于数组时从0开始的,故余数为0是{dy}列,1为第二列,例如数组a[]长度是5,{zg}的位是a[4] 4/4商1余0,所以在第二行{dy}列。

      3根据画布容器的大小计算xy的位置,也就是根据长和宽。计算位置的对应关系。

      4用 Move 移动组件使移到相应的位置。

需要注意的几个问题是:

       找到每个组件的id ,由于用for循环所以每个组件的id是一样的,其实不然,我们每生成一个组件,都把它引用在一个数组中,每个组件的内容是不一样的

    所以要用的时候只要在数组中寻找相应的属性就行。

       需要做的就是,在组件中派发一个时间,里面要有相应的参数,说明我是谁,

    如    click="dispatchEvent(new coversevent(coversevent.SHOW,coverdata))" 在组件中派发了这么一个事件。

    当然这是一个自定义事件 ,在src 中创建一个ActionScript Class 代码如下。

  

  1. package //注意包的位置   
  2. {   
  3.      import flash.events.Event;   
  4.        
  5.      public class coversevent extends Event //继承event 类   
  6.      {      
  7.          public static const SHOW:String = "show";//定义事件类型   
  8.          public var coverdata:Object;// 传递的参数,注意如果属性是对象的话,需要重写clone()函数   
  9.            
  10.          public function coversevent(type:String, coverdata:Object)   
  11.          {   
  12.                                  super(type);   
  13.                                   this.coverdata= coverdata;   
  14.                                   }   
  15.            
  16.          override public function clone():Event    //重写clone 函数   
  17.                                  {   
  18.                                 return new coversevent(type,coverdata);   
  19.                                  }   
  20.            
  21.      }   
  22. }  

   为什么要这样做,as 3的事件机制我们简单的说就是,监听和接受,但是event 里没有能传递参数的属性。要想传递参数,就要自定义事件类型。

   这样在事件派发的时候就能够传递想要的数据。

三,有Hslider 实现数据的筛选

    hslider 的说明

  1. <mx:HSlider   id="slider" x="93" y="29" width="581"  
  2.           minimum="0"   
  3.                                   maximum="1000"   
  4.                                   values="[0,1000]"   
  5.                                   labels="[0,500,1000]"   
  6.                                   thumbCount="2"   
  7.                                   showTrackHighlight="true"   
  8.                                   snapInterval="1"   
  9.                                   tickInterval="100"   
  10.                                   liveDragging="true"   
  11.                                   change="hsliderchange(event)"/>  

   应该能看明白什么意思 change 属性只是xx一个函数,实际上没有筛选,

    equipments1.filterFunction=sliderFilterFunc; filterFunction 为筛选属性,它是布尔型,前面 equipments1的类型为ArrayCollection,所以要设计函数

  1. private function sliderFilterFunc(item:Object):Boolean {   
  2.                  var minSlider:uint = slider.values[0];   
  3.                  var maxSlider:uint = slider.values[1];   
  4.                  if ((item.price >= minSlider) &&   
  5.                              (item.price <= maxSlider)) {   
  6.                      return true;   
  7.                  } else {   
  8.                      return false;   
  9.                  }   
  10.              }   

   完成对价格属性的筛选

四,实现对筛选后的移动

     其实已经很简单了,方法是,要知道筛选后增加了什么,删除了什么?在一次滑动中,显然只可能是增加,或删除,不可能是同时增加删除。

    那么需要有两个数组分别储存原有的数据,和增加或删除的数据,用分支语句分两种情况增加或删除,然后把剩下的没变化的组件移到新的位置上。

程序在附件,rar 的 如果xml 加载不了要更改一下flash 的信任域.zip的为工程,直接导入就行



郑重声明:资讯 【[原创]FLEX HSilder 数据筛选设备管理系统附程序】由 发布,版权归原作者及其所在单位,其原创性以及文中陈述文字和内容未经(企业库qiyeku.com)证实,请读者仅作参考,并请自行核实相关内容。若本文有侵犯到您的版权, 请你提供相关证明及申请并与我们联系(qiyeku # qq.com)或【在线投诉】,我们审核后将会尽快处理。
—— 相关资讯 ——