[InputDevice] Added content of tutorial

Change-Id: Icac196f7aefb2dbb2e9c04020fcd9e4b8cbdaeb4
Signed-off-by: Piotr Kosko <p.kosko@samsung.com>

diff --git a/org.tizen.tutorials/html/web/tizen/ui/inputdevice_tutorial_w.htm b/org.tizen.tutorials/html/web/tizen/ui/inputdevice_tutorial_w.htm
index f05621b..88e4736 100644 (file)
--- a/org.tizen.tutorials/html/web/tizen/ui/inputdevice_tutorial_w.htm
+++ b/org.tizen.tutorials/html/web/tizen/ui/inputdevice_tutorial_w.htm
@@ -23,16 +23,15 @@
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Content</p>
         <ul class="toc">
-            <!-- TODO change internal links
-            <li><a href="#read">Reading the Content of an Archive</a></li>
-            <li><a href="#create">Creating an Archive</a></li>
-            <li><a href="#extract">Extracting Files from an Archive</a></li>-->
+            <li><a href="#getkeys">Getting list of all supported keys</a></li>
+            <li><a href="#getkeyinfo">Gathering information about key</a></li>
+            <li><a href="#reg_unreg">Register / unregister input device key</a></li>
         </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
              <li><a href="../../../../../org.tizen.guides/html/web/tizen/ui/inputdevice_w.htm">InputDevice Guide</a></li>
              <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/inputdevice.html">InputDevice API for Mobile Web</a></li>
-             <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/inputdevice.html">InputDevice API for Mobile Web</a></li>
+             <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/inputdevice.html">InputDevice API for Wearable Web</a></li>
         </ul>
     </div></div>
 </div>
@@ -40,150 +39,136 @@
 <div id="container"><div id="contents"><div class="content">
 <h1>Input Device: Example operations with InputDevice API</h1>
 
-<!-- TODO changed this content for inputdevice plugin
-<p>This tutorial demonstrates how you can create, browse, and extract ZIP archives.</p>
-
-  <table class="note"> 
-<tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The Archive API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. 
-<p>The Archive API is supported on all Tizen Emulators.</p></td> 
-    </tr> 
-   </tbody> 
-  </table>
+<p>This tutorial demonstrates how its possible to manage input device keys and perform custom actions when are pressed.</p>
 
 <h2>Warm-up</h2>
-<p>Become familiar with the Archive API basics by learning about:</p>
+<p>Become familiar with the InputDevice API basics by learning about:</p>
 <ul> 
- <li><a href="#read">Reading the Content of an Archive</a> <p>Open an archive and check its content.</p> </li>
- <li><a href="#create">Creating an Archive</a> <p>Create a new archive file and add files to it.</p> </li>
- <li><a href="#extract">Extracting Files from an Archive</a> <p>Extract all files from an archive, or extract a selected file.</p></li>
+ <li><a href="#getkeys">Getting list of all supported keys</a> <p>Getting list of all supported keys and perform some action.</p> </li>
+ <li><a href="#getkeyinfo">Gathering information about key</a> <p>Gathering code of key by key name.</p> </li>
+ <li><a href="#reg_unreg">Register / unregister input device key</a> <p>Registering input device keys to handle DOM events for them.</p></li>
 </ul>
 
-                <h2 id="read" name="read">Reading the Content of an Archive</h2>
+<h2 id="getkeys" name="getkeys">Getting list of all supported keys</h2>
 
-<p>Opening an archive and accessing a list of its members is a basic archive management skill:</p>
+<p>First and basic operation with managing input device keys is to gather list of all supported keys:</p>
 <ol>
-<li><p>To access the archive file, use the <span style="font-family: Courier New,Courier,monospace">open()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html#ArchiveManager">wearable</a> applications). The provided callback function receives an <span style="font-family: Courier New,Courier,monospace">ArchiveFile</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveFile">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html#ArchiveFile">wearable</a> applications).</p>
-
-<pre class="prettyprint">var myArchive = null;
-function openSuccess(arch)
-{
-&nbsp;&nbsp;&nbsp;console.log(&quot;ArchiveFile mode: &quot; + arch.mode);
-&nbsp;&nbsp;&nbsp;myArchive = arch;
-}
-tizen.archive.open(&quot;downloads/archive.zip&quot;, &quot;r&quot;, openSuccess); </pre> </li>
-
-<li> <p>Get the list of all files contained inside the archive using the <span style="font-family: Courier New,Courier,monospace">getEntries()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveFile</span> interface.</p>
+<li><p>To get a supported key list <span style="font-family: Courier New,Courier,monospace">getSupportedKeys()</span> method of the <span style="font-family: Courier New,Courier,monospace">InputDeviceManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/inputdevice.html#InputDeviceManager">mobile</a><!-- and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/inputdevice.html#InputDeviceManager">wearable</a>--> applications).</p>
 
 <pre class="prettyprint">
-function listSuccess(members)
-{
-&nbsp;&nbsp;&nbsp;if (members.length === 0)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&quot;The archive is empty&quot;);
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
-&nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;console.log(&quot;Files in the archive:&quot;)
-&nbsp;&nbsp;&nbsp;for (var i=0; i&lt;members.length; i++)
-&nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(members[i].name);
-&nbsp;&nbsp;&nbsp;}
+var keyCodes = {};
+var supportedKeys = tizen.inputdevice.getSupportedKeys();
+
+console.log("Supported keys list");
+for (var i = 0; i &lt; supportedKeys.length; ++i) {
+   keyCodes[supportedKeys[i].name] = supportedKeys[i].code;
+   console.log(i + " : " + supportedKeys[i].name + " - " + supportedKeys[i].code);
 }
-myArchive.getEntries(listSuccess);</pre>
-</li>
-<li><p>After the work with the archive is finished, close the archive  using the <span style="font-family: Courier New,Courier,monospace">close()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveFile</span> interface.</p>
+</pre> </li>
+
+<li> <p>Gathered list could be used for handling <em>keydown</em> and <em>keyup</em> events.</p>
 
-<pre class="prettyprint">
-archive.close();</pre>
-</li>
 </ol>
 
-                <h2 id="create" name="create">Creating an Archive</h2>
+<h2 id="getkeyinfo" name="getkeyinfo">Gathering information about key</h2>
 
-<p>Creating an archive and adding files to it is a basic archive management skill:</p>
+<p>It is not necessary to gather informations about all supported keys, the <span style="font-family: Courier New,Courier,monospace">getKey()</span> method of the <span style="font-family: Courier New,Courier,monospace">InputDeviceManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/inputdevice.html#InputDeviceManager">mobile</a><!-- and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/inputdevice.html#InputDeviceManager">wearable</a>--> applications).
+When list of key is known, each key could be checked separately.</p>
 <ol>
 
-<li><p>To create the archive file, use the <span style="font-family: Courier New,Courier,monospace">open()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html#ArchiveManager">wearable</a> applications) and set the mode as <span style="font-family: Courier New,Courier,monospace">w</span>:</p>
-
+<li>
+<p>First, it's needed to list of keys, that we are interested.</p>
 <pre class="prettyprint">
-tizen.archive.open(&quot;downloads/new_archive.zip&quot;, &quot;w&quot;, createSuccess);</pre>
+var keys = ["VolumeUp", "VolumeDown"];
+var keyCodes = {};
+</pre>
 </li>
 
-<li>Add a file to the archive using the <span style="font-family: Courier New,Courier,monospace">add()</span> method. The file can be specified using a virtual path:
-
-
-<pre class="prettyprint">
-function progressCallback(opId, val, name)
-{
-&nbsp;&nbsp;&nbsp;console.log(&quot;opId: &quot; + opId + &quot; with progress val: &quot; + (val * 100).toFixed(0) + &quot;%&quot;);
-}
-function successCallback()
-{
-&nbsp;&nbsp;&nbsp;console.log(&quot;File added&quot;);
-}
-function createSuccess(archive)
-{
-&nbsp;&nbsp;&nbsp;archive.add(&quot;downloads/file.txt&quot;, successCallback, null, progressCallback);
+<li><p>Second step is to check result of <span style="font-family: Courier New,Courier,monospace">getKey()</span> call, if it's not <em>null</em> (if null, it would mean that this key is not supported). </p>
+</li><pre class="prettyprint">
+for (var i = 0; i &lt; keys.length; i++) {
+    try {
+        var key = tizen.inputdevice.getKey(keys[i]);
+        if (key == null) {
+            console.log("key: " + keys[i] + " is not supported");
+        } else {
+            keyCodes[key[i].name] = key[i].code;
+        }
+    } catch(e) {
+        console.log("error: " + e.name + ":" + e.message + ", when getting key with name " + keys[i]);
+    }
 }
 </pre>
 </li>
 </ol>
-           
-                <h2 id="extract" name="extract">Extracting Files from an Archive</h2>
 
-<p>Extracting a file from an archive is a basic archive management skill:</p>
+<h2 id="reg_unreg" name="reg_unreg">Register / unregister input device key</h2>
+<p>Changing action of key supported on device is main feature of this module:</p>
 
 <ol>
 <li>
-<p>To access an archive file, use the <span style="font-family: Courier New,Courier,monospace">open()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html#ArchiveManager">wearable</a> applications). The &quot;r&quot; mode is suitable for extracting from the archive.</p>
-
-<pre class="prettyprint">
-tizen.archive.open(&quot;downloads/some_archive.zip&quot;, &quot;r&quot;, openSuccess, openError);</pre>
+<p>To gather supported keys we call code as was mentioned in <a href="#getkeys">Getting list of all supported keys</a>.</p>
 </li>
 
-<li>To extract files:
-<ul>
 <li>
-<p>To extract all files from the archive, use the <span style="font-family: Courier New,Courier,monospace">extractAll()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveFile</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveFile">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html#ArchiveFile">wearable</a> applications).</p>
+<p>To register all supported keys for handling <em>keydown</em> and <em>keyup</em> events:</p>
 
 <pre class="prettyprint">
-function progressCallback(opId, val, name)
-{
-&nbsp;&nbsp;&nbsp;console.log(&quot;extracting operation (: &quot; + opId + &quot;) is in progress (&quot; + (val * 100).toFixed(1) + &quot;%)&quot;);
+var codeNamesMap = {};
+var supportedKeys = tizen.inputdevice.getSupportedKeys();
+
+for (var i = 0; i &lt; supportedKeys.length; ++i) {
+   try {
+       tizen.inputdevice.registerKey(supportedKeys[i].name);
+       codeNamesMap[supportedKeys[i].code] = supportedKeys[i].name;
+       console.log("key: " + supportedKeys[i].name + " was registered for event handling");
+   } catch(error) {
+       console.log("failed to register " + supportedKeys[i].name + ": " + error);
+   }
 }
-
-function openSuccess(archive)
-{
-&nbsp;&nbsp;&nbsp;archive.extractAll(&quot;music&quot;, null, null, progressCallback);
-}</pre>
+</pre>
 </li>
+
 <li>
-<p>To extract only a selected file from the archive, use the <span style="font-family: Courier New,Courier,monospace">extract()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveFileEntry</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveFileEntry">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html#ArchiveFileEntry">wearable</a> applications).</p>
-<p>First, get the <span style="font-family: Courier New,Courier,monospace">archiveFileEntry</span> object using the <span style="font-family: Courier New,Courier,monospace">getEntryByName()</span> or <span style="font-family: Courier New,Courier,monospace">getEntries()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveFile</span> interface.</p>
+<p>To handle events for registered keys:</p>
+<pre class="prettyprint">
+window.addEventListener("keydown",
+    function(keyEvent) {
+        if(codeNamesMap.hasOwnProperty(keyEvent.keyCode)) {
+            console.log("Registered key was pressed");
+            //could define some custom action
+        } else {
+            console.log("Some other key was pressed");
+        }
+    }
+);
+
+window.addEventListener("keyup",
+    function(keyEvent) {
+        if(codeNamesMap.hasOwnProperty(keyEvent.keyCode)) {
+            console.log("Registered key was released");
+            //could define some custom action
+        } else {
+            console.log("Some other key was released");
+        }
+    }
+);
+</pre>
+</li>
 
+<li>
+<p>To unregister keys, when custom actions are no longer needed:</p>
 <pre class="prettyprint">
-function extractSuccessCallback()
-{
-&nbsp;&nbsp;&nbsp;console.log(&quot;File extracted&quot;);
-}
-function getEntrySuccess(entry)
-{
-&nbsp;&nbsp;&nbsp;entry.extract(&quot;downloads/extract&quot;, extractSuccessCallback);
+for (var i = 0; i &lt; supportedKeys.length; ++i) {
+   tizen.inputdevice.unregisterKey(supportedKeys[i].name);
+   console.log("key: " + supportedKeys[i].name + " was unregistered for event handling");
 }
-
-function openSuccess(archive)
-{
-&nbsp;&nbsp;&nbsp;archive.getEntryByName(&quot;my_file.txt&quot;, getEntrySuccess);
-}</pre>
-</li>
-</ul>
+</pre>
+<p>After unregistration <em>keydown</em> and <em>keyup</em> events would not be triggered for those keys.</p>
 </li>
 </ol>
--->
+
+
 <script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../../scripts/showhide.js"></script>