Introduction
In this article we explain the touch events in a Windows 8 Metro application with the help of the HTML 5 and JavaScript. Here, we present a simple example which contains different points. In each point we have to display the different touch events. We have to use a pointerEventListener function and use a different canvas.
Here we have to explain the different touch events features in this application with the help of this example.
So, we have to follow these steps as given below.
Step 1 : First of all you have to create a new Metro Style Application; let us see the description with images of how you will create it.
- Open Visual Studio 2011
- File>New>Project
- Choose Template>JavaScript> Blank Application
- Rename this Application
![homepage.gif]()
Step 2 : In the Solution Explorer there are two files that we will primarily work with; .js and .html files. In the images folder add any image in this application.
![solutionexplorer.gif]()
Step 3 : In this application we use canvases.
Code :
<div id="column2">
<canvas class="touchCanvas" id="touchCanvas"></canvas>
<canvas class="setPointerCanvas" id= "setPointerCanvas"></canvas>
<canvas class="touchGesturesCanvas" id="touchGesturesCanvas"></canvas>
<canvas class="multiTouchCanvas" id="multiTouchCanvas"></canvas>
</div>
Step 4 : The default.html page contains this body with the following code as below.
Code : Let us see the code which is given below.
<!DOCTYPE html>
<html>
<head>
<title>Touch Events</title>
<!-- WinJS references -->
<link href="winjs/css/ui-light.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="WinJS/js/base.js"></script>
<script type="text/javascript" src="WinJS/js/ui.js"></script>
<script type="text/javascript" src="WinJS/js/wwaapp.js"></script>
<!-- Base references -->
<link rel="stylesheet" type="text/css" href="css/base-sdk.css" />
<script type="text/javascript" src="base-sdk.js"></script>
<!-- Sample references -->
<link rel="stylesheet" type="text/css" href="css/program.css" />
<script type="text/javascript" src="program.js"></script>
</head>
<body role="application" style="background-color:#f2c8c8">
<div id="rootGrid">
<div id="header" role="contentinfo"></div>
<div id="content">
<h1 id="featureLabel">Touch Events</h1>
<h2 id="inputLabel">Input</h2>
<div id="input" role="main" aria-labelledby="inputLabel">
<div class="options">
<h3 id="listLabel">Select</h3>
<select size="4" id="scenarios" aria-labelledby="listLabel" style="background-color:#ff6a00">
<option selected="selected" value="1">1) Pointer Events</option>
<option value="2">2) Gestures Events</option>
<option value="3">3) Multitouch Pointer Events</option>
<option value="4">4) Pointer Capture</option>
</select>
</div>
<div class="details" role="region" aria-labelledby="descLabel" aria-live="assertive">
<h3 id="descLabel">Description</h3>
<!-- For 1 Input -->
<div class="item" id="scenario1Input">
<p>This point describes how to register for touch pointer events.</p>
<button class="action" id="scenario1Clear" style="color:#f00">Clear Messages</button>
<br /><br />
</div>
<!-- For 2 Input -->
<div class="item" id="scenario2Input">
<p>This point describes how to register gesture events.</p>
<button class="action" id="ButtonClearEvents2" style="color:#f00">Clear Messages</button>
</div>
<!-- For 3 Input -->
<div class="item" id="scenario3Input">
<p>This point describes how to capture multitouch input to a canvas element.</p>
<button id="scenario3Clear" class="action" style="color:#f00">Clear Messages</button>
</div>
<!-- For 4 Input -->
<div class="item" id="scenario4Input">
<p>This point describes how to capture a pointer to an element.
Once the pointer is captured, all subsequent events related to that pointer will be sent to this element, even if the pointer action takes places outside the element.
</p>
<button id="scenario4Clear" class="action" style="color:#f00">Clear Messages</button>
</div>
</div>
</div>
<h2 id="outputLabel">Output</h2>
<div id="output" role="region" aria-labelledby="outputLabel" aria-live="assertive">
<div id="statusMessage"></div>
<div id="column1">
<!-- For 1 Output -->
<div class="item" id="scenario1Output" >
<div class="outputevents" id="outputEvents1">
<p>Touch events will be listed here.</p>
</div>
</div>
<!-- For 2 Output -->
<div class="item" id="scenario2Output" >
<div class="outputevents" id="outputEvents2">
<p>Touch events will be listed here.</p>
</div>
</div>
<!-- For 3 Output -->
<div class="item" id="scenario3Output" >
<div class="outputevents" id="outputEvents3">
<p>Touch events will be listed here.</p>
</div>
</div>
<!-- For 4 Output -->
<div class="item" id="scenario4Output">
<div class="outputevents" id="outputEvents4">
<p>Touch events will be listed here.</p>
</div>
</div>
</div>
<div id="column2">
<canvas class="touchCanvas" id="touchCanvas"></canvas>
<canvas class="setPointerCanvas" id= "setPointerCanvas"></canvas>
<canvas class="touchGesturesCanvas" id="touchGesturesCanvas"></canvas>
<canvas class="multiTouchCanvas" id="multiTouchCanvas"></canvas>
</div>
</div>
</div>
</div>
</body>
</html>
Step 5 : In the js file we have some changes in this application. So, the code (shown below) will be like:
Code : program.js file.
(function () {
function initialize() {
scenarios.addEventListener("change", onScenarioChanged, false);
// Scenario 1
scenario1Clear.addEventListener("click", scenario1ClearMessageWindow, false);
touchCanvas.style.display = "block";
// Add Touch Event Listeners
var target = document.getElementById("touchCanvas");
target.addEventListener("MSPointerDown", pointerEventListener, false);
target.addEventListener("MSPointerUp", pointerEventListener, false);
target.addEventListener("MSPointerMove", pointerEventListener, false);
target.addEventListener("MSPointerOver", pointerEventListener, false);
target.addEventListener("MSPointerOut", pointerEventListener, false);
// Scenario 1
// Output Touch Event Details
function pointerEventListener(evt) {
var str = "Event " + evt.type + " at " + evt.clientX +
", " + evt.clientY + " for pointer ID " + evt.pointerId + "<br/>";
outputEvents1.innerHTML = str + outputEvents1.innerHTML;
}
// Clear output field for Scenario 1
function scenario1ClearMessageWindow() {
outputEvents1.innerHTML = "<p>Touch events will be listed here.</p>";
}
Step 6 : After running this application we get the following output.
![output.gif]()
The first point describes how to register for touch pointer events. The clear button is used for clearing the text message in the text box.
![output1.gif]()
In the gesture events movement on mouse click.
![output2.gif]()
The third point describes how to capture multitouch input to a canvas element. The multitouch pointer events effect anywhere on the mouse movement click.
![output3.gif]()
In the last point, a pointer captures a pointer to an element. Once the pointer is captured, all subsequent events related to that pointer will be sent to this element, even if the pointer action takes place outside the element The touch effect is presented on a mouse move.
![output4.gif]()
Here are some useful resources.
Touch events in Silverlight for Windows 7 mobile application
Details Tag in HTML5
Use DataList Tag as Drop Down List in HTML5
Touch events in Silverlight for Windows 7 mobile application: Part 2
Touch screen in Windows Phone 7