Swipe

A swipe gesture consists of a touch/mousedown start event within the gesture area, and an end event, i.e. either stopping touching the screen, releasing the mouse button, or moving out of the gesture area.

A swipe gesture consists of a touch/mousedown start event within the gesture area, and an end event, i.e. either stopping touching the screen, releasing the mouse button, or moving out of the gesture area.

For the previous sequence of events to be recognized as a horizontal swipe gesture, the start and end points must be at least 1cm apart horizontally. A similar restriction exists for vertical swipe gestures, i.e. in order for a vertical swipe gesture to be recognized properly, the start and end points must be at least 1cm apart vertically. However, please note that this is an approximate figure and may differ from device to device.

MCS supports four swipe events: mcs:swipe-left, mcs:swipe-right, mcs:swipe-up and mcs:swipe-down. The direction of a gesture is determined by the relationship between the start and end points.

Features

Support for the swipe-left gesture is represented by the following feature:

Support for the swap-right gesture is represented by the following feature:

Support for the swipe-up gesture is represented by the following feature:

Support for the swipe-down gesture is represented by the following feature:

Note:

Due to the conflicts between pan and swipe gestures, swipe gestures are not supported on Android <=2.1 and Blackberry devices.

Events

Whenever a swipe gesture is detected, an event is fired when the user stops touching the screen, releases the mouse button, or moves out of the gesture area.

mcs:swipe-left/mcs:swipe-right/mcs:swipe-up/mcs:swipe-down
Property Description Type
target The identifier of the element which the gesture recognizer was observing. Element
x-direction The direction of the gesture; '-1' for mcs:swipe-left; '+1' for mcs:swipe-right; '2' for mcs:swipe-down; '-2' for mcs:swipe-up. int
start The position of the start of the swipe gesture. Position
end The position of the end of the swipe gesture. Position

The Position object consists of the following parameters.

Parameter Description Type
timeStamp The time at which the gesture was at this position, in milliseconds. long
pageX The x-coordinate of the position of the gesture in page coordinates. int
pageY The y-coordinate of the position of the gesture in page coordinates. int

The start and end properties can be used to calculate the distance and the average speed of a gesture. For example, for a horizontal swipe gesture:

var horizontalDistance = abs(event.end.pageX - event.start.pageX);
var horizontalSpeed = horizontalDistance / (event.end.timeStamp - event.start.timeStamp);

Example

The existing elements, namely mcs:handler and event:listener, allow page authors to use gestures.

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
  xmlns:event="http://www.w3.org/2001/xml-events"
  xmlns:cst="http://www.volantis.com/xmlns/2009/07/cf2/template"
  xmlns:sel="http://www.w3.org/2004/06/diselect">
  <head>
    <title>Swipe gestures</title>
    <style type="text/css">
      #swipearea {
        height: 200px;
        background-color: red;
      }
    </style>
    <mcs:script> var t; V$C.linking(function(c){ t = c.get('presenter'); }); </mcs:script>
    <mcs:handler id="swipe-handler" type="text/javascript"> t.setData(event); </mcs:handler>
    <event:listener observer="swipearea" handler="#swipe-handler" event="mcs:swipe-left"/>
    <event:listener observer="swipearea" handler="#swipe-handler" event="mcs:swipe-right"/>
    <event:listener observer="swipearea" handler="#swipe-handler" event="mcs:swipe-up"/>
    <event:listener observer="swipearea" handler="#swipe-handler" event="mcs:swipe-down"/>
  </head>
  <body>
    <cst:template id="presenter">
      <sel:select>
        <sel:when expr="mcs:feature('mcs:gestures.Swipe#Right') or
          mcs:feature('mcs:gestures.Swipe#Left') or
          mcs:feature('mcs:gestures.Swipe#Up') or mcs:feature('mcs:gestures.Swipe#Down')">
          <h4 id="swipearea">Swiping area</h4>
          <div id="msg"/>
          <table>
            <tr>
              <td>Type:</td>
              <td colspan="2"><cst:value path="type"/></td>
            </tr>
            <tr>
              <td>Target ID:</td>
              <td colspan="2"><cst:value path="target.id"/></td>
            </tr>
            <tr>
              <td>x-direction:</td>
              <td colspan="2"><cst:value path="'x-direction'"/></td>
            </tr>
            <tr>
              <td rowspan="3">start</td>
              <td>timestamp:</td>
              <td><cst:value path="start.timeStamp"/></td>
            </tr>
            <tr>
              <td>pageX:</td>
              <td><cst:value path="start.pageX"/></td>
            </tr>
            <tr>
              <td>pageY:</td>
              <td><cst:value path="start.pageY"/></td>
            </tr>
            <tr>
              <td rowspan="3">end</td>
              <td>timestamp:</td>
              <td><cst:value path="end.timeStamp"/></td>
            </tr>
            <tr>
              <td>pageX:</td>
              <td><cst:value path="end.pageX"/></td>
            </tr>
            <tr>
              <td>pageY:</td>
              <td><cst:value path="end.pageY"/></td>
            </tr>
          </table>
        </sel:when>
        <sel:otherwise>
          <div class="warning">Swipe is not supported </div>
        </sel:otherwise>
      </sel:select>
    </cst:template>
  </body>
</html>
Note:

Refer to the Client Framework 2 tutorial for more examples illustrating the use of swipe gestures.

Related topics