This page describes how to use the default transformations that the toolkit provides as well as add your own specific functionality using the toolkit's API. It may be wise to review the Design of the toolkit as well as the Default Use before moving forward.
First, since the entire toolkit is Object-Oriented, you must extend the tsTouchscreen class. So, create a new JavaScript with this new class definition. Below is an example of how to do this:
function tsTouchscreenExt() {
this.inheritFrom = tsTouchscreen;
this.inheritFrom();
...
}
These lines of code create a new class called tsTouchscreenExt, which inherits all attributes and methods from the tsTouchscreen class. Where the ellipsis (...) is, you can add any additional functionality that will be executed once the toolkit loads. Take a look at the class descriptions in the Design document to see how you can use the toolkit's API to add specific functionality. For example, suppose we wanted to allow the user to be able to drag an HTMLElement around the page. We would give that element an id of "dragIt" just so we can reference it later, and we would add the following two lines of code to our tsTouchscreenExt definition:
var dragIt = document.getElementById("dragIt");
new tsMove(dragIt, dragIt);
Finally, after adding all of the functionality you would like to add, you need to tell the toolkit to load the subclass of tsTouchscreen that you just created. So, outside of the class definition, add the following line of code:
tsTouchscreen.tsInit("tsTouchscreenExt");
The tsInit() method is a static method of the tsTouchscreen class, which causes the class given to it to be loaded once the HTML Document finishes loading. To load the default tsTouchscreen class, you can simply leave the parameter null, otherwise you must pass it (as a string) the name of the subclass of tsTouchscreenyou wish to load.
So, our final JavaScript would be as follows:
function tsTouchscreenExt() {
this.inheritFrom = tsTouchscreen;
this.inheritFrom();
var dragIt = document.getElementById("dragIt");
new tsMove(dragIt, dragIt);
}
tsTouchscreen.tsInit("tsTouchscreenExt");
Now, when loading the toolkit in the <head> section of your HTML document, you also need to load the new JavaScript you just created. Here is the sample code for your HTML document, assuming you called you JavaScript file "TouchscreenToolkitExt.js":
<html>
<head>
<link rel="stylesheet" type="text/css" href="TouchscreenToolkit.css" />
<script type="text/javascript" src="TouchscreenToolkit.js"></script>
<script type="text/javascript" src="TouchscreenToolkitExt.js"></script>
</head>
<body>
<br />
<input type="text" />
<input type="text" />
<br />
<br />
<button id="dragIt" style="width: 200px; height: 50px; position: absolute;">Drag Me</button>
</body>
</html>
It is important to note that, in this example, we extended the functionality of the toolkit without actually modifying the toolkit itself. This is advantageous because, should the toolkit ever change, you will simply be able to replace your old toolkit files with the updated ones and your extension of the toolkit will still work fine. If you would like to add attributes or methods to any of the classes in the toolkit, you should still not modify the original toolkit files, but rather make your modifications within your extended class taking advantage of JavaScript's abilities to add attributes and methods to classes even after they have been defined.
To download the complete working code for this example, click here.