Stephen Chin is a technical expert in RIA technologies, and Chief Agile Methodologist at GXS. He coauthored the Apress Pro JavaFX Platform title, which is the leading reference for JavaFX, and is lead author of the Pro Android Flash title. In addition, Stephen runs the very successful Silicon Valley JavaFX User Group, which has hundreds of members and tens of thousands of online viewers, and also is co-organizer for the Flash on Devices User Group. Finally, he is a Java Champion, chair of the OSCON Java Conference and an internationally recognized speaker featured at Devoxx, Jazoon and JavaOne, where he received a Rock Star Award. Steve can be followed on twitter @steveonjava and reached via his blog http://steveonjava.com Stephen is a DZone MVB and is not an employee of DZone and has posted 30 posts at DZone. You can read more from them at their website. View Full User Profile

Flash Android Touch Checker

08.13.2011
| 8395 views |
  • submit to reddit

This is the first in a 3 part blog series I am doing on Flash Mobile technology. With the release of Flash Builder 4.5, Flash and Flex now have support for building mobile applications that target Android and, with an update coming out on 6/20, also iPhone and Blackberry devices. In my opinion, this is now the best platform for building cross-platform mobile applications available today.

When targeting applications for mobile development you both have different constraints due to screen size and limited CPU/memory, as well as additional opportunities for enhancing your application by taking advantage of features like multitouch, the accelerometer, and the GPS. In this blog I chose to focus on multitouch, because it is something that every application should take advantage of.

Flash supports 5 different multitouch gestures. The following table describes the gestures and includes a figure demonstrating the multitouch action needed to trigger it.

Gesture Name Event Description
Pan gesturePan Place two fingers on the screen, and drag left or right; commonly used for scrolling the contents of the whole screen
Rotate gestureRotate Touch the screen with two fingers, and move them in an arc. This is an interactive gesture that will often be used to perform arbitrary rotation of objects.
Zoom gestureZoom Place two fingers on the screen, and move them apart or together along a single line. Moving the fingers apart indicates zooming in, and moving the fingers together indicates zooming out.
Swipe gestureSwipe Place one finger on the screen, and quickly swipe it in a single line of travel. Swipes are commonly used to change the screen contents or take an alternate action, such as deleting an item from a list.
Two-Finger Tap gestureTwoFingerTap Lightly tap the screen with two fingers, making only brief contact. This can be used as an alternative or secondary click where more than one action is required.

Pictures courtesy of GestureWorks

To discover if the device your application is running on supports gestures and to query the gesture capabilities dynamically, you can call the following static methods on the Multitouch class:

  • Multitouch.supportsGestureEvents: Whether the device you are running on supports emitting gesture events
  • Multitouch.supportedGestures: A list of strings, one for each of the supported multitouch events

Flash has two different modes of multitouch recognition that are mutually exclusive. You can either get the raw multitouch events by setting inputMode to TOUCH_POINT or can recognize gestures by choosing an inputMode of GESTURE. Before using gesture events, you should ensure that the inputMode to gesture input mode like this:

Multitouch.inputMode = MultitouchInputMode.GESTURE;

This is also happens to be the default input mode, so if you haven’t explicitly set it to TOUCH_POINT then you should be fine.

To both demonstrate the use of gestures as well as to test the availability of different gesture events on your device, we will create a simple Flex application called Gesture Check.

The first thing we will do to create the application is to build a declarative XML layout for the UI. For this we are going to use some of the basic layout and UI classes of Flex, including the following:
H/VGroup: The HGroup and VGroup classes let you arrange a set of components in a simple vertical or horizontal stacked layout. The components are laid out in order, with the distance between set by the gap property.

  • Label: A simple component that displays an uneditable text string; this is commonly used as the label for another control in a form.
  • Image: The Image class lets you display a graphic that can be loaded from a GIF, JPEG, PNG, SVG, or SWF file. In this example, we will be using transparent PNGs.
  • CheckBox: A form control that has a value of either selected or unselected with a visual indicator; it also includes a text description as part of the display.

Using these layouts and controls, we can put together a simple user interface that displays the status of whether a particular multitouch gesture is enabled on the device and whether the user has successfully tested the gesture. The code for the first gesture of “Swipe” can be created declaratively as follows:

<?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="Supported Gestures" initialize="init()">
  <s:VGroup paddingTop="15" paddingBottom="15"
                    paddingLeft="20" paddingRight="20" gap="10">
    <s:HGroup verticalAlign="middle" gap="20">
      <s:Label text="Swipe" fontSize="36" width="110"/>
      <s:Image source="@Embed('/gestures/swipe.png')" width="137"/>
      <s:VGroup gap="10">
        <s:CheckBox content="Enabled" mouseEnabled="false"/>
        <s:CheckBox content="Tested" mouseEnabled="false"/>
      </s:VGroup>
    </s:HGroup>
  </s:VGroup>
</s:View>

Next, we need to add some Actionscript code that will set the CheckBox to enabled if the gesture is supported and will tick the tested box once the user successfully performs the gesture. To find the list of supported gestures we will use the supportedGestures variable described earlier, which we can iterate over to mark the checkboxes.

To test for successful gesture actions, we can add event listeners programmatically using the the addEventListener() function. It takes two parameters, the gesture to listen for, followed by a callback function.
The completed code is shown here:

<?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="Supported Gestures" initialize="init()">
  <fx:Script>
    <![CDATA[
      import flash.ui.Multitouch;
 
      private function init():void {
        for each(var gesture:String in Multitouch.supportedGestures) {
          this[gesture+"Enabled"].selected = true;
          addEventListener(gesture, function(e:GestureEvent):void {
            e.currentTarget[e.type+"Tested"].selected = true;
          });
        }
      }
    ]]>
  </fx:Script>
  <s:VGroup paddingTop="15" paddingBottom="15"
                    paddingLeft="20" paddingRight="20" gap="10">
    <s:HGroup verticalAlign="middle" gap="20">
      <s:Label text="Pan" fontSize="36" width="110"/>
      <s:Image source="@Embed('/gestures/pan.png')" width="137"/>
      <s:VGroup gap="10">
        <s:CheckBox id="gesturePanEnabled" content="Enabled" mouseEnabled="false"/>
        <s:CheckBox id="gesturePanTested" content="Tested" mouseEnabled="false"/>
      </s:VGroup>
    </s:HGroup>
    <s:HGroup verticalAlign="middle" gap="20">
      <s:Label text="Rotate" fontSize="36" width="110"/>
      <s:Image source="@Embed('/gestures/rotate.png')" width="137"/>
      <s:VGroup gap="10">
        <s:CheckBox id="gestureRotateEnabled" content="Enabled" mouseEnabled="false"/>
        <s:CheckBox id="gestureRotateTested" content="Tested" mouseEnabled="false"/>
      </s:VGroup>
    </s:HGroup>
    <s:HGroup verticalAlign="middle" gap="20">
      <s:Label text="Zoom" fontSize="36" width="110"/>
      <s:Image source="@Embed('/gestures/zoom.png')" width="137"/>
      <s:VGroup gap="10">
        <s:CheckBox id="gestureZoomEnabled" content="Enabled" mouseEnabled="false"/>
        <s:CheckBox id="gestureZoomTested" content="Tested" mouseEnabled="false"/>
      </s:VGroup>
    </s:HGroup>
    <s:HGroup verticalAlign="middle" gap="20">
      <s:Label text="Swipe" fontSize="36" width="110"/>
      <s:Image source="@Embed('/gestures/swipe.png')" width="137"/>
      <s:VGroup gap="10">
        <s:CheckBox id="gestureSwipeEnabled" content="Enabled" mouseEnabled="false"/>
        <s:CheckBox id="gestureSwipeTested" content="Tested" mouseEnabled="false"/>
      </s:VGroup>
    </s:HGroup>
    <s:HGroup verticalAlign="middle" gap="20">
      <s:Label text="Two-Finger Tap" fontSize="36" width="110"/>
      <s:Image source="@Embed('/gestures/twoFingerTap.png')" width="137"/>
      <s:VGroup gap="10">
        <s:CheckBox id="gestureTwoFingerTapEnabled" content="Enabled" mouseEnabled="false"/>
        <s:CheckBox id="gestureTwoFingerTapTested" content="Tested" mouseEnabled="false"/>
      </s:VGroup>
    </s:HGroup>
    <s:Label text="Graphics courtesy of GestureWorks.com" fontSize="12"/>
  </s:VGroup>
</s:View>

Notice that we have added a few IDs to the CheckBoxes in order to reference them from the initialize function. The naming convention is the gesture name appended with the words “Enabled” or “Tested”. The same naming convention is used in the code that sets the selected state.

Upon running this example you will see the following:

Most modern Android devices support the full complement of gestures, so you will get back 100% Enabled when running on device. However, running in the emulator it will depend on what platform you are running on.

Try testing all 5 gestures and see if you can successfully test them on your own device.

From http://flash.steveonjava.com/flash-android-touch-checker/

Published at DZone with permission of Stephen Chin, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Tags:

Comments

Guido Amabili replied on Sun, 2011/08/14 - 1:43pm

Hello Stephen,

May I ask if you know QML from QT and what do you think about it ? Now that Oracle has abandoned JavaFX Script and you started the project Visage, QML looks a lot like JavaFX Script ?

Maybe there should be a DZone dedicated to it ?

 

 

Nathan Dias replied on Mon, 2011/10/10 - 9:59am

which book is good for android? Curso de webdesign

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.