Flex 4 List itemClick的实现

在Flex 3中List控件有itemClick事件，但是到了Flex 4中Spark List控件却没有itemClick事件。是不是Spark List提供了和itemClick事件功能或作用差不多的事件呢？翻阅Flex 4 List的参考文档也没发现和itemClick事件相当的事件或属性，但是Flex 4 List中的change事件和Halo List中的change时间似乎有所不同，于是乎想用spark List中的change事件来模拟itemClick事件，却发现并没有Halo List中itemClick事件的功能强大。那如何在Flex 4中Spark List控件上实现iemClick功能呢，方法总比问题多。在经过一番思考和尝试同时又向小欧咨询了一下后，终于实现了Flex 4 Spark List控件的itemClick功能。虽然实现后感觉很简单，其实不然，实现虽简单，但是想法更重要。上回我介绍了Flex 4 Spark List组件的分页功能的实现并附上了源代码，但是忘了附上PictureItemRender的实现代码，正好现在就在其基础上做一点点改进来实现 Spark List的itemClick功能并附上PictureItemRender的代码,如下所示:

运行结果SWF文件：

 

 

主文件FlexListPage.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:local="*" creationComplete="init()"
               height="100%" width="100%">
   
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.ItemClickEvent;
            [Bindable] public var totalPages:Number;
            [Bindable] public var currentPage:Number = 1;
           
            [Embed(source='assets/backpack.jpg')]
            [Bindable]
            public var backpackCls:Class;
           
            [Embed(source='assets/boots.jpg')]
            [Bindable]
            public var bootsCls:Class;
           
            [Embed(source='assets/compass.jpg')]
            [Bindable]
            public var compassCls:Class;
           
            [Embed(source='assets/goggles.jpg')]
            [Bindable]
            public var gogglesCls:Class;
           
            [Embed(source='assets/helmet.jpg')]
            [Bindable]
            public var helmetCls:Class;
           
            public function prevPageHandler():void {
                if(currentPage == 1) return ;
                currentPage--;
                //上一页
                list.scroller.verticalScrollBar.changeValueByPage(false);
            }
           
            public function nextPageHandler():void {
                if(currentPage == totalPages) return;
                currentPage++;
                //下一页
                list.scroller.verticalScrollBar.changeValueByPage(true);
            }
           
            //设置list控件的滚动控件的样式
            public function init():void {
                //关掉滚动控件的垂直和水平滚动条
                list.scroller.setStyle('horizontalScrollPolicy', 'off');
                list.scroller.setStyle('verticalScrollPolicy', 'off');
                //设置滚动控件的垂直滚动条的滚动样式
                list.scroller.verticalScrollBar.setStyle('smoothScrolling', true);//设置为平滑滚动
                list.scroller.verticalScrollBar.setStyle('repeatInterval', 500);//设置滚动到指定点的经过的时间
                totalPages = Math.ceil(list.scroller.viewport.contentHeight/list.scroller.verticalScrollBar.pageSize);
            }
            //itemClick事件处理函数
            public function itemClickHandler(evt:ItemClickEvent):void {
                Alert.show("Name: "+evt.item.name+" Index: "+evt.index);
            }
        ]]>
    </fx:Script>
    <s:VGroup x="10" y="5" height="100%" width="100%">
        <s:Label text="Page {currentPage} of {totalPages}"/>
        <s:HGroup>
            <s:VGroup>
                <s:Button id="prev" label="Prev" click="prevPageHandler()"/>
                <s:Button id="next" label="Next" click="nextPageHandler()"/>
            </s:VGroup>
            <s:List id="list" width="400" height="374">
                <s:dataProvider>
                    <s:ArrayCollection>
                        <fx:Object name="Backpack" photo="{backpackCls}"/>
                        <fx:Object name="Boots" photo="{bootsCls}"/>
                        <fx:Object name="Compass" photo="{compassCls}"/>
                        <fx:Object name="Goggles" photo="{gogglesCls}"/>
                        <fx:Object name="Helmet" photo="{helmetCls}"/>
                        <fx:Object name="Backpack" photo="{backpackCls}"/>
                        <fx:Object name="Boots" photo="{bootsCls}"/>
                        <fx:Object name="Compass" photo="{compassCls}"/>
                        <fx:Object name="Goggles" photo="{gogglesCls}"/>
                        <fx:Object name="Backpack" photo="{backpackCls}"/>
                        <fx:Object name="Boots" photo="{bootsCls}"/>
                        <fx:Object name="Compass" photo="{compassCls}"/>
                        <fx:Object name="Goggles" photo="{gogglesCls}"/>
                        <fx:Object name="Helmet" photo="{helmetCls}"/>
                        <fx:Object name="Backpack" photo="{backpackCls}"/>
                        <fx:Object name="Boots" photo="{bootsCls}"/>
                        <fx:Object name="Compass" photo="{compassCls}"/>
                        <fx:Object name="Goggles" photo="{gogglesCls}"/>
                        <fx:Object name="Helmet" photo="{helmetCls}"/>
                        <fx:Object name="Compass" photo="{compassCls}"/>
                        <fx:Object name="Goggles" photo="{gogglesCls}"/>
                        <fx:Object name="Helmet" photo="{helmetCls}"/>
                        <fx:Object name="Compass" photo="{compassCls}"/>
                        <fx:Object name="Goggles" photo="{gogglesCls}"/>
                        <fx:Object name="Helmet" photo="{helmetCls}"/>
                        <fx:Object name="Compass" photo="{compassCls}"/>
                        <fx:Object name="Goggles" photo="{gogglesCls}"/>
                        <fx:Object name="Backpack" photo="{backpackCls}"/>
                        <fx:Object name="Boots" photo="{bootsCls}"/>
                        <fx:Object name="Compass" photo="{compassCls}"/>
                    </s:ArrayCollection>
                </s:dataProvider>
                <s:layout>
                    <s:TileLayout requestedColumnCount="3"
                                  columnWidth="120" rowHeight="120"/>
                </s:layout>
                <s:itemRenderer>
                    <fx:Component>
                        <local:PictureItemRenderer itemClick="FlexListPage(outerDocument).itemClickHandler(event)"/>
                    </fx:Component>
                </s:itemRenderer>
            </s:List>
        </s:HGroup>

    </s:VGroup>
</s:Application>

ItemRender文件PictureItemRender.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                height="120" width="120"
                click="simulateItemClick()"
                autoDrawBackground="true">
    <fx:Metadata>
        [Event(name="itemClick", type="mx.events.ItemClickEvent")]  /*在ItemRender中声明itemClickEvent事件*/
    </fx:Metadata>
   
    <fx:Script>
        <![CDATA[
            import mx.events.ItemClickEvent;
            public function simulateItemClick():void {
                var itemClick:ItemClickEvent = new ItemClickEvent(ItemClickEvent.ITEM_CLICK, false,
                    false,null,itemIndex,null,data);
                dispatchEvent(itemClick); //抛出itemClick事件对象
            }
        ]]>
    </fx:Script>
   
    <s:VGroup height="120" width="120">
        <mx:Image source="{data.photo}" height="120" width="120"/>
    </s:VGroup>
</s:ItemRenderer>

以上代码很简单，我就不多做解释了，可以自己运行后慢慢研究。