Adding swipe gestures to you mobile Flex application

With the Flex 4.5 SDK (aka Hero) you can now create some very nifty mobile applications to run on Android enabled devices as well as on the BlackBerry PlayBook. Now, one of the features you’ll use on any touch enabled device is the swipe gesture. You can use this gesture to move things around or go from screen to screen etc. But how do you implement such a feature in your Flex application?

Well, there are 2 options you may choose from. The first one involves using ActionScript to attach an event listener. Upon initialisation of your View component, you write the following code:

private function initView():void {
    addEventListener(TransformGestureEvent.GESTURE_SWIPE, onSwipe);
}

The good thing about this method is the fact that it is exactly the same in plain ActionScript or Flash Professional projects. The second option can only be done in Flex applications and it is actually a little bit easier to implement. In fact, you just capture the gestureSwipe event on the View tag, as shown below.

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            gestureSwipe="onSwipe(event)"/>

So, that’s all there is to it for capturing the swipe on a touch enabled device, such as mobile phones, tablets or even large touch screens. But you only have one single swipe event, so how do you distinguish between a swipe left and swipe right? For that, you are going to have to use the event’s properties to determine the swipe direction. and more particularly, you’ll need the offsetX property for a horizontal swipe and the offsetY property for a vertical swipe.

private function onSwipe(event:TransformGestureEvent):void {
    // A swipe to the left means the offsetX property will be -1
    // A swipe to the right means the offsetX position will be 1
    if(event.offsetX == -1) {
        doSwipeLeft();
    } else if(event.offsetX == 1) {
        doSwipeRight();
    }
 
    // The same principle applies to the vertical swipe gesture, so
    // a swipe to the top means the offsetY position will be -1
    // A swipe to the bottom means the offsetY position will be 1
    if(event.offsetY == -1) {
        doSwipeTop();
    } else if(event.offsetY == 1) {
        doSwipeBottom();
    }
}
6 Comments - Leave a comment
  1. […] This post was mentioned on Twitter by Eric Snowden, karannnnnnnnnnn3. karannnnnnnnnnn3 said: Adding swipe gestures to you mobile Flex application: With the Flex 4.5 SDK (aka Hero) you can now create some v… http://bit.ly/dHMcK9 […]

  2. […] Steven Peeters has posted a new flash tip on her blog: Adding swipe gestures to you mobile Flex application, Steven said you can choose 2 options to use the gesture to move things around or go from screen to screen etc. […]

  3. Li Yong Fei says:

    Thanks to share, very nice.

  4. dagi3d says:

    It worked fine on my android phone but I’m unable to capture the event while developing on my computer. Is it a builder’s bug? (I’m using mac os)

  5. This is exactly what I was looking for! Do you know if it works in the PlayBook emulator? Since I don’t have a PLayBook yet I want to make sure this will work before I submit it.

  6. Hi Aaron,

    Basically, at this moment no one has the Playbook yet, because it is still not publicly available. :-)

    Tracing swipe gestures is also something you can’t just test in the Playbook emulator, because gestures are not caught from the system (e.g. Mac trackpad). The only way to know they should work is to dispatch the event yourself in the application, which I’ve done and then the swipe is caught and executed. So in theory, it should work just fine. The only thing that isn’t 100% sure is whether the Playbook will actually dispatch that hardware event. If that doesn’t work, then we all will have to resort to the QNX libraries. Luckily, they have a Flex interface as well, so you can certainly use them anyway if you want.

    Steven

Leave a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Welcome , today is Friday, June 23, 2017