Using Swipe Gestures in Mobile Flex Application (AIR for Android)
Line Break
Author: Arjan (47 Articles) - Author Website
Arjan is a SAP Consultant specialized in ABAP and Front End development techniques like Web Dynpro, Adobe Interactive Forms, Flex and AIR. In his free time he likes to create examples for Flex-Blog and other applications using Flex, AIR and PHP. Other hobbies are movies and music. He is also the co-owner of Flex-Blog.com.
In my previous posts about Flex Mobile / AIR for Android I talked about navigation and transitions between views in a mobile application. This posts focuses on one of the great benefits of the things that devices are capable of today: gestures. There are a lot of them supported by Flex 4.5 / AIR for Android already. I’m going to give you a simple example for the Swipe Gesture.
When you’re developing a mobile Flex application, you get access to some gesture events that are triggered by AIR running on the device. One of them is the Swipe gesture. Lets create a simple mobile application in which you can navigate between views using the swipe command. Notice that you are going to need an Android device running on 2.2 to test this (our you might have a fancy monitor thats support swipe gestures 
).
Create a new Flex Mobile project first, I called it SwipeGestureExample.
Now create a new view that’s called NextView or something, doesn’t really matter. Create a label inside of it that says “Next View” or something like that so you can identify the view when you are running the application.
My NextView.mxml
1 2 3 4 5 6 7 8 9 10 11 12 | <?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Next View"> <s:layout> <s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/> </s:layout> <s:Label text="Next View"/> </s:View> |
Also create a Previous View that looks the same as the Next View. Mine looks like this:
1 2 3 4 5 6 7 8 9 10 | <?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Previous View"> <s:layout> <s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/> </s:layout> <s:Label text="Previous View"/> </s:View> |
With that View created, lets go back to the default home view created by Flash Builder Burrito and add a label to that as well.
My Home View:
1 2 3 4 5 6 7 8 9 10 11 12 | <?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Home View"> <s:layout> <s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/> </s:layout> <s:Label text="Home View"/> </s:View> |
Now for the fun part, create a script block on the Home view and create a method called init that’s executed when the initialize event is triggered. This init method will put an event listener on the Swipe event. Every time a swipe is done on the device, that method is automatically called. Also create the skeleton for the event handler.
The init method:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <fx:Script> <![CDATA[ private function init():void { this.addEventListener( TransformGestureEvent.GESTURE_SWIPE, handleSwipe ); } private function handleSwipe(event:TransformGestureEvent):void { } ]]> </fx:Script> |
Notice that the event we are listening for is of type TransformGestureEvent.GESTURE_SWIPE. Let the event handler receive that type too, we need a property of it that is unique for this type.
The event has a property called offsetX. This is the property that we are interested in to determine whether the swipe was to the left or to the right. When this property is -1, the swipe was to the left, when its 1, to swipe was to the right. Lets do something with it. Add this code to your TransformGestureEvent.GESTURE_SWIPE event handler called handleSwipe:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | private function handleSwipe(event:TransformGestureEvent):void { // Swipe was to the right if (event.offsetX == 1 ) { // push the PreviousView without any data using default // ViewTransition navigator.pushView( PreviousView, null, new SlideViewTransition( 300, SlideViewTransition.SLIDE_RIGHT ) ); } // Swipe was to the left else if (event.offsetX == -1 ) { // push the NextView withour any data using navigator.pushView( NextView, null, new SlideViewTransition( 300, SlideViewTransition.SLIDE_LEFT ) ); } } |
To go back to the home view from either the NextView or the PreviousView, you can also implement this logic on those views a well. You can also just use the back key on your Android device or use a button, doesn’t really matter…you get the idea 
.
So that’s it. Pretty simple to use swipe in your Mobile Flex application right? Stay tuned for more examples.
EDIT:
Instead of using the initialize method to add an event listener for the Swipe gesture. You can just put an event listener on the gestureSwipe event on the View tag like this:
1 2 3 | <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Home View" initialize="init()" gestureSwipe="handleSwipe(event)"> |
Related posts:
- TabbedMobileApplication Example in Flex Mobile (AIR for Android)
- View Navigation in a Mobile Flex Application
- Flex Mobile: Two finger tap gesture to toggle actionBar visibility in a View (AIR for Android)
- CheckBox in List using MobileIconItemRenderer for Flex Mobile
- Flash 10.1 / AIR Mobile: What device do you need?
Written by · Filed Under Examples
Was this post useful to you?
Please rate this post, follow us @ twitter, or link to this page from your website!
(5 votes, average: 4.80 out of 5)
Loading ...Comments
7 Responses to “Using Swipe Gestures in Mobile Flex Application (AIR for Android)”
Very cool. I’m a laggard getting my Android phone, but can’t wait to play with the new gestures interface. Is pushView similar to a viewStack, and can that be coded in mxml too?
In a slight bend, I just rewrote a kinetic scroller for, I guess, non-mobile apps that adds very simple gesture effects to regular Flex apps. Check it out at http://www.softwareodyssey.com/blog.aspx
Hi greg,
The view mechanism in Flex Mobile is a bit similar to the viewstack in the sense that it is a stack of views, but they’re completely different. So you cant code a stack of views for mobile in MXML like you do with a viewstack…
About your kinetic scroller: cool component. I might use it some day.
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)
I need to differentiate between a tap on a list control and a left gesture swipe. The list control is selected first. Is there anyway that this could be achieved?
Hi Arjan,
I maintain Adobe’s Tour de Flex and mobile samples would be a great thing to add to promote 4.5 and be a resource for Flex developers. If you are interested, could you please email me?
Thanks!
Maile
For anyone who is having problems getting this working, a lot has changed in the final 4.5 SDK, I’ve written a blog post to clarify: http://daaain.posterous.com/transitioning-between-views-in-a-mobile-flex
Thanks for this post, definitely very helpful. Quick “silly” question, how does one test a swipe gesture on Windows with a mouse? It seems to only register click, or drag, but I can’t figure out how to simulate a swipe gesture.