Asgard Designs

Swipe Gestures using Flex 4.5 Hero/Burrito on Android

I’ve been playing a little with the pre-release of Flex 4.5 Hero and checking out what it’s mobile support is like.

I ended up mocking up a simple swiping example – swiping in both vertical and horizontal directions – and quickly found that all the info floating around on the net is not quite right for this release – seems they have changed around the classes a bit.

The one thing that I’ve noticed is swiping in Flex is somewhat more primative than in Android native – in android the swipe speed is more or less dictated by your fingers speed across the screen – you swipe slower, so does the app. You can pause half way and see half of each screen. In Flex 4.5, once it detects a swipe event, across it goes at the speed specified by the code.

I would be interested to see if the native style swipe is possible, as it is a much nicer implementation – probably causes a lot more overhead, so it may be too much of a performance hit.

These sort of little differences, in my opinion, will be what will brand Flex based apps as an inferior product, so it would be good to see some movement there. That being said, this is a pre-release so I’ll give them the benefit of the doubt.

All in all it seems pretty good… close enough to native feel to justify looking into using flex on mobile further.

swipe code:-

Create a new mobile project using the prerelease of Flash Builder Burrito (you’ll need to sign up for the prerelease program for this) and using Flex 4.5 Hero runtime (should be bundled with Burrito)

There will be 5 files in total, Main.mxml, PrevView.mxml, NextView.mxml, TopView.mxml and BottomView.mxml. I will provide the code for Main.mxml and NextView.mxml. The other three files are essentially the same as NextView, just will be using a different event.offsetX/offsetY value and slideViewTransition.direction value, so I’m sure you can work it out.

Main.mxml:-

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		title="Swiping Demo" gestureSwipe="handleSwipe(event)">
	
	<fx:Script>
		<![CDATA[
			import spark.transitions.SlideViewTransition;
			import spark.transitions.SlideViewTransitionMode;
			import spark.transitions.ViewTransitionDirection;
			
			private function handleSwipe(event:TransformGestureEvent):void
			{
				// Swipe was to the right
				if (event.offsetX == 1 ) {
					// push the PreviousView without any data using default
					// ViewTransition
					var slideViewTransition:SlideViewTransition = new SlideViewTransition();
					slideViewTransition.duration = 300;
					slideViewTransition.direction = ViewTransitionDirection.RIGHT
					navigator.pushView( PrevView, null,null, slideViewTransition);
				}
					// Swipe was to the left
				else if (event.offsetX == -1 ) {
					// push the NextView withour any data using 
					var slideViewTransition2:SlideViewTransition = new SlideViewTransition();
					slideViewTransition2.duration = 300;
					slideViewTransition2.direction = ViewTransitionDirection.LEFT; 
					navigator.pushView( NextView, null,null, slideViewTransition2);
				}
				
				if (event.offsetY == 1 ) {
					var topTrans:SlideViewTransition = new SlideViewTransition();
					topTrans.duration = 300;
					topTrans.direction = ViewTransitionDirection.DOWN
					navigator.pushView( TopView, null, null, topTrans);
				}
				else if (event.offsetY == -1 ) 
				{
					var bottomTrans:SlideViewTransition = new SlideViewTransition();
					bottomTrans.duration = 300;
					bottomTrans.direction = ViewTransitionDirection.UP
					navigator.pushView( BottomView, null, null, bottomTrans);
				}
			}
			
		]]>
	</fx:Script>
	
	<s:layout>
		<s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>
	</s:layout>
	
	<s:Label text="main screen" />
	
</s:View>

NextView.mxml:-

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		title="Next Screen" gestureSwipe="handleSwipe(event)">
	
	<fx:Script>
		<![CDATA[
                        import spark.transitions.SlideViewTransition;
			import spark.transitions.SlideViewTransitionMode;
			import spark.transitions.ViewTransitionDirection;
			
			private function handleSwipe(event:TransformGestureEvent):void
			{
	
					// Swipe was to the left
				 if (event.offsetX == 1 ) {
					// push the NextView withour any data using 
					var slideViewTransition2:SlideViewTransition = new SlideViewTransition();
					slideViewTransition2.duration = 300;
					slideViewTransition2.direction = ViewTransitionDirection.RIGHT; 
					navigator.pushView( ConvulsingChild, null, null, slideViewTransition2);
				}
			}
	</fx:Script>
	
	<s:layout>
		<s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>
	</s:layout>
	
	<s:Label text="Next screen" />
	
</s:View>