Actionscript 3 and Flex 4 scroll TileList with touch

Question

I am stuck on a problem with Adobe Flex 4 and ActionScript 3.

I have a TileList in Flex 4 like so:

<mx:TileList id="myList" change="test(event)" paddingLeft="28" width="1080" wordWrap="true" height="1420" rowHeight="475" columnWidth="350" dataProvider="{floorPlans}" itemRenderer="FloorplanItems" selectionColor="#ffffff" rollOverColor="#ffffff">

</mx:TileList>

And I am trying to make it scrollable with touch as this is going on a touch screen, I have try two different ways to make this scrollable with touch, one wrapping it in spark Scrollable like so:

<s:Scroller>

    <s:Group> 

        <mx:TileList id="myList" change="test(event)" paddingLeft="28" width="1080" wordWrap="true" height="1420" rowHeight="475" columnWidth="350" dataProvider="{floorPlans}" itemRenderer="FloorplanItems" selectionColor="#ffffff" rollOverColor="#ffffff">

        </mx:TileList>

    </s:Group>

</s:Scroller>

But when I goto test on my touchscreen, nothing happens.

The other approach was adding a TransformGestureEvent.GESTURE_SWIPE event listener like so:

<mx:Script>
    <![CDATA[

            import flash.ui.Multitouch;  
            import flash.ui.MultitouchInputMode;  

            Multitouch.inputMode = MultitouchInputMode.GESTURE;

            import flash.events.Event;

            public function init(): void
            {
                trace("here");
                myList.addEventListener(TransformGestureEvent.GESTURE_SWIPE, onSwipe);
            }

            public function onSwipe (e:TransformGestureEvent):void{

                if (e.offsetY == 1) { 
                    //User swiped towards bottom
                    myList.y += 100; 
                }
                if (e.offsetY == -1) { 
                    //User swiped towards top
                    myList.y -= 100;
                } 

            }
    ]]>
</mx:Script>

But again, this does nothing....I am running out of ideas...how do I make my TileList scrollable with touch?

Answer 1

You should use the interactionMode attribute:

<mx:TileList interactionMode="touch"/>

Possible values are "touch" or "mouse". As the Spark components are newer and specifically designed for Mobile performance, it is recommended to use <s:List/> instead of <mx:TileList />.