C# Programming Tutorial(8920128728): How to do Tap and Touch gestures in PhoneGap?

Saturday, 5 December 2020

How to do Tap and Touch gestures in PhoneGap?

In our previous section, we learned about the hammer library and how we can detect the gesture in PhoneGap. In this section we will learn about the tap and touch gestures. We will take a closer look at how these gestures work. We will use our previous example and make some changes in it for tap and touch gestures. These are the following steps used to develop tap and touch gesture application:

1) Create index2.html

We will create a new file index2.html with the same code as preset in the index.html. We will make changes later in index2.html file not in index.html.

3) Getting the gesture div

Now, we will get the gesture div by using id and create the hammer manager object. The hammer manager object doesn't have any pre saved event. So, we need to define the event on our own.

var myElement = document.getElementById('gestureDiv');  
var mc = new Hammer.Manager(myElement);  

3) Adding Event

Now, we will add single tap and double tap events because the hammer manager object doesn't have any pre saved event. We will use the add function of the hammer manager and pass the event which we want to add. We will add the events in the following way:

//Events Hammer will detect
mc.add(new Hammer.Tap({ event: 'doubletap', taps: 2 }));
mc.add(new Hammer.Tap({ event: 'singletap' }));

4) Attach both the events

Now, we will attach or coordinate both the events with each other because when we tap once that is already in event, we can never get to the double tap unless we made these two events work together. We will attach both the events using the get function of the hammer manager in the following way:

//Make them work together
mc.get('doubletap').recognizeWith('singletap');
mc.get('singletap').requireFailure('doubletap');

5) Detect the event

When we press the single tap or double tap, the anonymous function will be called. In this function, we will set the event type to our result div in the following way:

mc.on("singletap doubletap", function(ev){
document.getElementById("resultDiv").innerHTML = ev.type;
})

Now, we will run our application on PhoneGap Developer App or web using local host.

Complete Code

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset= "utf-8" >  
        <meta name = "viewport" content = "initial-scale = 1, maximum-scale = 1, user-scalable = no, width = device-width" >  
        <script src = "hammer.js" ></script>  
        <script src = "hammertime.js" ></script>  
        <style>  
        #gestureDiv  
            {  
                width : 300px;  
                height : 400px;  
                background-color : red;  
                border : 1px solid black;  
            }  
        </style>  
        <title> Gesture Example </title>  
    </head>  
    <body>  
        <div id = "gestureDiv" ></div>  
        <div id = "resultDiv" ></div>  
        <script type = "text/javascript" src = "cordova.js" ></script>  
        <script>  
          var myElement = document.getElementById('gestureDiv');  
          var mc = new Hammer.Manager(myElement);  
            
          //Events Hammer will detect  
          mc.add(new Hammer.Tap({event : 'doubletap', taps : 2}));  
          mc.add(new Hammer.Tap({event : 'singletap'}));  
              
          //Make them work together  
          mc.get('doubletap').recognizeWith('singletap');  
          mc.get('singletap').requireFailure('doubletap');  
              
            
          mc.on("singletap doubletap", function(ev){  
              document.getElementById("resultDiv").innerHTML = ev.type;  
          })  
        </script>  
    </body>  
</html>  

Output

Tap and Touch gestures in PhoneGap

C# Programming Tutorial(8920128728)