<li><a href="web/tizen/cordova/device_w.htm">Device</a></li>
<li><a href="web/tizen/cordova/devicemotion_w.htm">Device Motion</a></li>
<li><a href="web/tizen/cordova/dialogs_w.htm">Dialogs</a></li>
+ <li><a href="web/tizen/cordova/events_w.htm">Events</a></li>
<li><a href="web/tizen/cordova/filetransfer_w.htm">File Transfer</a></li>
<li><a href="web/tizen/cordova/globalization_w.htm">Globalization</a></li>
<li><a href="web/tizen/cordova/networkinformation_w.htm">Network Information</a></li>
<li><a href="device_w.htm">Device</a><p>Information on model, platform and installed version of Cordova.</p></li>
<li><a href="devicemotion_w.htm">Device Motion</a><p>Access to the device's accelerometer.</p></li>
<li><a href="dialogs_w.htm">Dialogs</a><p>Make different types of input dialog boxes and notifications to the user.</p></li>
+ <li><a href="events_w.htm">Events</a><p>Information about events defined in cordova.</p></li>
<li><a href="networkinformation_w.htm">Network Information</a><p>information about connection (cellular, WiFi, ethernet, etc.) and connection related events</p></li>
<li><a href="filetransfer_w.htm">File Transfer</a><p>How to download and upload files using Cordova</p></li>
<li><a href="globalization_w.htm">Globalization</a><p>How to obtain information and performs operations specific to the user's locale, language and timezone</li>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+ <title>Events</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/cordova/events_tutorial_w.htm">Events Tutorial</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/events.html">Events API for Mobile Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/events.html">Events API for Wearable Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/events.html">Events API for TV Web</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>Events</h1>
+
+
+<p>This module defines events provided by Cordova for use in Web API applications. Applicaton can add custom listeners for these events. The listeners take no arguments.
+<p>Module has no objects or properties.</p>
+
+<h2>Events</h2>
+<ul>
+ <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/cordova/events_tutorial_w.htm#deviceready">deviceready</a>
+ <p>Signals that Cordova's device APIs have loaded and are ready to access.</p>
+ </li>
+ <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/cordova/events_tutorial_w.htm#pauseresume">pause</a>
+ <p>Signals that application is put into the background. Typically when screen is being locked or when user switches to a different application.</p>
+ </li>
+ <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/cordova/events_tutorial_w.htm#pauseresume">resume</a>
+ <p>Signals that application is retrieved from the background.</p>
+ </li>
+
+</ul>
+
+<table id="button-press-events">
+<caption>Table: Button Press Events</caption>
+<tbody>
+ <tr>
+ <th>Event</th>
+ <th>Button name</th>
+ </tr>
+ <tr>
+ <td>backbutton</td><td>Back button</td>
+ </tr>
+ <tr>
+ <td>menubutton</td><td>Menu button</td>
+ </tr>
+ <tr>
+ <td>searchbutton</td><td>Search button</td>
+ </tr>
+ <tr>
+ <td>startcallbutton</td><td>Start call button</td>
+ </tr>
+ <tr>
+ <td>endcallbutton</td><td>End call button</td>
+ </tr>
+ <tr>
+ <td>volumedownbutton</td><td>Volume down button</td>
+ </tr>
+ <tr>
+ <td>volumeupbutton</td><td>Volume up button</td>
+ </tr>
+</tbody>
+</table>
+
+<p>See tutorial: <a href="../../../../../org.tizen.tutorials/html/web/tizen/cordova/events_tutorial_w.htm#buttons">How to add button press event listeners</a>.</p>
+
+<h2>Adding event listeners</h2>
+<p>Applications typically should use <span style="font-famiy: monospace">document.addEventListener()</span> to attach an event listener once the <span style="font-famiy: monospace">deviceready</span> event fires.
+This means adding event listeners for events like pause, resume, backbutton, etc. during or after deviceready event handler.</p>
+<p>Example:</p>
+<pre class="prettyprint">
+document.addEventListener("deviceready", onDeviceReady, false);
+
+function onDeviceReady() {
+ document.addEventListener("pause", onPause);
+ document.addEventListener("volumeupbutton", onVolumeUp);
+}
+
+function onPause() {
+ console.log("Application has been put into the background");
+}
+
+function onVolumeUp() {
+ console.log("Volume up button pressed");
+}
+
+</pre>
+
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
<li><a href="web/tizen/cordova/device_tutorial_w.htm">Device</a></li>
<li><a href="web/tizen/cordova/devicemotion_tutorial_w.htm">Device Motion</a></li>
<li><a href="web/tizen/cordova/dialogs_tutorial_w.htm">Dialogs</a></li>
+ <li><a href="web/tizen/cordova/events_tutorial_w.htm">Events</a></li>
<li><a href="web/tizen/cordova/networkinformation_tutorial_w.htm">Network Information</a></li>
<li><a href="web/tizen/cordova/filetransfer_tutorial_w.htm">File Transfer</a></li>
<li><a href="web/tizen/cordova/globalization_tutorial_w.htm">Globalization</a></li>
<p>Demonstrates how you can get access to the device's accelerometer.</p></li>
<li><a href="dialogs_tutorial_w.htm">Dialogs: dialog boxes and notifications</a>
<p>Demonstrates how how to make different types of dialog boxes: alert, confirm, and prompt. Also demonstrates how to make a beep sound.</p></li>
+ <li><a href="events_tutorial_w.htm">Events: events provided by Cordova for use in Web API applications</a>
+ <p>Demonstrates how you can register and use custom listeners for events like deviceready, pause, resume, and button press events.</p></li>
<li><a href="networkinformation_tutorial_w.htm">Network Information: getting information and status of network connections</a>
<p>Demonstrates how you can retrieve information about connection (cellular, WiFi, ethernet, etc.) and how to use connection related events</p></li>
<li><a href="filetransfer_tutorial_w.htm">File Transfer: transfering files</a>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+ <title>Events: events provided by Cordova for use in Web API applications</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile Web" src="../../../images/mobile_s_w.png"/> <img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../../org.tizen.guides/html/web/tizen/cordova/events_w.htm">Events Guide</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/events.html">Events API for Mobile Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/events.html">Events API for Wearable Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/events.html">Events API for TV Web</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Events: events provided by Cordova for use in Web API applications</h1>
+
+<p>This tutorial demonstrates how you can register and use custom listeners for events like deviceready, pause, resume, and button press events.</p>
+
+<h2 id="deviceready">Waiting for deviceready event</h2>
+<p>This event signals that Cordova's device APIs have loaded and are ready to access. You should wait until this event is fired, and after that you
+can start using Cordova features.</p>
+
+<ol>
+<li><p>Prepare handler for the event:</p>
+<pre class="prettyprint">function onDeviceReady() {
+ // Now safe to use Cordova
+}
+</pre>
+</li>
+<li><p>Add event listener:</p>
+<pre class="prettyprint">document.addEventListener('deviceready', onDeviceReady);</pre>
+</li>
+</ol>
+<p>Alternatively you can add deviceready event listener in <span style="font-family: monospace"><body></span> onload hadler, for example:</p>
+<pre class="prettyprint">window.onload = function() {
+ document.addEventListener("deviceready", onDeviceReady);
+};</pre>
+
+<h2 id="buttons">Pause and resume events</h2>
+<p>We will add event listeners for pause and resume events.</p>
+<p>Pause signals that application is put into the background. Typically when screen is being locked or when user switches to a different application. Resume signals tha native platform pulls the application out from the background.</p>
+
+<ol>
+<li><p>Prepare our event handlers for pause and resume events.<p>
+ <pre class="prettyprint">
+function onPause() {
+ console.log("Application paused");
+}
+
+function onResume() {
+ console.log("Application resumed");
+}</pre>
+</li>
+<li><p>Add event listeners in deviceready event handler (see <a href="#deviceready">onDeviceReady</a> above).<p>
+ <pre class="prettyprint">document.addEventListener("pause", onPause);
+document.addEventListener("resume", onResume);</pre>
+</li>
+</ol>
+
+<h2 id="buttons">Button press events</h2>
+<p>We will add event listeners for menu, volume up and volume down buttons. Each event is triggered when corresponding button is pressed.</p>
+
+<ol>
+<li><p>Prepare our event handlers for menubutton, volumeupbutton, and volumeupbutton events.<p>
+ <pre class="prettyprint">
+function onVolumeChanged() {
+ console.log("Volume changed");
+}
+
+function onMenuButton() {
+ console.log("Menu button pressed");
+}</pre>
+</li>
+<li><p>In deviceready event handler (see <a href="#deviceready">onDeviceReady</a> above) add listeners. For this example will use one listener for both volume up and down buttons.<p>
+ <pre class="prettyprint">document.addEventListener("menubutton", onMenuButton);
+document.addEventListener("volumeupbutton", onVolumeChanged);
+document.addEventListener("volumedownbutton", onVolumeChanged);</pre>
+</li>
+</ol>
+<p>Now press buttons and see results in system console.</p>
+
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
projects / sdk / online-doc.git / commitdiff