这是 设备管理系统 中的一小部分,主要展示的是用hslider 实现数据的筛选,以及用move 实现组件的移动。
主要功能有这么几个
1,用combobox实现,下拉类表
2,关键字的模糊搜索。
3,自定义事件类。
4,用HSLIDER实现数据的筛选
5,用move实现组件的移动
6. 简单的登录框
7. httpService 加载外部 xml
下面主要说明一下,筛选移动的想法,有其他的问题,望大家交流,程序在附件,如果xml 加载不了要更改一下flash 的信任域.zip的为工程,直接导入就行
(效果如下图)
一.解决组件的布局,下面红色的是 Canvas 画布,好处是用的{jd1}坐标,方便后面用move移动。
二.选定数据源,关键代码如下
- private function createcovetdisplay():void{
- coverdisplays=new Array(); //定义一个新的数组用于存放组件的引用
private function createcovetdisplay():void{
coverdisplays=new Array(); //定义一个新的数组用于存放组件的引用
- var cx:int=0;
- var cy:int=0;
- var rx:int;
- var ry:int;//定义四个整形变量,用于计算{jd1}位置
- for(var i:int=0;i<equipments1.length;i++)//equipments1储存的是数据源
- {
- var coverdis:coverdisplay = new coverdisplay();//coverdisplay 为要展示的组件
- coverdisplays[i] = coverdis; //把组件的引用,给数组中方便以后的查找
- coverdisplays[i].showInAutomationHierarchy = true;
- coverdis.coverdata=equipments1[i];//给数据
- ry=i/5;
- cy=10+ry*130;
- coverdis.y=cy;
- coverdis.x=-100;
- canvas1.addChild(coverdis);//加到画布中增加组件
- coverdis.addEventListener(coversevent.SHOW,goodsdetails);//coversevent,为自定义事件在下面说明
- rx=i%5;
- if(rx==0) cx=16;
- if(rx==1) cx=192;
- if(rx==2) cx=368;
- if(rx==3) cx=544;
- if(rx==4) cx=720;
- var move:Move= new Move(coverdis);
- move.xTo =cx;
- move.duration=2000;
- move.play();
-
- }
var cx:int=0;
var cy:int=0;
var rx:int;
var ry:int;//定义四个整形变量,用于计算{jd1}位置
for(var i:int=0;i<equipments1.length;i++)//equipments1储存的是数据源
{
var coverdis:coverdisplay = new coverdisplay();//coverdisplay 为要展示的组件
coverdisplays[i] = coverdis; //把组件的引用,给数组中方便以后的查找
coverdisplays[i].showInAutomationHierarchy = true;
coverdis.coverdata=equipments1[i];//给数据
ry=i/5;
cy=10+ry*130;
coverdis.y=cy;
coverdis.x=-100;
canvas1.addChild(coverdis);//加到画布中增加组件
coverdis.addEventListener(coversevent.SHOW,goodsdetails);//coversevent,为自定义事件在下面说明
rx=i%5;
if(rx==0) cx=16;
if(rx==1) cx=192;
if(rx==2) cx=368;
if(rx==3) cx=544;
if(rx==4) cx=720;
var move:Move= new Move(coverdis);
move.xTo =cx;
move.duration=2000;
move.play();
}
}
上面的代码为初始化,就是说确定的组件在容器中的位置。因为向画布中添加东西要确定位置,即: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 代码如下。
- package //注意包的位置
- {
- import flash.events.Event;
-
- public class coversevent extends Event //继承event 类
- {
- public static const SHOW:String = "show";//定义事件类型
- public var coverdata:Object;// 传递的参数,注意如果属性是对象的话,需要重写clone()函数
-
- public function coversevent(type:String, coverdata:Object)
- {
- super(type);
- this.coverdata= coverdata;
- }
-
- override public function clone():Event //重写clone 函数
- {
- return new coversevent(type,coverdata);
- }
-
- }
- }
package //注意包的位置
{
import flash.events.Event;
public class coversevent extends Event //继承event 类
{
public static const SHOW:String = "show";//定义事件类型
public var coverdata:Object;// 传递的参数,注意如果属性是对象的话,需要重写clone()函数
public function coversevent(type:String, coverdata:Object)
{
super(type);
this.coverdata= coverdata;
}
override public function clone():Event //重写clone 函数
{
return new coversevent(type,coverdata);
}
}
}
为什么要这样做,as 3的事件机制我们简单的说就是,监听和接受,但是event 里没有能传递参数的属性。要想传递参数,就要自定义事件类型。
这样在事件派发的时候就能够传递想要的数据。
三,有Hslider 实现数据的筛选
hslider 的说明
- <mx:HSlider id="slider" x="93" y="29" width="581"
- minimum="0"
- maximum="1000"
- values="[0,1000]"
- labels="[0,500,1000]"
- thumbCount="2"
- showTrackHighlight="true"
- snapInterval="1"
- tickInterval="100"
- liveDragging="true"
- change="hsliderchange(event)"/>
<mx:HSlider id="slider" x="93" y="29" width="581"
minimum="0"
maximum="1000"
values="[0,1000]"
labels="[0,500,1000]"
thumbCount="2"
showTrackHighlight="true"
snapInterval="1"
tickInterval="100"
liveDragging="true"
change="hsliderchange(event)"/>
应该能看明白什么意思 change 属性只是xx一个函数,实际上没有筛选,
equipments1.filterFunction=sliderFilterFunc; filterFunction 为筛选属性,它是布尔型,前面 equipments1的类型为ArrayCollection,所以要设计函数
- private function sliderFilterFunc(item:Object):Boolean {
- var minSlider:uint = slider.values[0];
- var maxSlider:uint = slider.values[1];
- if ((item.price >= minSlider) &&
- (item.price <= maxSlider)) {
- return true;
- } else {
- return false;
- }
- }
private function sliderFilterFunc(item:Object):Boolean {
var minSlider:uint = slider.values[0];
var maxSlider:uint = slider.values[1];
if ((item.price >= minSlider) &&
(item.price <= maxSlider)) {
return true;
} else {
return false;
}
}
完成对价格属性的筛选
四,实现对筛选后的移动
其实已经很简单了,方法是,要知道筛选后增加了什么,删除了什么?在一次滑动中,显然只可能是增加,或删除,不可能是同时增加删除。
那么需要有两个数组分别储存原有的数据,和增加或删除的数据,用分支语句分两种情况增加或删除,然后把剩下的没变化的组件移到新的位置上。
程序在附件,rar 的 如果xml 加载不了要更改一下flash 的信任域.zip的为工程,直接导入就行