• Flex理解ArrayCollection类及其绑定,筛选、排序、游标用法


    理解ArrayCollection类

    上一节,我们介绍了集合类提供了丰富的数据操纵能力,本节,我们将 通过ArrayCollection类来具体了解如何应用集合类。

    13.5.1  创建ArrayCollection类实例

    mx.collection.ArrayCollection类是 将Array公开为集合的封装类,可使用ICollectionView或IList接口的方法和属性实现访问和处理ArrayCollection实 例。对ArrayCollection实例进行操作会修改数据源,例如,如果对ArrayCollection使用removeItemAt()方法,就 会删除基础Array中的项目。

    ArrayCollection的MXML语法如下:

    <mx:ArrayCollection id=””   source="null"/>

    下面两段代码分别使用MXML标签和ActionScript 代码声明并创建了ArrayCollection实例。

    使用MXML代码创建ArrayCollection实例。

    <mx:ArrayCollection id="arrColl">

            <mx:source>

                <mx:Array>

                    <mx:Object label=" ActionScript基础" data=" A-1" />

                    <mx:Object label="追风筝的人" data="B-1" />

                    <mx:Object label="神秘河" data="C-1" />

                </mx:Array>

            </mx:source>

    </mx:ArrayCollection>

    使用ActionScript代码创建 ArrayCollection实例。

    private var books:Array = new Array({label:"ActionScript基础",

    data:"A- 1"},{label:"追风筝的人", data:"B-1"},{label:"神秘河", data:"C-1"});

    private var acBooks1:ArrayCollection=new ArrayCollection(books);

    Flex应用的数据通常来自外部文件。或者是SWF应用所在服务器 的本地资源文件,或者通过HTTP、Web服务等其他方式获取的远端服务器数据。

    代码13-13是一个典型的初始化ArrayCollection 实例的XML数据源。数据呈现规则的结构,每一个子节点都具有相同的属性,代表了数据集合中的实例。

    代码13-13:xml文件样例——book.xml(位于assets目录下)

    <?xml version="1.0" encoding="utf-8"?>

    <books>

        <book>

            <ISBN>9787806239421</ISBN>   

            <name>大秦帝国</name>

            <price>369.00</price>

            <author>孙皓晖</author>

            <publication>河南文艺出版社</publication>

        </book>

        ……

        <book>

            <ISBN>9787115145543</ISBN>   

            <name>C++ Primer中文版</name>

            <price>99.00</price>

            <author>Stanley</author>

            <publication>人民邮电出版社</publication>

        </book>

    </books>

    有很多种方法可以从服务器端获取数据,包括 HTTPService、Web服务、远程对象等,我们将在第18章“访问Web和HTTP服务”(见第421页)做具体介绍。下面的例子中,通过简单的 HTTP服务(id为service)读取了服务器本地的XML数据文件。数据读取完毕后,会调度result事件,触发handleData事件侦听方 法,把读取的数据置入ArrayCollection实例acBooks中(如代码13-14所示)。由于该变量被绑定在数据表grid上,因此即时更新 了grid的显示。

    代码13-14:从本地xml文件初始化ArrayCollection实例

    <?xml version="1.0" encoding="utf-8"?>

    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  layout="vertical"

            verticalAlign="middle"

            backgroundColor="white" creationComplete="init()">

        <mx:Script>

            <![CDATA[

                import mx.rpc.events.ResultEvent;

                import mx.collections.ArrayCollection;

               

                [Bindable]

                private var acBooks:ArrayCollection=new ArrayCollection();

               

                //初始化数据           

                private function init():void{

                    service.send();

                }

               

                //从本地XML数据文件中读取数据到acBooks:ArrayCollection中

                private function handleData(evt:ResultEvent):void{

                    acBooks=evt.result.books.book;

                }

            ]]>

        </mx:Script>

        <mx:HTTPService id="service" url="assets/book.xml" result="handleData(event)"/>

        <!--绑定acBooks数据源到表格组件-->

        <mx:DataGrid id="grid" dataProvider="{acBooks}"/>

    </mx:Application>

    上述代码最终把XML数据文件转换为 ArrayCollection实例。在调试模式下运行上述应用,并监控acBooks变量,可以更加清楚地看到XML数据文件如何存储在 ArrayCollection实例中,如图13-9所示。

    图13-9  Debug模式下监控ArrayCollection实例acBooks

    XML数据文件的每个节点被作为独立的对象实例 (mx.utils.ObjectProxy对象)依次存储在数据集合中。

    13.5.2  筛选数据

    ArrayCollection类自 ListCollectionView继承了filterFunction属性。

    filterFunction:Function[]

    通过设置filterFunction属性,为 ArrayCollection实例指定筛选数据的方法。该方法必须具有如下形式签名:

    f(item:Object):Boolean

    在设置filterFunction属性后,必须调用 refresh()方法,将筛选函数应用到数据集合上,更新集合视图。

    以上一节应用为基础。我们在数据列表grid上增加滑动条组件,用 户通过该组件设置价格范围达到筛选图书的目的,如代码13-15所示。应用完成后结果如图13-10所示:

    图13-10  ArrayCollection筛选数据示例

    代码13-15:筛选数据示例

    <?xml version="1.0" encoding="utf-8"?>

    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  layout="vertical"

            verticalAlign="middle"

            backgroundColor="white" creationComplete="init()">

        <mx:Script>

            <![CDATA[

                import mx.events.SliderEvent;

                import mx.controls.Alert;

                import mx.rpc.events.ResultEvent;

                import mx.collections.ArrayCollection;

               

                [Bindable]

                private var acBooks:ArrayCollection=new ArrayCollection();

               

                //初始化数据           

                private function init():void{

                    service.send();

                }

               

                //从本地XML数据文件中读取数据到acBooks:ArrayCollection中

                private function handleData(evt:ResultEvent):void{

                    acBooks=evt.result.books.book;

                       //设置acBooks的过滤函数

                    acBooks.filterFunction=priceFilter;

                }

               

                //acBooks的价格过滤器

                private function priceFilter(item:Object):Boolean{

                   var isMatch:Boolean = false;

                   if(item.price>=priceSlider.values[0] && item.price<=

                 priceSlider.values[1]){

                       isMatch = true;

                   }             

                   return isMatch;

               }           

               

                //价格滑动条变化后触发,应用过滤方法,更新列表

                private function dispatchPriceFilter():void

                {

                        acBooks.refresh();

                }

                          

            ]]>

        </mx:Script>

        <mx:HTTPService id="service" url="assets/book.xml" result="handleData(event)"/>

        <!--控制价格筛选-->

    <mx:HSlider id="priceSlider" minimum="0" maximum="500" tickInterval="5"

    snapInterval="5"

            width="{grid.width}" thumbCount="2" values="[0,500]" labels="[$0,$500]"

            liveDragging="true" change="dispatchPriceFilter()"/>

                   

        <!--绑定acBooks数据源到表格组件-->

        <mx:DataGrid id="grid" dataProvider="{acBooks}"/>

    </mx:Application>

    HSlider组件说明

    mx.controls.HSlider类实现了水平滑动条控件。 用户可通过在滑块轨道的终点之间移动滑块来选择值。

    maximum和minimum属性分别指定了滑块控件允许的最大 和最小值。thumCount指定了Slider 控件所允许的滑块数量。在我们的例子中,使用两个滑块来设定价格范围。此时,每个滑块的值在一起构成了数组,通过属性values可以访问和设定该数组 值。默认设置values="[0,500]",使得应用初始化时滑块位于轨道的两端。属性liveDragging设置为true,为滑块启动了实时拖 动,此时当用户移动滑块时连续调度change事件。可以看到,我们为change事件的侦听器方法定义为dispatchPriceFilter()。

    设置ArrayCollection实例acBooks的过滤器属性

    在handleData()方法 中,acBooks.filterFunction=priceFilter设定了过滤器属性为priceFilter方法。

    过滤器方法:priceFilter(item:Object)说明

    过滤器方法通过参数item:Object访问 ArrayCollection的每个元素。如果价格范围在滑动条设置值范围内,则返回true,该元素会保留在集合视图中。

    dispatchPriceFilter()方法说明

    每一次滑动滚动条,都会由于触发change事件,而调用 dispatchPriceFilter()方法。在该方法中,调用refresh方法以应用过滤。由于acBooks被绑定在grid数据表上,因此过 滤结果会即时反应在应用界面上。

    13.5.3  数据排序

    ArrayCollection自 ListCollectionView继承了sort属性。

    sort:Sort[]

    sort属性用于对 ICollectionView视图进行排序。同数据筛选一样,设置排序不会自动刷新视图,因此必须在设置此属性后调用refresh()方法。开发者须 要创建mx.collection.Sort类实例赋予ArrayCollection的sort属性。

    mx.collection.Sort类

    Sort类提供了在现有视图上建立排序所需的排序信息,其实例通常 被赋予ICollectionView视图的sort属性(例如ArrayCollection的sort属性),实现对集合数据视图的排序。

    Sort类的常用属性包括:

    fields : Array  //指定要比较的字段的 SortField 对象,数组类型。

    以及

    compareFunction : Function //用于在排序时比较项目的方法。

    mx.collection..SortField

    SortField提供对现有视图中的字段或属性建立排序所需的排 序信息。mx.collection.Sort类中,数组类型的fields属性中的数组项目即为SortField类实例。

    我们为上一节ArrayCollection数据筛选的例子加入排 序功能。

    1.      在主应用上加入新的按钮,用户点击该按钮则触发“SortData()”方法,进行排序。

    <mx:Button label="排序" id="buttonSort" click="sortData()"/>

    2.      引入mx.collection.Sort和SortField类。

    在<mx:Script>标签中,加入

    import mx.collections.Sort;

    import mx.collections.SortField;

    3.      实现SortData()方法。

    在<mx:Script>标签中,加入新的方法:

    private function sortData():void{

    var sortBooks:Sort = new Sort();

    sortBooks.fields=[new SortField("price"),

                                   new SortField("ISBN")];

    acBooks.sort=sortBooks;

    acBooks.refresh();

    }

    在上述代码中,首先创建了Sort类实例。然后分别创建了两个 SortField实例(对应集合对象元素的price和ISBN属性),并赋予了Sort实例的fileds属性。在将Sort类实例赋予集合对象 acBooks的sort属性之后,通过调用refresh方法刷新了视图,并即时更新了数据表。

    按下按钮后的数据表显示如图13-11所示。

    图13-11  数据集合ArrayCollection的排序结果

    13.5.4  使用游标

    ArrayCollection有些类似数据表。数据集合中的 每一个元素(通常为复杂对象,也可以是String、int等基本类型)就好比数据表中的一条记录。数据库技术中,通过游标可以在数据表的记录中游历。有 的时候,在数据集合中也须要实现类似功能。ListCollectionView提供了createCursor()方法,可以创建能够在数据集合中游历 的游标。ArrayCollection继承了该方法。

    createCursor()方法

    createCursor方法签名:

    public function createCursor():IViewCursor

    该方法创建了基于此视图的新 IViewCursor实现。IViewCursor是定义双向枚举集合视图的接口。此游标提供查找、搜索和标记为书签等功能,还提供修改方法用于插入和 删除。

    IViewCursor接口的方法和属性,见表13-4、表13-5。

    表13-4  mx.collection.IViewCursor接口的公共方法(引自ActionScript3.0 Language Reference)

    方法签名

    描述

    findAny(values:Object):Boolean

    查找集合中具有指定属性的项目并将光标定位到该项目

    findFirst(values:Object):Boolean

    查找集合中具有指定属性的第一个项目,并将光标定位到该项目

    findLast(values:Object):Boolean

    查找集合中具有指定属性的最后一个项目,并将光标定位到该项目

    insert(item:Object):void

    在光标的当前位置之前插入指定的项目

    moveNext():Boolean

    将光标移动到集合中的下一个项目

    movePrevious():Boolean

    将光标移动到集合中的上一个项目

    remove():Object

    删除当前项目并返回该项目

    seek(bookmark:CursorBookmark,
    offset:int = 0, prefetch:int = 0):void

    将光标移动到与指定书签位置存在一定偏移量的某个位置

    表13-5  mx.collection.IViewCursor接口的属性(引自ActionScript3.0 Language Reference)

    方法签名

    描述

    afterLast : Boolean

    如果将光标定位于视图中最后一个项目之后,则此属性为 true

    beforeFirst : Boolean

    如果将光标定位于视图中第一个项目之前,此属性为 true

    bookmark : CursorBookmark

    可以访问与当前属性返回的项目相对应的书签

    current : Object

    可以访问位于此光标引用的源集合中的位置的对象

    view : ICollectionView

    对与此光标关联的 ICollectionView 的引用

    游标查找的局限性

    IViewCursor实现提供了查找方法(findAny、 findFirst和findAny)。通过游标查找数据集合中的元素对象非常方便,但由于这些方法依赖于Sort类(使用了其 compareFunction属性),由此带来了许多限制:

    1.      只能对排序后的视图调用查找方法;如果视图未排序,则会引发 CursorError。

    2.      指定的查询值必须配置为名称-值对。这些名称值必须与排序中指定的属性相匹配。这意味着,一方面查询使用的名称-值对必须包含在排序使用的名称值对 (Sort类的fields属性制定)范围内;另一方面,查询指定的集合元素属性顺序必须与排序指定的属性顺序相同。
    例如:如果mySort.fields属性指定的排序属性次序分别为price、bookName和ISBN,那么游标查询指定的名称值对需为 {price:value,bookName:value;ISBN:value}。查询指定的数组集合元素对象的属性不一定覆盖所有的排序属性,但必须 保证顺序一致。例如{price:value,bookName:value}是可以接受的查询方法参数。但是{price:value, ISBN:value}则会导致游标查询方法抛出CursorError异常。

    我们通过为上一个应用加入查找功能,了解如何实际应用游标进行查 找,如代码13-16、图13-12所示。

    代码13-16:游标查找的样例

    <?xml version="1.0" encoding="utf-8"?>

    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  layout="vertical"

            verticalAlign="middle"

            backgroundColor="white" creationComplete="init()">

        <mx:Script>

            <![CDATA[

                import mx.collections.SortField;

                import mx.events.SliderEvent;

                import mx.controls.Alert;

                import mx.rpc.events.ResultEvent;

                import mx.collections.ArrayCollection;

                import mx.collections.Sort;

                import mx.collections.SortField;

                import mx.collections.IViewCursor;

               

                [Bindable]

                private var acBooks:ArrayCollection=new ArrayCollection();

               

                private var cursor:IViewCursor;

               

                //初始化数据           

                private function init():void{

                    service.send();

                }

               

                //从本地XML数据文件中读取数据到acBooks:ArrayCollection中

                private function handleData(evt:ResultEvent):void{

                    acBooks=evt.result.books.book;

                    //创建游标

                    cursor = acBooks.createCursor();

                }

               

          

                //价格滑动条变化后触发,设置acBooks的过滤函数,并更新列表

                private function dispatchPriceFilter():void

                {

                        acBooks.refresh();

                }

               //查询方法

               private function searchItem(event:Event):void{

                       //查询之前进行排序

                    var sortBooks:Sort = new Sort();

                    //排序使用的属性和其顺序,将决定查询时的查询属性及顺序

                    sortBooks.fields=[new SortField("price"),new

                  SortField("bookName"),new SortField("ISBN")];

                    acBooks.sort=sortBooks;

                    acBooks.refresh();

                    //创建查询属性对象

                    var searchObj:Object = new Object();

                    //查询属性对象必须在排序使用的属性对象范围内,并保持一致顺序

                       searchObj = {price:priceKey.text,bookName:nameKey.text};

                       //游标查询

                    var result:Boolean = cursor.findAny(searchObj);

                    if (result) {

                        //定位数据表中记录

                        grid.selectedItem=cursor.current;

                    } else {

                        grid.selectedItem = null;

                        mx.controls.Alert.show("抱歉,没有找到!");

                    }

               }

              

            ]]>

        </mx:Script>

    <mx:HTTPService id="service" url="assets/book.xml" result=

    "handleData(event)"/>

        <!--通过ApplicationControlBar组织工具条-->

        <mx:ApplicationControlBar width="{grid.width}">

            <mx:Spacer width="100%"/>

            <!--图书名称查询输入框-->

            <mx:TextInput id="nameKey" toolTip="图书名称" />

            <!--图书价格查询输入框-->

            <mx:TextInput id="priceKey" toolTip="价格" />

            <mx:Button id="buttonSearch" label="查找" click="searchItem(event);" />

        </mx:ApplicationControlBar>

        <!--绑定acBooks数据源到表格组件-->

        <mx:DataGrid id="grid" dataProvider="{acBooks}"/>

    </mx:Application>

    图13-12  ArrayCollection游标查找样例应用

  • 相关阅读:
    redis的常用命令及php-redis的使用
    mysql数据库基本操作
    php接口数据安全解决方案
    如何防止api接口被恶意调用或攻击
    virtualBox安装及调试
    PHP常用扩展
    memcached安装与应用
    Jmeter的基础使用(4)——添加服务器的监控
    Jmeter的基础使用(3)——使用实操
    Jmeter的基础使用(2)——线程的添加以及基本使用
  • 原文地址:https://www.cnblogs.com/nianshi/p/1746356.html
Copyright © 2020-2023  润新知