</li>
<li><a href="web/connectivity/connectivity_cover_w.htm" target="content">Connectivity and Wireless</a>
<ul>
- <li><a href="web/connectivity/bluetooth_w.htm" target="content">Bluetooth</a>
- <ul>
- <li><a href="web/connectivity/task_bluetoothchat_w.htm" target="content">Task: Bluetooth Chat</a></li>
- </ul>
- </li>
+ <li><a href="web/connectivity/bluetooth_w.htm" target="content">Bluetooth</a></li>
<li><a href="web/connectivity/iotcon_w.htm" target="content">IoT Connectivity</a></li>
- <li><a href="web/connectivity/nfc_w.htm" target="content">NFC</a>
- <ul>
- <li><a href="web/connectivity/task_contactsexchanger_w.htm" target="content">Task: Contacts Exchanger</a></li>
- </ul>
- </li>
+ <li><a href="web/connectivity/nfc_w.htm" target="content">NFC</a></li>
<li><a href="web/connectivity/secure_element_w.htm" target="content">Secure Element Access</a></li>
- <li><a href="web/connectivity/download_w.htm" target="content">Content Downloads</a>
- <ul>
- <li><a href="web/connectivity/task_downloadmanager_w.htm" target="content">Task: Download Manager</a></li>
- </ul>
- </li>
+ <li><a href="web/connectivity/download_w.htm" target="content">Content Downloads</a></li>
<li><a href="web/connectivity/convergence_w.htm" target="content">Convergence Services</a></li>
</ul>
</li>
<li><a href="web/messaging/messaging_cover_w.htm" target="content">Messaging</a>
<ul>
- <li><a href="web/messaging/messages_w.htm" target="content">Messages</a>
- <ul>
- <li><a href="web/messaging/task_chatter_w.htm" target="content">Task: Chatter</a></li>
- </ul>
- </li>
+ <li><a href="web/messaging/messages_w.htm" target="content">Messages</a></li>
<li><a href="web/messaging/push_w.htm" target="content">Push Notification</a></li>
</ul>
</li>
<li><a href="web/sensors/sensors_cover_w.htm" target="content">Sensors</a>
<ul>
<li><a href="web/sensors/ham_w.htm" target="content">Human Activity Monitor</a></li>
- <li><a href="web/sensors/device_sensors_w.htm" target="content">Device Sensors</a>
- <ul>
- <li><a href="web/sensors/task_sensorball_w.htm" target="content">Task: Sensor Ball</a></li>
- </ul>
- </li>
+ <li><a href="web/sensors/device_sensors_w.htm" target="content">Device Sensors</a></li>
<li><a href="web/sensors/ham_gesture_w.htm">Gesture Recognition</a></li>
</ul>
</li>
<ul>
<li><a href="web/personal/account_w.htm" target="content">Account Management</a></li>
<li><a href="web/personal/bookmarks_w.htm" target="content">Bookmarks</a></li>
- <li><a href="web/personal/calendar_w.htm" target="content">Calendar</a>
- <ul>
- <li><a href="web/personal/task_eventmanager_w.htm" target="content">Task: Event Manager</a></li>
- </ul>
- </li>
- <li><a href="web/personal/call_history_w.htm" target="content">Call History</a>
- <ul>
- <li><a href="web/personal/task_calllog_w.htm" target="content">Task: Call Log</a></li>
- </ul>
- </li>
+ <li><a href="web/personal/calendar_w.htm" target="content">Calendar</a></li>
+ <li><a href="web/personal/call_history_w.htm" target="content">Call History</a></li>
<li><a href="web/personal/contacts_w.htm" target="content">Contacts</a></li>
<li><a href="web/personal/sync_w.htm" target="content">Data Synchronization</a></li>
</ul>
<li><a href="web/data/data_cover_w.htm" target="content">Data Storage and Management</a>
<ul>
<li><a href="web/data/data_filter_w.htm" target="content">Data Filtering and Sorting</a></li>
- <li><a href="web/data/file_system_w.htm" target="content">File System</a>
- <ul>
- <li><a href="web/data/task_filemanager_w.htm" target="content">Task: File Manager</a></li>
- </ul>
- </li>
- <li><a href="web/data/stored_content_w.htm" target="content">Stored Content Management</a>
- <ul>
- <li><a href="web/data/task_mediacontent_w.htm" target="content">Task: Media Content</a></li>
- </ul>
- </li>
+ <li><a href="web/data/file_system_w.htm" target="content">File System</a></li>
+ <li><a href="web/data/stored_content_w.htm" target="content">Stored Content Management</a></li>
<li><a href="web/data/file_archiving_w.htm" target="content">File Archiving</a></li>
</ul>
</li>
<li><a href="web/device/device_cover_w.htm" target="content">Device Settings and Systems</a>
<ul>
<li><a href="web/device/power_w.htm" target="content">Power States</a></li>
- <li><a href="web/device/system_information_w.htm" target="content">System Information</a>
- <ul>
- <li><a href="web/device/task_systeminfo_w.htm" target="content">Task: System Information</a></li>
- </ul>
- </li>
+ <li><a href="web/device/system_information_w.htm" target="content">System Information</a></li>
<li><a href="web/device/system_setting_w.htm" target="content">System Settings</a></li>
<li><a href="web/device/time_w.htm" target="content">Time and Date Management</a></li>
<li><a href="web/device/web_view_w.htm" target="content">Web View Settings</a></li>
<li><a href="web/w3c/device/device_guide_w.htm" target="content">Device</a>
<ul>
<li><a href="web/w3c/device/battery_w.htm" target="content">Battery Status</a></li>
- <li><a href="web/w3c/device/device_orientation_w.htm" target="content">DeviceOrientation Event Specification</a>
- <ul>
- <li><a href="web/w3c/device/task_compass_w.htm" target="content">Task: Compass</a></li>
- </ul>
- </li>
- <li><a href="web/w3c/device/touch_w.htm" target="content">Touch Events</a>
- <ul>
- <li><a href="web/w3c/device/task_touch_paint_mw.htm" target="content">Task: Touch Paint in Mobile Applications</a></li>
- <li><a href="web/w3c/device/task_touch_paint_ww.htm" target="content">Task: Touch Paint in Wearable Applications</a></li>
- </ul>
- </li>
+ <li><a href="web/w3c/device/device_orientation_w.htm" target="content">DeviceOrientation Event Specification</a></li>
+ <li><a href="web/w3c/device/touch_w.htm" target="content">Touch Events</a></li>
<li><a href="web/w3c/device/vibration_w.htm" target="content">Vibration</a></li>
<li><a href="web/w3c/device/browser_state_w.htm" target="content">HTML5 Browser state</a></li>
<li><a href="web/w3c/device/screen_orientation_w.htm" target="content">Screen Orientation</a></li>
</li>
<li><a href="web/w3c/graphics/graphics_guide_w.htm" target="content">Graphics</a>
<ul>
- <li><a href="web/w3c/graphics/canvas_w.htm" target="content">HTML5 Canvas</a>
- <ul>
- <li><a href="web/w3c/graphics/task_basicwatch_w.htm" target="content">Task: Basic Watch</a></li>
- </ul>
- </li>
+ <li><a href="web/w3c/graphics/canvas_w.htm" target="content">HTML5 Canvas</a></li>
<li><a href="web/w3c/graphics/svg_w.htm" target="content">SVG</a></li>
</ul>
</li>
<li><a href="web/w3c/media/media_guide_w.htm" target="content">Media</a>
<ul>
- <li><a href="web/w3c/media/getusermedia_w.htm" target="content">getUserMedia</a>
- <ul>
- <li><a href="web/w3c/media/task_selfcamera_w.htm" target="content">Task: Self Camera</a></li>
- </ul>
- </li>
- <li><a href="web/w3c/media/video_audio_w.htm" target="content">HTML5 video and audio element</a>
- <ul>
- <li><a href="web/w3c/media/task_piano_w.htm" target="content">Task: Piano</a></li>
- </ul>
- </li>
+ <li><a href="web/w3c/media/getusermedia_w.htm" target="content">getUserMedia</a></li>
+ <li><a href="web/w3c/media/video_audio_w.htm" target="content">HTML5 video and audio element</a></li>
<li><a href="web/w3c/media/media_capture_w.htm" target="content">HTML Media Capture</a></li>
<li><a href="web/w3c/media/webaudio_w.htm" target="content">Web Audio</a></li>
</ul>
<li><a href="web/w3c/supplement/typedarray_w.htm" target="content">Typed Array - Khronos</a></li>
<li><a href="web/w3c/supplement/webgl_w.htm" target="content">WebGL - Khronos</a></li>
<li><a href="web/w3c/supplement/fullscreen_w.htm" target="content">FullScreen API - Mozilla</a></li>
- <li><a href="web/w3c/supplement/camera_w.htm" target="content">Camera API (Tizen Extension)</a>
- <ul>
- <li><a href="web/w3c/supplement/task_camera_w.htm" target="content">Task: Camera</a></li>
- </ul>
- </li>
+ <li><a href="web/w3c/supplement/camera_w.htm" target="content">Camera API (Tizen Extension)</a></li>
</ul>
</li>
<li><a href="web/w3c/ui/ui_guide_w.htm" target="content">User Interface</a>
<p>You can <a href="#Descriptor_Value">read and write the Bluetooth GATT descriptor value</a>.</p></li>
</ul>
-<p>For a practical example of using the device as a Bluetooth server or client in a chat application, see the <a href="task_bluetoothchat_w.htm">Bluetooth Chat</a> mobile sample task.</p>
-
<h2 id="prerequisites">Prerequisites</h2>
<p>To use the Application (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">wearable</a> applications) and Bluetooth (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html">wearable</a> applications) APIs, the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<li>Checking the download state and information<p>You can <a href="#check">access the current download state and retrieve the download information</a> using the <code>DownloadManager</code> interface. The states are defined in the <code>DownloadState</code> enumerator (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html#DownloadState">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html#DownloadState">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/download.html#DownloadState">TV</a> applications).</p> </li>
</ul>
-<p>For a practical example of downloading URL content to the device storage, see the <a href="task_downloadmanager_w.htm">Download Manager</a> sample task.</p>
-
<h2 id="prerequisites">Prerequisites</h2>
<p>To use the Download API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/download.html">TV</a> applications), the application has to request permission by adding the following privilege to the <code>config.xml</code> file:</p>
<li>Reduction in unwanted interruptions</li>
</ul>
- <p>For a practical example of exchanging contacts between devices over an NFC connection, see the <a href="task_contactsexchanger_w.htm">Contacts Exchanger</a> mobile sample task.</p>
-
<h2 id="tag">NFC Tags and NDEF Messages</h2>
<p>An <strong>NFC tag</strong> is a chip which can securely store personal information, such as debit card numbers or contact details. The methods of the <code>NFCTag</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCTag">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCTag">wearable</a> applications) are used to access an NFC tag for reading or writing information. NFC tag types are identified using the <code>type</code> attribute of the <code>NFCTagType</code> type definition (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCTagType">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCTagType">wearable</a> applications).</p>
+++ /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>Task: Bluetooth Chat</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_optional.png"/></p>
- </div>
-
- <div id="toc_border"><div id="toc">
- <p class="toc-title">Dependencies</p>
- <ul class="toc">
- <li>Tizen 2.4 and Higher for Mobile</li>
- </ul>
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#Defining_App_Layout">Defining the Application Layout</a></li>
- <li><a href="#Initializing_App">Initializing the Application</a></li>
- <li><a href="#Creating_Connection">Creating the Connection</a></li>
- <li><a href="#Exchanging_Data">Sending a Message</a></li>
- </ul>
- <p class="toc-title">Related Info</p>
- <ul class="toc">
- <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html">Bluetooth API for Mobile Web</a></li>
- <li><a href="https://developer.tizen.org/development/sample/web/Communication/Bluetooth_Chat" target="_blank">Bluetooth Chat Sample Description</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Task: Bluetooth Chat</h1>
- <p>This task, based on the BluetoothChat sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html">Bluetooth</a> API to create a chat between 2 devices. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Communication/Bluetooth_Chat" target="blank">Bluetooth Chat</a>.</p>
- <p>This task consists of the following parts:</p>
- <ul>
- <li><a href="#Defining_App_Layout">Defining the Application Layout</a> defines how to create the application screens.</li>
- <li><a href="#Initializing_App">Initializing the Application</a> defines how to initialize the application.</li>
- <li><a href="#Creating_Connection">Creating the Connection</a> defines how to set up a bluetooth adapter, register a chat server, and connect devices to the server.</li>
- <li><a href="#Exchanging_Data">Sending a Message</a> defines how to send messages between Bluetooth devices.</li>
- </ul>
- <p>This sample is a fully functional application for creating a chat application.</p>
-
- <h2 id="Defining_App_Layout" name="Defining_App_Layout">Defining the Application Layout</h2>
- <p>The BluetoothChat sample application layout uses the template manager based on the MVC (Model View Controller) architecture, and consists of 3 screens: the main screen displays buttons for creating or joining a chat, the Choose your server screen displays a list of available servers, and the chat screen displays the conversation history, an input area, and a button, allowing the user to write and send messages.</p>
-
- <p>The following figure shows the main screens of the application.</p>
- <p align="center"><strong>Figure: BluetoothChat screens</strong></p>
- <p align="center"><img alt="BluetoothChat screens" src="../../images/bluetoothchat.png" /></p>
-
- <h3 id="main" name="main">Defining the Main Screen</h3>
- <ol>
- <li><strong>index.html Source File</strong>
- <ol type="a"><li>
- <p>The main screen displays option buttons. The header section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen.</p>
-
-<pre class="prettyprint lang-html">
-<!--Main screen layout-->
-<div id="start" data-role="page">
- <!--Header section-->
- <div id="start-header" data-role="header" data-position="fixed">
- <h1>Bluetooth chat</h1>
- </div>
-</pre></li>
- <li> <p>The actual content section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>content</code>. It contains <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Button.htm">buttons</a> for turning on the Bluetooth connection and either creating or joining a server connection. The buttons displayed depend on whether the Bluetooth adapter is on.</p>
-<pre class="prettyprint lang-html">
- <!--Content section-->
- <div id="start-content" data-role="content" data-scroll="none">
- <div class="box">
- <div data-role="button" class="ui-btn-start" id="turnOnButton"
- style="display: none;">Turn bluetooth on</div>
- <div data-role="button" class="ui-btn-start" id="serverButton"
- style="display: none;">Create server</div>
- <div data-role="button" class="ui-btn-start" id="clientButton"
- style="display: none;">Join server</div>
- <div id="start-monit" style="display: none;">
- <p>Waiting for Bluetooth...</p>
- </div>
- </div>
- </div>
-</div>
-</pre>
- </li>
- </ol>
- </li>
- <li><strong>app.js Source File</strong>
-<p>The <code>checkPowerState()</code> method is used to check the Bluetooth connection status. If the Bluetooth connection is not on, the main screen only displays the <strong>Turn bluetooth on</strong> button.</p>
-<pre class="prettyprint">
-checkPowerState: function App_checkPowerState()
-{
- this.ui.setContentStartAttributes(this.model.checkPowerState.bind(this.model,
- this.ui.showPowerOnButton,
- this.ui.showStartButtons));
-},
-</pre>
-</li>
-<li><strong>app.ui.events.js Source File</strong>
-<p>The <strong>Create server</strong> and <strong>Join server</strong> button events are defined in the <code>app.ui.events.js</code> file. All the application events are based on jQuery selectors.</p>
-<pre class="prettyprint">
-$('#serverButton').on('click', function(event)
- {
- app.resetApplicationMode();
- app.startServer();
- });
-
-$('#clientButton').on('click', function(event)
- {
- app.resetApplicationMode();
- app.startClient();
- });
-</pre>
-</li>
-
-<li><strong>templates/keyboard_page.tpl Source File</strong>
-<ol type="a">
-<li>
-<p>When the user taps the <strong>Create server</strong> or <strong>Join server</strong> button, a keyboard is displayed and the user can enter the server or client name.</p>
-<pre class="prettyprint">
-<div data-role="page" id="keyboard">
- <!--Header section-->
- <div data-role="header" id="keyboard-header" data-position="fixed">
- <h1></h1>
- </div>
-
- <!--Content section-->
- <div data-role="content" id="keyboard-content">
- <input type="text" id="keyboard-text" maxlength="20"/>
- </div>
-
- <!--Footer section-->
- <div data-role="footer" data-position="fixed">
- <div data-role="tabbar" data-style="tabbar">
- <ul>
- <li id="keyboard-ok-button"><a href="#">OK</a></li>
- </ul>
- </div>
- </div>
-</div>
-</pre>
-</li>
-<li><p>When the user enters the server or client name and taps <strong>OK</strong>, the <code>getApplicationMode()</code> method analyzes the input and displays the server selection or chat screen, respectively.</p>
-<pre class="prettyprint">
-$('#keyboard-ok-button').on('click', function(event)
- {
- event.preventDefault();
- var value = $('#keyboard-text').val(), mode;
- if (value.length !== 0)
- {
- app.setUserName(value);
- mode = app.getApplicationMode();
- if (mode === 'server')
- {
- app.setAdapterName();
- }
- else if (mode === 'client')
- {
- $.mobile.changePage('#choose');
- }
- }
- });
-</pre>
-</li>
-</ol>
-</li>
-</ol>
-
-
-<h3 id="server" name="server">Defining the Choose Your Server Screen</h3>
-<ol>
-<li><strong>templates/choose_page.tpl Source File</strong>
-<ol type="a"><li><p>The content section of the Choose your server screen displays a <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Listview.htm">list</a> of available servers.</p>
-<pre class="prettyprint">
-<div data-role="page" id="choose">
- <!--Header section-->
- <div data-role="header" id="choose-header" data-position="fixed">
- <h1>Choose your server</h1>
- <div data-role="progress" data-style="circle" id="discovering"></div>
- </div>
-
- <!--Content section-->
- <div data-role="content" id="choose-content">
- <ul data-role="listview"></ul>
- </div>
-</div>
-</pre>
-</li>
-<li>
-<p>When the user taps a server name, the system starts searching for the server and attempts to connect to it. After connecting, the system displays confirmation <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Popup.htm">pop-ups</a>.</p>
-<pre class="prettyprint">
-$('#choose-content').on('tap', 'ul.ui-listview li', function()
- {
- app.client.stopServerSearching($(this).attr('address'));
- });
-</pre>
-</li>
-</ol>
-</li>
-</ol>
-
-<h3 id="chat" name="chat">Defining the Chat Screen</h3>
-<ol>
-<li><strong>templates/chat_page.tpl Source File</strong>
-<p>The structure of this template is similar to the main screen. The header displays the current role of the device (server or client) and its name.</p>
-<p>The content area displays a list view with message bubbles. The layout of the bubbles is defined in the <code>left_bubble.tpl</code> and <code>right_bubble.tpl</code> template files.</p>
- <p>The footer section contains a <code>textArea</code> for writing a message and a button for sending it.</p>
-<pre class="prettyprint">
-<div id="chat" data-role="page" data-footer-exist="true">
- <!--Header section-->
- <div id="chat-header" data-role="header" data-position="fixed">
- <h1><span id="chat-header-type"></span><span id="chat-header-name"></span></h1>
- </div>
-
- <!--Content section-->
- <div id="chat-content" data-role="content">
- <ul data-role="listview"></ul>
- </div>
-
- <!--Footer section-->
- <div id="chat-footer" data-role="footer" data-position="fixed">
- <div id="ui-textArea">
- <div id="ui-textArea-text">
- <textarea id="text" placeholder="Your message" data-role="none"></textarea>
- </div>
- <div id="ui-textArea-button">
- <a data-role="button" id="ui-mySend">Send</a>
- </div>
- </div>
- </div>
-</div>
-</pre>
-
-</li>
-<li><strong>app.ui.js Source File</strong>
-<p>The <code>checkSendButtonState()</code> method is used to check whether there is text in the <code>textArea</code>. If the <code>textArea</code> field is empty, the <strong>Send</strong> button is disabled.</p>
-<pre class="prettyprint">
-checkSendButtonState: function Ui_checkSendButtonState()
-{
- if (app.helpers.checkStringLength($('#text').val().trim()) && app.isConnection())
- {
- this.enableSendButton();
- }
- else
- {
- this.disableSendButton();
- }
-},
-</pre>
-</li>
-</ol>
-
- <h2 id="Initializing_App" name="Initializing_App">Initializing the Application</h2>
- <ol>
- <li><strong>config.xml Source File</strong>
- <p>The required privileges are declared in the <code>config.xml</code> file.</p>
-<pre class="prettyprint">
-<!--Configuration file content-->
-<widget ...>
- <!--Other configuration details-->
- <tizen:privilege name="http://tizen.org/privilege/application.launch"/>
- <tizen:privilege name="http://tizen.org/privilege/bluetooth.admin"/>
- <tizen:privilege name="http://tizen.org/privilege/bluetooth.gap"/>
- <tizen:privilege name="http://tizen.org/privilege/bluetooth.spp"/>
- <!--Other configuration details-->
-</widget>
-</pre>
- </li>
- </ol>
-
- <h2 id="Creating_Connection" name="Creating_Connection">Creating the Connection</h2>
- <p>This section builds upon the elements described in <a href="bluetooth_w.htm#Discovering_BT_Devices">Discovering Bluetooth Devices</a> and <a href="bluetooth_w.htm#Connecting_BT_device">Connecting to and Exchanging Data with a Bluetooth Device</a>.</p>
-
-
- <h3 id="check" name="check">Checking the Bluetooth Status</h3>
-
- <ol>
- <li><strong>app.server.js Source File</strong>
- <ol type="a"><li><p>Before pairing devices, you must check whether Bluetooth is enabled. The default Bluetooth adapter is retrieved using the <code>getDefaultAdapter()</code> method.</p>
-<pre class="prettyprint">
-this.adapter = tizen.bluetooth.getDefaultAdapter();
-</pre>
- </li>
- <li>
- <p>The power status of the adapter can be checked using the <code>setPowered()</code> method.</p>
-<pre class="prettyprint">
-powerOn: function Model_powerOn(callback)
-{
- if (!this.adapter.powered)
- {
- try
- {
- this.adapter.setPowered(true, function()
- {
- setTimeout(function() {callback();}, 500);
- });
- app.ui.showPowerOnButton();
- }
- }
- else
- {
- callback();
- }
-},
-</pre>
- </li>
- </ol>
-</li>
-</ol>
- <h3 id="register" name="register">Registering the Server</h3>
- <ol>
- <li><strong>app.server.js Source File</strong>
- <p>One of the devices must be defined to be used as the server. This is done using the <code>registerServer()</code> method.</p>
-<pre class="prettyprint">
-registerServer: function Server_registerServer()
-{
- this.model.registerServer(this.adapter, this.serviceUUID,
- this.registerServerSuccess.bind(this));
-},
-</pre>
- </li>
- </ol>
-
- <h3 id="connect" name="connect">Connecting Devices</h3>
- <ol>
- <li><strong>app.client.model.js Source File</strong>
- <ol type="a">
- <li>
- <p>After defining the default Bluetooth adapter and setting up the server, you can select the requested server and bond the devices using the <code>connectToService()</code> method.</p>
-<pre class="prettyprint">
-connectToService: function ClientModel_connectToService(device, serviceUUID,
- successCallback,
- errorCallback)
-{
- this.client.chatServerDevice = device;
- try
- {
- device.connectToServiceByUUID(serviceUUID, successCallback,
- errorCallback, 'RFCOMM');
- }
-},
-</pre>
-</li>
-<li>The <code>connectToService()</code> method sends a ping to ensure that the server is responding.
-<pre class="prettyprint">
-sendPing: function ClientModel_sendPing(name, socket)
-</pre>
-</li>
-</ol>
- </li>
- </ol>
-
-
-<h2 id="Exchanging_Data" name="Exchanging_Data">Sending a Message</h2>
-
- <p>This section builds upon the elements described in <a href="bluetooth_w.htm#Connecting_BT_device">Connecting to and Exchanging Data with a Bluetooth Device</a>.</p>
- <ol>
-<li><strong>app.client.model.js Source File</strong>
-<p>Before sending a message, the message data must be stringified to the JSON format. The data is then written to the selected socket using the <code>writeData()</code> method.</p>
-
-<pre class="prettyprint">
-sendMessage: function ClientModel_sendMessage(name, socket, message, callback)
-{
- var sendTextMsg = [], messageObj, messageObjToString, i, len;
- name = encodeURIComponent(name);
- message = encodeURIComponent(message);
- messageObj = {name: name, text: message, ping: false, bye: false};
- messageObjToString = JSON.stringify(messageObj);
- len = messageObjToString.length;
- for (i = 0; i < len; i += 1)
- {
- sendTextMsg[i] = messageObjToString.charCodeAt(i);
- }
- try
- {
- if (socket !== null && socket.state === "OPEN")
- {
- socket.writeData(sendTextMsg);
- callback(message);
- }
- }
-},
-</pre>
-</li>
-</ol>
-
-<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>
\ No newline at end of file
+++ /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>Task: Contacts Exchanger</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_optional.png"/></p>
- </div>
-
- <div id="toc_border"><div id="toc">
- <p class="toc-title">Dependencies</p>
- <ul class="toc">
- <li>Tizen 2.4 and Higher for Mobile</li>
- </ul>
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#Defining_App_Layout">Defining the Application Layout</a></li>
- <li><a href="#Initializing_App">Initializing the Application</a></li>
- <li><a href="#Setting_NFC_Conn">Setting up the NFC Connection</a></li>
- <li><a href="#Exchanging_Contact_Tags">Exchanging Contact Information with Tags</a></li>
- <li><a href="#Exchanging_Contact_Peers">Exchanging Contact Information with Peers</a></li>
- </ul>
- <p class="toc-title">Related Info</p>
- <ul class="toc">
- <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html">NFC API for Mobile Web</a></li>
- <li><a href="https://developer.tizen.org/development/sample/web/Communication/Contacts_Exchanger" target="_blank">Contacts Exchanger Sample Description</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Task: Contacts Exchanger</h1>
- <p>This task, based on the ContactsExchanger sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html">NFC</a> API to exchange contacts between devices. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Communication/Contacts_Exchanger" target="blank">Contacts Exchanger</a>.</p>
-
- <p>This task consists of the following parts:</p>
- <ul>
- <li><a href="#Defining_App_Layout">Defining the Application Layout</a> defines how to create the application screens.</li>
- <li><a href="#Initializing_App">Initializing the Application</a> defines how to initialize the application.</li>
- <li><a href="#Setting_NFC_Conn">Setting up the NFC Connection</a> defines how to set up and manage the NFC connection.</li>
- <li><a href="#Exchanging_Contact_Tags">Exchanging Contact Information with Tags</a> defines how to receive a contact as an NDEF message, prepare the message, and save the contact on the SIM card using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">Contact</a> API.</li>
- <li><a href="#Exchanging_Contact_Peers">Exchanging Contact Information with Peers</a> defines how to exchange messages between devices.</li>
- </ul>
- <p>This sample is a fully functional application for exchanging between devices contact information based on contacts on a SIM card.</p>
-
- <h2 id="Defining_App_Layout" name="Defining_App_Layout">Defining the Application Layout</h2>
- <p>The ContactsExchanger sample application layout consists of 4 screens: the main screen displays the default contact and the operation buttons, the Contacts list screen displays a list of contacts, the Add contact screen allows the user to add a new contact, and the transfer screen is displayed when the user clicks an operation button on the main screen.</p>
-
-
- <p>The following figure shows the main screens of the application.</p>
- <p align="center"><strong>Figure: ContactsExchanger screens</strong></p>
- <p align="center"><img alt="ContactsExchangerscreens" src="../../images/contactsexchanger.png" /></p>
-
-<h3 id="main" name="main">Defining the Main Screen</h3>
- <ol>
- <li><strong>index.html Source File</strong>
-<ol type="a"><li>
-<p>The header section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen.</p>
-<pre class="prettyprint lang-html">
-<!--Main screen layout-->
-<div data-role="page" id="main">
- <!--Header section-->
- <div data-role="header" id="header-start">
- <h1>Contacts exchanger</h1>
- </div>
-</pre></li>
-<li>
-<p>The main screen content is dynamic and created during the runtime.</p>
-<pre class="prettyprint lang-html">
- <!--Content section-->
- <div data-role="content" id="content-start">
- <!--Dynamic content-->
- </div>
-</div>
-</pre>
- </li>
- </ol>
-</li>
- <li><strong>app.ui.js Source File</strong>
- <ol type="a"><li><p>The <code>loadStartPage()</code> method is called to start the screen initialization. The method handles 2 scenarios: if the user has defined the default contact, the <code>loadStartContent()</code> method is executed, and the user gets access to the application. Otherwise, the user is prompted to define the default contact.</p>
-<pre class="prettyprint">
-loadStartPage: function ui_loadStartPage()
-{
- if (localStorage.started === undefined)
- {
- this.loadTemporaryContent();
- }
- else
- {
- this.loadStartContent();
- }
-}
-</pre>
-</li>
-<li>
-<p>If the default contact card is not defined, the content section of the screen displays a message and a <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Button.htm">button</a> allowing user to create the default card.</p>
-<pre class="prettyprint">
-<div class="box" id="temporaryBox">
- <p class="defaultText">
- Default card is not defined yet!<br/> Do you want to define it now?
- </p>
- <div data-role="button" class="ui-btn-create">Create default card</div>
-</div>
-</pre>
-</li>
-<li><p>When the default card is defined and the default contact is selected, the main screen displays information about the default contact, and the operation buttons for changing the default contact, reading from or writing to the card, and communicating with another device.</p>
-<pre class="prettyprint">
-<div class="box" id="startBox">
- <div id="comment">
- <p class="comment">Your default contact</p>
- <p class="comment" id="comment-name"></p>
- <p class="comment" id="comment-phone"></p>
- </div>
- <div data-role="button" class="ui-btn-create">
- Change your default contact
- </div>
- <div class="gap"></div>
- <div data-role="button" class="ui-btn-create">
- Read from card
- </div>
- <div class="gap"></div>
- <div data-role="button" class="ui-btn-create">
- Write to card
- </div>
- <div class="gap"></div>
- <div data-role="button" class="ui-btn-create">
- Communicate with another device
- </div>
-</div>
-</pre>
-</li>
-</ol>
- </li>
- </ol>
- <h3 id="selection" name="selection">Defining the Contacts List Screen</h3>
- <ol><li><strong>index.html Source File</strong>
- <p>The Contacts list screen displays an aggregated contact <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Listview.htm">list</a> sorted by name. The contacts are loaded from the device default address book using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">Contact</a> API methods.</p>
-<pre class="prettyprint">
-<ul data-role="listview" id="list-choose">
- <li class="ui-li-multiline">
- <a href="#"> <!--Contact name-->
- <span class="ui-li-text-sub"><!--Contact phone number--></span>
- </a>
- </li>
-</ul>
-</pre>
-<p>Selecting a list item saves the contact information in the local storage, and returns the user to the main screen.</p>
-</li>
-</ol>
-
- <h3 id="transfer" name="transfer">Defining the Transfer Screen</h3>
- <p>The transfer screen is simply a countdown screen to give the user 10 seconds to communicate with another device or a tag.</p>
- <ol><li><strong>app.ui.js Source File</strong>
- <ol type="a"><li>
-<p>The transfer page is displayed shortly when the user taps the <strong>Read from card</strong>, <strong>Write to card</strong>, or <strong>Communicate with another device</strong> button on the main screen.</p>
-<pre class="prettyprint">
-$.mobile.changePage('#transfer');
-</pre>
-</li>
-<li>
-<p>After the <code>pageshow</code> event, the screen is prepared according to the selected button. The <code>getDefaultAdapter()</code> method is used to check the NFC connection status.</p>
-<pre class="prettyprint">
-$('#transfer').on('pageshow', function()
- {
- if (tizen.nfc.getDefaultAdapter().powered)
- {
- try
- {
- var option = $(this).data('option');
- if (option === 'read')
- {
- self.prepareWaitingPage('Card to device',
- 'PUT WIRELESS TAG<br/>
- CLOSE TO<br/>
- YOUR DEVICE');
- self.app.nfc.card.setTagDetectRead();
- }
- else if (option === 'write')
- {
- self.prepareWaitingPage('Device to card',
- 'PUT WIRELESS TAG<br/>
- CLOSE TO<br/>
- YOUR DEVICE');
- self.app.nfc.card.setTagDetectWrite();
- }
- else
- {
- self.prepareWaitingPage('Device to device',
- 'PUT YOUR DEVICE<br/>
- CLOSE TO<br/>
- OTHER DEVICE');
- self.app.nfc.peer.setTargetDetect();
- }
- }
- }
- else
- {
- $.mobile.changePage('#start');
- alert('Please turn on NFC adapter');
- }
- });
-</pre>
-</li>
-<li>
-<p>The <code>prepareWaitingPage()</code> method defines the transfer page UI.</p>
-<pre class="prettyprint">
-prepareWaitingPage: function ui_prepareWaitingPage(title, text)
-{
- var waitingBox, waitingContent, contentTransfer = $('#content-transfer');
- waitingBox = $('<div class="box" id="waitingBox"></div>');
- waitingContent = $(this.getWaitingContentHtml(text));
- $('#header-transfer H1').text(title);
- contentTransfer.empty();
- waitingBox.append(waitingContent);
- contentTransfer.append(waitingBox);
- $('#content-start').trigger('create');
- this.app.countDown(10, $('#counter'));
-},
-</pre>
-</li>
-
-<li>
-<p>Finally, the screen displays a countdown from 10 to 0 using the <code>countDown()</code> method:</p>
-<pre class="prettyprint">
-countDown: function countDown(time, obj)
-{
- if (!this.counterState)
- {
- setTimeout(function()
- {
- this.countDown(time, obj);
- }.bind(this), 500);
-
- return;
- }
-
- obj.text(time);
- if (time > 0)
- {
- if (this.nfc.isPowered())
- {
- time -= 1;
- this.timeOutHandler = setTimeout(function()
- {
- this.countDown(time, obj);
- }.bind(this), 1000);
- }
- else
- {
- this.nfc.timeExpired();
- }
- }
- else
- {
- this.nfc.timeExpired();
- }
-},
-</pre>
-</li>
-</ol></li>
-</ol>
-
-<h3 id="add" name="add">Defining the Add Contact Screen</h3>
-<ol><li><strong>app.ui.js Source File</strong>
-<p>The Add contact screen displays the contact information received from another device. The user can save the contact information in the device default address book by tapping the <strong>Save</strong> button.</p>
-
-<pre class="prettyprint lang-html">
-<div id="contact" data-role="page" data-footer-exist="true">
- <div data-role="header" id="header-contact" data-position="fixed">
- <h1>Add contact</h1>
- <a data-role="button" id="save-contact">Save</a>
- </div>
-
- <div data-role="content" id="content-contact"></div>
-
- <div data-role="footer" id="footer-contact" data-position="fixed"></div>
-</div>
-</pre>
-</li></ol>
-
- <h2 id="Initializing_App" name="Initializing_App">Initializing the Application</h2>
- <ol>
- <li><strong>config.xml Source File</strong>
- <p>The required privileges are declared in the <code>config.xml</code> file.</p>
-<pre class="prettyprint">
-<!--Configuration file content-->
-<widget ...>
- <!--Other configuration details-->
- <tizen:privilege name="http://tizen.org/privilege/nfc.admin"/>
- <tizen:privilege name="http://tizen.org/privilege/nfc.common"/>
- <tizen:privilege name="http://tizen.org/privilege/nfc.p2p"/>
- <tizen:privilege name="http://tizen.org/privilege/nfc.tag"/>
- <!--Other configuration details-->
-</widget>
-</pre>
- </li>
- </ol>
-
-<h2 id="Setting_NFC_Conn" name="Setting_NFC_Conn">Setting up the NFC Connection</h2>
- <p>This section builds upon the elements described in <a href="nfc_w.htm#Managing_NFC_Conn">Managing NFC Connectivity</a>.</p>
- <ol>
- <li><strong>app.nfc.js Source File</strong>
- <p>To create an NFC connection, get the default NFC adapter using the <code>getDefaultAdapter()</code> method, and launch the NFC service using the <code>setPowered()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCAdapter">NFCAdapter</a> interface, which takes the NFC status as a parameter.</p>
-<pre class="prettyprint">
-startNFC: function nfc_startNFC()
-{
- try
- {
- this.nfcAdapter = tizen.nfc.getDefaultAdapter();
-
- if (this.nfcAdapter.powered)
- {
- this.nfcStateMemory = true;
- this.onPowerOn();
-
- return;
- }
-
- this.nfcStateMemory = false;
- this.nfcAdapter.setPowered(true, this.onPowerOn.bind(this),
- this.onPowerOnFails.bind(this));
-
- },
-}
-</pre>
-</li>
-</ol>
-
-<h2 id="Exchanging_Contact_Tags" name="Exchanging_Contact_Tags">Exchanging Contact Information with Tags</h2>
- <p>This section builds upon the elements described in <a href="nfc_w.htm#Detecting_NFC_Tags">Detecting NFC Tags and Peer Devices</a> and <a href="nfc_w.htm#Handling_NDEF_Messages">Handling NDEF Messages</a>.</p>
-
-
-<h3 id="read" name="read">Reading an NDEF Message from an NFC Tag</h3>
- <ol>
- <li><strong>app.nfc.card.js Source File</strong>
- <ol type="a"><li>
-<p>When the user taps the <strong>Read from card</strong> button on the main screen, the transfer page is displayed. The <code>setTagListener()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCAdapter">NFCAdapter</a> interface adds an event listener to detect whether the tag is properly attached and the NDEF message valid.</p>
-<pre class="prettyprint">
-setTagDetectRead: function nfc_card_setTagDetectRead()
-{
- this.nfc.nfcAdapter.setTagListener(
- {
- onattach: this.sucTagReadAttach.bind(this),
- ondetach: this.nfc.sucDetach.bind(this.nfc)
- });
-}
-</pre>
-</li>
-<li><p>When the tag is attached, the <code>readNDEF()</code> event is fired to retrieve the sent NDEF message information.</p>
-<pre class="prettyprint">
-sucTagReadAttach: function nfc_card_sucTagReadAttach(tag)
-{
- try
- {
- if (!tag.isSupportedNDEF)
- {
- throw {message: "This tag doesn't support NDEF"};
- }
- tag.readNDEF(this.nfc.readMessage.bind(this.nfc),
- this.readMessageErr.bind(this));
- }
-}
-</pre>
-</li>
-<li><p>The <code>readMessage()</code> method is used to get the sent information record, retrieve the contact, and display the Add contact screen.</p>
-<pre class="prettyprint">
-readMessage: function nfc_readMessage(message)
-{
- try
- {
- this.fillRecordInfo(message.records[0]);
- }
-},
-fillRecordInfo: function nfc_fillRecordInfo(record)
-{
- try
- {
- var contactsData =
- this.resolveContact(this.convertNDEF2phoneNumber(record.payload));
- this.app.nfc.displayContact(contactsData);
- }
-}
-</pre>
-<p>The retrieved contact information can be saved using the methods of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">Contact</a> API.</p>
-</li>
-</ol>
-</li>
- </ol>
-
-<h3 id="write" name="write">Writing an NDEF Message to the NFC Tag</h3>
- <ol>
- <li><strong>app.nfc.card.js Source File</strong>
- <ol type="a"><li>
- <p>When the user taps the <strong>Write to card</strong> button on the main screen, the transfer page is displayed, and the <code>setTagDetectWrite()</code> method is called. The <code>setTagListener()</code> method adds an event listener to detect whether the tag is successfully attached.</p>
-<pre class="prettyprint">
-setTagDetectWrite: function nfc_card_setTagDetectWrite()
-{
- var suc =
- {
- onattach: this.sucTagWriteAttach.bind(this),
- ondetach: this.nfc.sucDetach.bind(this.nfc)
- };
- this.nfc.nfcAdapter.setTagListener(suc);
-}
-</pre></li>
-<li><p>When the tag is attached, the contact is prepared for sending it over the NFC connection. The <code>prepareForNFC()</code> and <code>phoneNumber2NDEF()</code> methods convert the contact object to VCARD_30 format, create a new <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessage">NDEFMessage</a> object, and attach it to the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordMedia">NDEFRecordMedia</a> record with the VCARD_30 data. The NDEF message is saved to the tag and the main screen of the application is displayed.</p>
-<pre class="prettyprint">
-sucTagWriteAttach: function nfc_card_sucTagWriteAttach(tag)
-{
- var newMessage = null, fullContact = '';
- try
- {
- /* Local storage contains the contact object */
- fullContact = this.nfc.prepareForNFC(localStorage);
- newMessage = this.nfc.phoneNumber2NDEF(fullContact);
- if (!tag.isSupportedNDEF)
- {
- throw {message: "This tag doesn't support NDEF"};
- }
- tag.writeNDEF(newMessage,
- this.sucSend.bind(this),
- this.errSend.bind(this));
- }
-}
-</pre>
- </li>
-</ol>
-</li>
-</ol>
-
-<h2 id="Exchanging_Contact_Peers" name="Exchanging_Contact_Peers">Exchanging Contact Information with Peers</h2>
- <p>This section builds upon the elements described in <a href="nfc_w.htm#Detecting_NFC_Tags">Detecting NFC Tags and Peer Devices</a> and <a href="nfc_w.htm#Exchanging_NDEF_Peers">Exchanging NDEF Data with Peers</a>.</p>
-
-<p>The data exchange functionality is implemented in the <code>app.nfc.peer.js</code> file.</p>
- <ol>
- <li><strong>Sending Information</strong>
-<ol type="a"><li><p>When the user taps the <strong>Communicate with another device</strong> button on the main screen, the transfer page is displayed. The <code>setPeerListener()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCAdapter">NFCAdapter</a> interface adds an event listener to detect whether the peer is properly attached.</p>
-<pre class="prettyprint">
-setTargetDetect: function nfc_peer_setTargetDetect()
-{
- var successCallbacks =
- {
- onattach: this.sucTargetAttach.bind(this),
- ondetach: this.nfc.sucDetach.bind(this.nfc)
- };
- try
- {
- this.nfc.nfcAdapter.setPeerListener(successCallbacks);
- }
-}
-</pre>
-</li>
-<li>
-<p>When the peer is attached, the contact data is converted to an NDEF message format and sent to the peer device using the <code>sendNDEF()</code> method.</p>
-<pre class="prettyprint">
-sucTargetAttach: function nfc_peer_sucTargetAttach(target)
-{
- var newMessage = null, fullContact = this.nfc.prepareForNFC(localStorage);
- this.nfc.nfcTarget = target;
- this.setReceiveFromTarget();
- try
- {
- newMessage = this.nfc.phoneNumber2NDEF(fullContact);
- target.sendNDEF(newMessage,
- this.sucSendToTarget.bind(this),
- this.errSendToTarget.bind(this));
- }
-}
-</pre>
-</li>
-</ol>
-</li>
-<li><strong>Receiving Information</strong>
-<p> The <code>setReceiveFromTarget()</code> method is used to attach listeners to detect incoming NDEF messages.</p>
-<pre class="prettyprint">
-setReceiveFromTarget: function nfc_peer_setReceiveFromTarget()
-{
- this.nfc.nfcTarget.setReceiveNDEFListener(this.nfc.readMessage.bind(this.nfc));
-}
-</pre>
-</li>
-</ol>
-
-<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>
\ No newline at end of file
+++ /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>Task: Download Manager</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_optional.png"/></p>
- </div>
-
- <div id="toc_border"><div id="toc">
- <p class="toc-title">Dependencies</p>
- <ul class="toc">
- <li>Tizen 2.4 and Higher for Mobile</li>
- <li>Tizen 2.3.1 and Higher for Wearable</li>
- </ul>
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#layout">Defining the Application Layout</a></li>
- <li><a href="#manage">Managing Downloads</a></li>
- </ul>
- <p class="toc-title">Related Info</p>
- <ul class="toc">
- <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html">Download API for Mobile Web</a></li>
- <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html">Download API for Wearable Web</a></li>
- <li><a href="https://developer.tizen.org/development/sample/web/Content/Download_Manager" target="_blank">Download Manager Sample Description</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Task: Download Manager</h1>
-
- <p>This task, based on the DownloadManager sample delivered with the Tizen Studio, demonstrates how you can use the Download API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html">wearable</a> applications) to asynchronously download URL content to the device storage. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Content/Download_Manager" target="blank">Download Manager</a>.</p>
- <p>This task consists of the following parts:</p>
- <ul>
- <li><a href="#layout">Defining the Application Layout</a> defines how to create the application screens. </li>
- <li><a href="#manage">Managing Downloads</a> defines how to start, pause, resume, or cancel a content download.</li>
- </ul>
- <p>This sample is a fully functional application which allows the user to download any content by providing its URL. The user can control the download process.</p>
-
-
-
-<h2 id="layout" name="layout">Defining the Application Layout</h2>
-
- <p>The DownloadManager sample application layout contains only 1 screen: the main screen that displays the download items and progress. The application also has a template for displaying the download items.</p>
-
- <p>The following figure shows the main screens of the application.</p>
- <p align="center"><strong>Figure: DownloadManager screens</strong></p>
- <p align="center"><img alt="DownloadManager screens" src="../../images/downloadmanager.png" /></p>
- <h3 id="main" name="main">Defining the Main Screen</h3>
-
- <ol>
- <li><strong>index.html Source File</strong>
-<p>The main screen of the application displays the URL input field, whose value is by default set to <strong>http://trailers.divx.com/divx_prod/profiles/WiegelesHeliSki_DivXPlus_19Mbps.mkv</strong>, and the <strong>OK</strong> button.</p>
-<pre class="prettyprint lang-html">
-<div id="main-header" data-role="header" data-position="fixed">
- <h1>Download manager</h1>
- <div id="main-url-div">
- <div id="main-input-div">
- <input type="text" id="main-url-text" placeholder="type URL"
- value="http://trailers.divx.com/divx_prod/profiles/WiegelesHeliSki_DivXPlus_19Mbps.mkv"/>
- </div>
- <div id="main-button-div"><a data-role="button" id="main-url-ok">OK</a></div>
- </div>
-</div>
-</pre></li>
-<li><strong>js/app.ui.events.js Source File</strong>
-<p>Clicking the <strong>OK</strong> button starts the download.</p>
-<pre class="prettyprint">
-$('#main-header').on('tap', '#main-url-ok', function onUrlOkTap()
- {
- app.startDownloading($('#main-url-text').val());
- });
-</pre></li>
-
-<li><strong>index.html Source File</strong>
- <p>The download items are displayed on the main screen as a list, and the footer has the <strong>Refresh</strong> button.</p>
-<pre class="prettyprint lang-html">
-<div id="main-content" data-role="content">
- <ul data-role="listview"></ul>
-</div>
-
-<div id="main-footer" data-role="footer" data-position="fixed">
- <div data-role="button" data-inline="true" data-style="round"
- id="refresh-button">Refresh</div>
-</div>
-</pre></li>
-<li><strong>js/app.ui.events.js Source File</strong>
-<p>Clicking the <strong>Refresh</strong> button refreshes the download item list.</p>
-<pre class="prettyprint">
-$('#refresh-button').on('tap', function onRefreshBtnTap(event)
- {
- event.preventDefault();
- event.stopPropagation();
- app.refreshDownloadsList();
- });
-</pre></li></ol>
-
- <h3 id="template" name="template">Defining the Template Mechanism</h3>
-
-<p>The Template Manager is used to follow the MVC (Model View Controller) architecture while generating a view item for the downloaded content. The whole process of generating the output HTML is divided into 3 parts:</p>
-
- <ol>
- <li><strong>js/app.ui.templateManager.js Source File</strong>
- <ol type="a"><li>
-<p>The Template Manager loads the template files to the cache.</p>
-
-<pre class="prettyprint">
-loadToCache: function TemplateManager_loadToCache(tplNames, onSuccess)
-{
- var self = this,
- cachedTemplates = 0,
- tplName,
- tplPath;
-
- if ($.isArray(tplNames))
- {
- /* For each template */
- $.each(tplNames, function onTplIterate(index, fileName)
- {
- /* Cache template html */
- if (self.cache[fileName] === undefined)
- {
- tplName =
- [
- fileName,
- app.config.get('templateExtension')
- ].join('');
- tplPath =
- [
- app.config.get('templateDir'),
- tplName
- ].join('/');
-
- $.ajax(
- {
- url: tplPath,
- cache: true,
- dataType: 'html',
- async: true,
- success: function onTplLoadSuccess(data)
- {
- /* Increase counter */
- cachedTemplates += 1;
-
- /* Save to cache */
- self.cache[fileName] = data;
-
- /* If all templates are cached, launch callback */
- if (cachedTemplates >= tplNames.length
- && typeof onSuccess === 'function')
- {
- onSuccess();
- }
- },
- error: function onTplLoadError(jqXHR, textStatus, errorThrown)
- {
- /* Error handling */
- }
- });
- }
- else
- {
- /* Template is already cached */
- cachedTemplates += 1;
- /* If all templates are cached, launch callback */
- if (cachedTemplates >= tplNames.length
- && typeof onSuccess === 'function')
- {
- onSuccess();
- }
- }
- });
- }
-};
-</pre></li>
-<li>
-<p>The Template Manager returns the template HTML from the cache.</p>
-<pre class="prettyprint">
-get: function TemplateManager_get(tplName, tplParams)
-{
- if (this.cache[tplName] !== undefined)
- {
- return this.getCompleted(this.cache[tplName], tplParams);
- }
-
- return '';
-}
-</pre></li>
-<li>
-<p>The Template Manager returns the completed template where specified parameters have been inserted.</p>
-<pre class="prettyprint">
-getCompleted: function TemplateManager_getCompleted(tplHtml, tplParams)
-{
- var tplParam;
-
- for (tplParam in tplParams)
- {
- if (tplParams.hasOwnProperty(tplParam))
- {
- tplHtml = this.passThruModifiers(tplHtml, tplParam, tplParams[tplParam]);
- }
- }
-
- return tplHtml;
-}
-</pre></li>
- </ol> </li></ol>
-
-<h3 id="item" name="item">Defining the Download Items</h3>
-
-<ol>
- <li><strong>templates/download-row.tpl Source File</strong>
-<p>The download items are displayed in a list, where each item is its own row. The rows are placed in the list using the Template Manager.</p>
-<p>Every list element contains an icon suitable for the content type, the file name, some control buttons proper for the current download state, and a progress bar representing the download progress. The elements also have additional attributes used to recognize the download element recognition from the JavaScript code, for example while updating the progress bar value.</p>
-<pre class="prettyprint lang-html">
-<li class="downloadListElement" id="%downloadId%">
- <div class="download-item">
- <div class="download-desc" style="position: relative;">
- <img src="images/%fileIcon%" alt="icon" class="ui-li-bigicon"></img>
- <p class="download-name" id="name%downloadId%">%fileName%</p>
- </div>
- <div class="download-control">
- <div data-role="progressbar" id="progressbar%downloadId%"></div>
- <div class="download-buttons">
- <div data-role="button" class="download-button download-navigation-button"
- state="play" for-download="%downloadId%" for-url="%url%"
- id="button%downloadId%" listener-flag="1">
- <img src="images/pause.png" class="download-navigation-button-image"
- id="buttonimg%downloadId%"/>
- </div>
- <div data-role="button" class="download-button download-delete-button"
- state="play" for-download="%downloadId%"
- id="delete%downloadId%">
- <img src="images/stop.png" class="download-navigation-button-image"
- id="deleteimg%downloadId%"/>
- </div>
- </div>
- </div>
- <div>
-</li>
-</pre></li>
-</ol>
-
-
- <h2 id="manage" name="manage">Managing Downloads</h2>
-
- <p>This section builds upon the elements described in <a href="download_w.htm#manage">Managing Downloads</a>.</p>
-
-
-<p>The core functionalities regarding the control of the download request are implemented in the <code>js/app.model.js</code> file.</p>
-
-<h3 id="start" name="start">Starting the Download</h3>
- <ol>
- <li><strong>js/app.model.js Source File</strong>
-
-<p>The download process starts when user clicks <strong>OK</strong> next to the URL input field on the main screen. The button click indirectly invokes the <code>startDownloading()</code> method, which is responsible for starting the download process. A new <code>DownloadRequest</code> object is created and the download process is started through the <code>DownloadManager</code> object.</p>
-<pre class="prettyprint">
-startDownloading: function Model_startDownloading(url, eventHandlers, onSuccess)
-{
- console.log('Model_startDownloading: ' + url);
- var downloadRequest, downloadId;
-
- try
- {
- downloadRequest = new tizen.DownloadRequest(url, 'downloads');
- downloadId = tizen.download.start(downloadRequest, eventHandlers);
- onSuccess(downloadId, url);
- }
-}
-</pre></li>
- <li><strong>js/app.js Source File</strong>
-
-<p>After the download process is started successfully, the download item information is added to the local storage and the application user interface is updated.</p>
-<pre class="prettyprint">
-onDownloadStarted: function App_onDownloadStarted(id, url)
-{
- console.log('App_onDownloadStarted: ', id);
- var fileName = this.helpers.getSourceName(url);
- this.ui.onDownloadStarted(id, url, fileName, this.model.updateRecord.bind(this, id,
- {
- 'fileName': fileName,
- 'url': url,
- 'state': 0
- }));
-}
-</pre></li>
- <li><strong>js/app.ui.js Source File</strong>
-
-<p>The user interface is updated using the download row template obtained through the <code>templateManager</code> object.</p>
-<pre class="prettyprint">
-addDownloadRecordToList: function Ui_addDownloadRecordToList(id, url, fileName,
- updateStorageCallback)
-{
- var ul = $('#main-content ul.ui-listview'),
- fileIcon = app.helpers.resolveFileIcon(app.helpers.getFileExtension(fileName)),
- listElement = this.templateManager.get('download-row',
- {
- downloadId: id,
- fileName: fileName,
- url: url,
- fileIcon: fileIcon
- });
-
- ul.append(listElement).listview('refresh');
- ul.find('#progressbar' + id).progressbar({value: 0});
- ul.find('#delete' + id).button();
- ul.find('#button' + id).button();
- updateStorageCallback($('#progressbar' + id).progressbar('option', 'value'));
-}
-</pre></li>
- </ol>
- <h3 id="pause" name="pause">Pausing and Resuming the Download</h3>
-
- <ol>
- <li><strong>js/app.ui.events.js Source File</strong>
-<p>After the download item is created, the user can pause or resume operations through the applicable buttons in the download list element. To display the correct buttons, you must identify the current state of the download request.</p>
-<pre class="prettyprint">
-$('#main').on('tap', '.download-navigation-button', function onNavigationBtnTap(event)
- {
- event.preventDefault();
- event.stopPropagation();
- var obj = $(this);
- if (obj.attr('state') === 'play')
- {
- app.pauseDownloading(obj.attr('for-download'));
- }
- else if (obj.attr('state') === 'pause')
- {
- app.resumeDownloading(obj.attr('for-url'),
- obj.attr('for-download'),
- obj.attr('listener-flag'));
- }
- else if (obj.attr('state') === 'finished')
- {
- app.launchFile($('#name' + obj.attr('for-download')).text());
- }
- else if (obj.attr('state') === 'canceled')
- {
- app.startDownloading(obj.attr('for-url'),
- obj.attr('for-download'));
- }
- });
-</pre></li>
- <li><strong>js/app.model.js Source File</strong>
-<ol type="a"><li>
- <p>If the request is in the play state, and the user clicks the button, the download process is paused. The user interface is notified about the pause by the callback, provided while starting the download process.</p>
-<pre class="prettyprint">
-pauseDownloading: function Model_pauseDownloading(downloadId)
-{
- console.log('Model_pauseDownloading', downloadId);
- try
- {
- tizen.download.pause(downloadId);
- }
-}
-</pre></li>
-<li>
- <p>If the request in the paused state, the download process is resumed.</p>
-<pre class="prettyprint">
-resumeDownloading: function Model_resumeDownloading(downloadId, eventHandlers,
- listenerCallback)
-{
- console.log('Model_resumeDownloading: ', downloadId);
- tizen.download.resume(downloadId);
- if (eventHandlers !== null)
- {
- tizen.download.setListener(downloadId, eventHandlers);
- listenerCallback(downloadId);
- }
-}
-</pre></li>
- </ol> </li>
- </ol>
- <h3 id="stop" name="stop">Stopping the Download</h3>
- <ol>
- <li><strong>js/app.ui.events.js Source File</strong>
-<p>To stop the download process, you must first determine the download request status.</p>
-<pre class="prettyprint">
-$('#main').on('tap', '.download-delete-button', function onDeleteBtnTap(event)
- {
- event.preventDefault();
- event.stopPropagation();
- var obj = $(this);
- if (obj.attr('state') === 'play')
- {
- app.cancelDownloading(obj.attr('for-download'));
- }
- else if (obj.attr('state') === 'pause' ||
- obj.attr('state') === 'finished' ||
- obj.attr('state') === 'canceled' ||
- obj.attr('state') === 'failed')
- {
- app.deleteDownloading(obj.attr('for-download'));
- }
- });
-</pre></li>
- <li><strong>js/app.model.js Source File</strong>
- <p>If the download status is play, you can invoke the download cancellation function.</p>
-<pre class="prettyprint">
-cancelDownloading: function Model_cancelDownloading(downloadId)
-{
- console.log('Model_cancelDownloading: ' + downloadId);
- try
- {
- tizen.download.cancel(downloadId);
- }
-}
-</pre></li>
- <li><strong>js/app.ui.js Source File</strong>
- <p>If the download request is not in the play state, the download is removed from the main screen list and local storage.</p>
-<pre class="prettyprint">
-deleteDownloading: function Ui_deleteDownloading(id)
-{
- $('#' + id).remove();
-}
-</pre></li>
- </ol>
-
-
-<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>
\ No newline at end of file
</ul></li>
</ul>
-<p>For a practical example of managing files in your application, see the <a href="task_filemanager_w.htm">File Manager</a> sample task.</p>
-
<h2 id="access">File and Directory Access</h2>
<p>You can access the virtual file system using the <code>FileSystemManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#FileSystemManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#FileSystemManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html#FileSystemManager">TV</a> applications):</p>
<strong>Note</strong>
The batch mode does not provide progress information about operations. To ensure that you can view the progress, break the batch operation down into multiple smaller batch operations. For example, break down a batch of 100 update requests into 10 batch operations that update 10 records at a time. Breaking down a batch operation also helps you avoid blocking other database operations, such as add or remove.
</div>
-
-<p>For a practical example of browsing and managing the media directories in your application, see the <a href="task_mediacontent_w.htm">Media Content</a> sample task.</p>
-
<h2 id="prerequisites">Prerequisites</h2>
<p>To use the Content API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html">TV</a> applications), the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
+++ /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>Task: File Manager</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">Dependencies</p>
- <ul class="toc">
- <li>Tizen 2.4 and Higher for Mobile</li>
- <li>Tizen 2.3.1 and Higher for Wearable</li>
- </ul>
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#layout">Defining the Application Layout</a></li>
- <li><a href="#clipboard">Managing Clipboard</a></li>
- <li><a href="#storage">Managing Device Storage</a></li>
- </ul>
- <p class="toc-title">Related Info</p>
- <ul class="toc">
- <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">Filesystem API for Mobile Web</a></li>
- <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html">Filesystem API for Wearable Web</a></li>
- <li><a href="https://developer.tizen.org/development/sample/web/Storage/File_Manager" target="_blank">File Manager Sample Description</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Task: File Manager</h1>
- <p>This task, based on the FileManager sample delivered with the Tizen Studio, demonstrates how you can use the Filesystem API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html">wearable</a> applications) to manage files in your application. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Storage/File_Manager" target="blank">File Manager</a>.</p>
- <p>This task consists of the following parts:</p>
- <ul>
- <li><a href="#layout">Defining the Application Layout</a> defines how to create the application screens. </li>
- <li><a href="#clipboard">Managing Clipboard</a> defines how to work with the clipboard.</li>
- <li><a href="#storage">Managing Device Storage</a> defines how to create, copy, move, and remove folders and files.</li>
- </ul>
- <p>This sample is a fully functional application for browsing the device storage. The user can create, copy, move, and remove folders and files.</p>
-
- <h2 id="layout" name="layout">Defining the Application Layout</h2>
- <p>The FileManager sample application layout uses the template manager based on the MVC (Model View Controller) architecture, and consists of 1 screen that displays the device storage folder and file structure.</p>
-
-<p>Additionally, the sample application layout consists of 2 UI elements: the clipboard footer controls enable you to delete, move, or copy selected folders and files, and the More pop-up window enables you to create a new folder and to paste content to a folder.</p>
-
- <p>The following figure shows the main screens of the application.</p>
- <p align="center"><strong>Figure: FileManager screen</strong></p>
- <p align="center"><img alt="FileManager screen" src="../../images/filemanager.png" /></p>
- <h3 id="temp" name="temp">Using the Template Manager</h3>
- <p>The template manager enables the HTML output generation to be divided into 3 parts.</p>
- <ol>
- <li><strong>app.ui.templateManager.js Source File</strong>
- <ol type="a">
- <li>
-<p>The template manager loads the template files into the cache.</p>
-<pre class="prettyprint">
-loadToCache: function TemplateManager_loadToCache(tplNames, onSuccess)
-{
- var self = this,
- cachedTemplates = 0,
- tplName,
- tplPath;
-
- if ($.isArray(tplNames))
- {
- $.each(tplNames, function(index, fileName)
- {
- if (self.cache[fileName] === undefined)
- {
- tplName = [fileName, app.config.get('templateExtension')].join('');
- tplPath = [app.config.get('templateDir'), tplName].join('/');
- $.ajax(
- {
- url: tplPath,
- cache: true,
- dataType: 'html',
- async: true,
- success: function(data)
- {
- cachedTemplates += 1;
- self.cache[fileName] = data;
- if (cachedTemplates >= tplNames.length
- && typeof onSuccess === 'function')
- {
- onSuccess();
- }
- },
-
- /* Error handling */
- });
- }
- else
- {
- cachedTemplates += 1;
- if (cachedTemplates >= tplNames.length
- && typeof onSuccess === 'function')
- {
- onSuccess();
- }
- }
- });
- }
-}
-</pre></li>
- <li> <p>Next, the template manager returns the template HTML content from the cache.</p>
-<pre class="prettyprint">
-get: function TemplateManager_get(tplName, tplParams)
-{
- if (this.cache[tplName] !== undefined)
- {
- return this.getCompleted(this.cache[tplName], tplParams);
- }
-
- return '';
-}
-</pre></li>
- <li><p>The <code>getCompleted()</code> method returns the completed template using the specified parameters, prepared by the <code>passThruModifiers()</code> method.</p>
-<pre class="prettyprint">
-getCompleted: function TemplateManager_getCompleted(tplHtml, tplParams)
-{
- var tplParam, replaceRegExp;
-
- for (tplParam in tplParams)
- {
- if (tplParams.hasOwnProperty(tplParam))
- {
-
- tplHtml = this.passThruModifiers(tplHtml, tplParam, tplParams[tplParam]);
- }
- }
-
- return tplHtml;
-}
-
-passThruModifiers: function(tplHtml, tplParam, content)
-{
- var regModOn = new RegExp('%' + tplParam + '\\|([a-zA-Z]){1,}%', 'g'),
- regModOff = new RegExp(['%', tplParam, '%'].join(''), 'g'),
- regModGet = new RegExp('%' + tplParam + '\\|(.+?)%'),
- specRegExp = new RegExp('\\$', 'g'), modifier;
-
- if (content && (typeof content === 'string'))
- {
- content = content.replace(specRegExp, '$$$$');
- }
-
- if (regModOn.test(tplHtml))
- {
- modifier = tplHtml.match(regModGet)[1];
- try
- {
- content = this.modifiers[modifier](content);
- }
-
- tplHtml = tplHtml.replace(regModOn, content);
- }
- else
- {
- tplHtml = tplHtml.replace(regModOff, content);
- }
-
- return tplHtml;
-}
-</pre></li>
- </ol> </li>
- </ol>
-
- <h3 id="main" name="main">Defining the Main Screen</h3>
- <p>The main screen elements initialization and display functionality is implemented in the <code>app.ui.js</code> file.</p>
- <ol>
- <li><strong>main.tpl Source File</strong>
-<p>The main screen of the application displays the device storage folder and file structure. The header section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen.</p>
- <p>If the user navigates to another child directory, the header section displays navigation buttons - <strong>Up</strong> and <strong>Home</strong> - to move 1 directory up in the file system and to move to the root directory, respectively. In a child directory, the breadcrumb navigation from the root directory to the current directory is displayed as well.</p>
-<pre class="prettyprint lang-html">
-<!--Header section-->
-<div data-role="header" data-position="fixed">
- <h1 id="mainTitle"></h1>
-
- <!--Other application code-->
-
- <a id="homeBtn">Home</a>
- <a id="levelUpBtn">Up</a>
-
- <!--Other application code-->
-
- <div id="navbar"></div>
- <div class="selectAll" style="display: none"></div>
-
- <!--Other application code-->
-
-</div>
-</pre></li>
-
- <li><strong>folderRow.tpl Source File</strong>
-<p>The <code>folderRow.tpl</code> template file defines the actual content of the main screen, which is initialized in the <code>app.ui.js</code> source file.</p>
-<pre class="prettyprint lang-html">
-<!--Content section-->
-<li class="node folder ui-li-1line-bigicon1" id="row%id%" label="%name%"
- uri="%uri|escapeEncies%" fullUri="%fullUri|escapeEncies%">
- <form class="my-ui-checkbox hidden"><input type="checkbox"/></form>
- <img src="images/folder.png" class="ui-li-bigicon"/>
- <span class="ui-li-text-main nodename">%name|escape%</span>
-</li>
-
-</pre></li>
- </ol>
-
- <h3 id="foot" name="foot">Defining the Footer Controls</h3>
- <ol>
- <li><strong>main.tpl Source File</strong>
-<p>The footer section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>footer</code>. The footer section contains a tab bar with a button for enabling the clipboard functionality in the application.</p>
-
-<p>The clipboard consists of buttons for deleting, moving, and copying folders and files, and also canceling the clipboard operation. In the clipboard mode, check boxes appear next to the folders and files list in the current directory on the main screen.</p>
-<pre class="prettyprint lang-html">
-<div data-role="footer" data-position="fixed">
- <div class="ui-myToolBar">
- <div data-role="tabbar" class="standardTabbar">
- <ul>
- <li><a id="editActionBtn" href="#">Edit</a></li>
-
- <!--Other application code-->
-
- </ul>
- </div>
-
- <div data-role="tabbar" class="editTabbar" style="display: none">
- <ul>
- <li><a id="deleteActionBtn" href="#">Delete</a></li>
- <li><a id="moveActionBtn" href="#">Move</a></li>
- <li><a id="copyActionBtn" href="#">Copy</a></li>
- <li><a id="cancelActionBtn" href="#">Cancel</a></li>
- </ul>
- </div>
-
- <!--Other application code-->
-
- </div>
-</div>
-</pre></li></ol>
-
- <h3 id="popup" name="popup">Defining the Pop-up Window</h3>
- <ol>
- <li><strong>main.tpl Source File</strong>
-<p>The pop-up window consists of a jQuery pop-up menu with options for creating a new folder at the current directory location or for pasting already copied content to the current directory location.</p>
-<pre class="prettyprint lang-html">
-<div data-role="footer" data-position="fixed">
- <div class="ui-myToolBar">
- <div data-role="tabbar" class="standardTabbar">
- <ul>
-
- <!--Other application code-->
-
- <li><a id="moreActionBtn" href="#morePopup" data-rel="popup">More</a></li>
-
- <!--Other application code-->
-
- </ul>
- </div>
- <div id="morePopup" data-role="popup">
- <!--Other application code-->
-
- </div>
- </div>
-</div>
-</pre></li></ol>
-
-<h2 id="clipboard" name="clipboard">Managing Clipboard</h2>
- <p>This section builds upon the elements described in <a href="file_system_w.htm#file_dir">Managing Files and Directories</a>.</p>
-
- <h3 id="initialize" name="initialize">Initializing the Clipboard</h3>
-<p>The clipboard features definition functionality is implemented in the <code>app.clipboard.js</code> file.</p>
- <ol>
- <li><strong>Retrieving Clipboard Content</strong>
- <p>The <code>get()</code> method is defined to retrieve all the filesystem paths saved currently in the clipboard.</p>
-<pre class="prettyprint">
-get: function Clipboard_get()
-{
- return this.data;
-}
-</pre></li>
- <li><strong>Adding New Content to the Clipboard</strong>
- <p>The <code>add()</code> method is defined to add filesystem paths to the clipboard.</p>
-<pre class="prettyprint">
-add: function Clipboard_add(paths)
-{
- var len = paths.length, i;
-
- /* Clear clipboard */
- this.clear();
- for (i = 0; i < len; i += 1)
- {
- if (this.has(paths[i]) === false)
- {
- this.data.push(paths[i]);
- }
- }
-
- return this.data.length;
-}
-</pre></li>
- <li><strong>Checking if a Path is Present in the Clipboard</strong>
- <p>The <code>has()</code> method is defined to check whether the currently copied filesystem path is already present in the clipboard.</p>
-<pre class="prettyprint">
-has: function Clipboard_has(path)
-{
- return $.inArray(path, this.data) === -1 ? false : true;
-}
-</pre></li>
- <li><strong>Setting the Clipboard Mode</strong>
- <p>The <code>setMode()</code> method is defined to set the clipboard in 3 available modes - copy, move, and inactive (default).</p>
-<pre class="prettyprint">
-setMode: function Clipboard_setMode(mode)
-{
- if ($.inArray(mode, [this.MOVE_MODE_ID, this.COPY_MODE_ID]) === false)
- {
- /* Error handling */
- }
- this.mode = mode;
-
- return true;
-}
-</pre></li>
- <li><strong>Clearing the Clipboard</strong>
- <p>The <code>clear()</code> method is defined to clear all the clipboard content and reset it to the default mode.</p>
-<pre class="prettyprint">
-clear: function Clipboard_clear()
-{
- this.data = [];
- this.mode = this.INACTIVE_MODE;
-}
-</pre></li>
- </ol>
- <h3 id="perform" name="perform">Performing Clipboard Operations</h3>
- <p>The clipboard operation functionality is implemented in the <code>app.js</code> file.</p>
- <ol>
- <li><strong>Copying Content to the Clipboard</strong>
-<p>The <code>saveToClipboard()</code> method is used to add filesystem paths to the clipboard and set the appropriate clipboard mode.</p>
-<pre class="prettyprint">
-saveToClipboard: function App_saveToClipboard(paths, mode)
-{
- var clipboardLength = this.clipboard.add(paths);
-
- if (clipboardLength > 0)
- {
- this.clipboard.setMode(mode);
- app.ui.alertPopup('Data saved in clipboard');
- this.ui.clearTabbars();
- }
- else
- {
- alert('Error occurred. Data has not been saved in clipboard');
- }
-
- this.ui.refreshPasteActionBtn(this.clipboard.isEmpty());
-}
-</pre></li>
-
-<li><strong>Pasting Content from the Clipboard</strong>
- <ol type="a"><li><p>The <code>pasteClipboard()</code> method is used to copy filesystem paths from the clipboard or to move filesystem paths to the current directory location based on the current clipboard mode.</p>
-<pre class="prettyprint">
-pasteClipboard: function App_pasteClipboard()
-{
- var clipboardData = this.clipboard.get();
-
- if (clipboardData.length === 0)
- {
- app.ui.alertPopup('Clipboard is empty');
-
- return false;
- }
-
- if (this.clipboard.getMode() === this.clipboard.COPY_MODE_ID)
- {
- this.model.copyNodes(this.currentDirHandle, clipboardData, this.currentPath,
- this.onPasteClipboardSuccess.bind(this));
- }
- else
- {
- this.model.moveNodes(this.currentDirHandle, clipboardData, this.currentPath,
- this.onPasteClipboardSuccess.bind(this));
- }
- this.ui.refreshPasteActionBtn(this.clipboard.isEmpty());
-
- return true;
-}
-</pre></li>
- <li><p>The <code>onPasteClipboardSuccess()</code> event handler responds to the success event of pasting content from the clipboard by clearing the clipboard.</p>
-<pre class="prettyprint">
-onPasteClipboardSuccess: function App_onPasteClipboardSuccess()
-{
- this.clipboard.clear();
- this.refreshCurrentPage();
-}
-</pre></li></ol>
- </li>
- </ol>
-
- <h2 id="storage" name="storage">Managing Device Storage</h2>
- <p>This section builds upon the elements described in <a href="file_system_w.htm#manage">Managing File Storages</a>, <a href="file_system_w.htm#create">Creating and Deleting Files and Directories</a>, and <a href="file_system_w.htm#retrieve">Retrieving Files and File Details</a>.</p>
-
- <h3 id="configure" name="configure">Initializing the Device Storage</h3>
- <ol>
- <li><strong>config.xml Source File</strong>
- <p>The required privileges are declared in the <code>config.xml</code> file.</p>
-<pre class="prettyprint">
-<!--Configuration file content-->
-<widget ...>
- <!--Other configuration details-->
- <tizen:privilege name="http://tizen.org/privilege/content.read"/>
- <tizen:privilege name="http://tizen.org/privilege/content.write"/>
- <tizen:privilege name="http://tizen.org/privilege/application.launch"/>
- <tizen:privilege name="http://tizen.org/privilege/filesystem.read"/>
- <tizen:privilege name="http://tizen.org/privilege/filesystem.write"/>
- <!--Other configuration details-->
-</widget>
-</pre></li>
- </ol>
- <h3 id="retrieve" name="retrieve">Retrieving Storages</h3>
-
- <ol>
- <li><strong>app.model.js Source File</strong>
- <p>The <code>loadInternalStorages()</code> method calls the <code>getStorages()</code> method to get the storages of a specific storage type.</p>
-<pre class="prettyprint">
-loadInternalStorages: function Model_loadInternalStorages(onSuccess)
-{
- var self = this;
-
- this.systemIO.getStorages('INTERNAL', function(storages)
- {
- self.storages = storages;
- if (typeof onSuccess === 'function')
- {
- onSuccess();
- }
- }, 'internal0');
-}
-</pre></li>
- <li><strong>app.systemIO.js Source File</strong>
- <p>The <code>listStorages()</code> method of the <code>FileSystemManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#FileSystemManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#FileSystemManager">wearable</a> applications) is used to retrieve all the available storages.</p>
-<pre class="prettyprint">
-getStorages: function SystemIO_getStorages(type, onSuccess, excluded)
-{
- try
- {
- tizen.filesystem.listStorages(function(storages)
- {
- var tmp = [],
- len = storages.length,
- i;
-
- if (type !== undefined)
- {
- for (i = 0; i < len; i += 1)
- {
- if (storages[i].label !== excluded)
- {
- if (storages[i].type === 0 || storages[i].type === type)
- tmp.push(storages[i]);
- }
- }
- }
- else
- {
- tmp = storages;
- }
-
- if (typeof onSuccess === 'function')
- onSuccess(tmp);
- });
- }
-}
-</pre></li>
-</ol>
-
- <h3 id="manage" name="manage">Managing Files and Directories</h3>
- <p>The directory creation functionality is implemented in the <code>app.js</code> file. The file creation, file deletion, and directory deletion functionality is implemented in the <code>app.systemIO.js</code> file.</p>
- <ol>
- <li><strong>Creating a File</strong>
- <p>The <code>createFile()</code> method of the <code>File</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#File">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#File">wearable</a> applications) is used to create a new file in the current directory.</p>
-<pre class="prettyprint">
-createFile: function SystemIO_createFile(directoryHandle, fileName)
-{
- try
- {
- return directoryHandle.createFile(fileName);
- }
-}
-</pre>
-<p>Similarly, the <code>createDirectory()</code> method is used to create a directory at the current storage location in the application.</p></li>
- <li><strong>Deleting a File</strong>
- <p>The <code>deleteFile()</code> method of the <code>File</code> interface is used to delete a file by specifying the filesystem path of the file.</p>
-<pre class="prettyprint">
-deleteFile: function SystemIO_deleteFile(dir, filePath, onDeleteSuccess, onDeleteError)
-{
- try
- {
- dir.deleteFile(filePath, onDeleteSuccess, onDeleteError);
- }
-}
-</pre>
-<p>Similarly, the <code>deleteDirectory()</code> method is used to delete a selected directory. You can specify if the deletion is to be performed recursively for the sub-directories as well.</p></li>
- </ol>
- <h3 id="file" name="file">Retrieving File Details</h3>
- <p>The file and file list retrieval functionality is implemented in the <code>app.systemIO.js</code> file. The file URI retrieval functionality is implemented in the <code>app.ui.js</code> file.</p>
- <ol>
- <li><strong>Retrieving a File</strong>
- <p>The <code>resolve()</code> method of the <code>FileSystemManager</code> interface is used to retrieve a file handle by specifying the location of the file.</p>
-<pre class="prettyprint">
-openDir: function SystemIO_openDir(directoryPath, onSuccess, onError, openMode)
-{
- openMode = openMode || 'rw';
- onSuccess = onSuccess || function() {};
-
- try
- {
- tizen.filesystem.resolve(directoryPath, onSuccess, onError, openMode);
- }
-}
-</pre></li>
- <li><strong>Retrieving a List of Files</strong>
- <p>The <code>listFiles()</code> method of the <code>FileSystemManager</code> interface is used to list all the files and directories present in the current storage location in the application.</p>
-<pre class="prettyprint">
-getFilesList: function SystemIO_getFilesList(dir, onSuccess)
-{
- try
- {
- dir.listFiles(function(files)
- {
- var tmp = [],
- len = files.length,
- i;
-
- for (i = 0; i < len; i += 1)
- {
- tmp.push(files[i].name);
- }
-
- if (typeof onSuccess === 'function')
- {
- onSuccess(tmp);
- }
- }, function(e)
- {
- console.error('SystemIO_getFilesList dir.listFiles() error:', e);
- });
- }
-}
-</pre></li>
- <li><strong>Retrieving a Folder or File URI</strong>
- <p>The <code>toURI()</code> method of the <code>FileSystemManager</code> interface is used to retrieve the folder or file URI.</p>
-<pre class="prettyprint">
-displayFolder: function Ui_displayFolder(folderName, nodes, refresh)
-{
- var len = nodes.length,
- listElements =
- [this.templateManager.get('levelUpRow')], nodeName, checkedRows = [], i;
-
- /* Other application code */
-
- for (i = 0; i < len; i = i + 1)
- {
- nodeName = nodes[i].name.trim();
- if (nodeName !== '')
- {
- if (nodes[i].isDirectory)
- {
- listElements.push(this.templateManager.get('folderRow',
- {
- id: i,
- name: nodeName,
- uri: nodes[i].fullPath,
- fullUri: nodes[i].toURI()
- }));
- }
- else
- {
- listElements.push(this.templateManager.get('fileRow',
- {
- id: i,
- name: nodeName,
- uri: nodes[i].fullPath,
- fullUri: nodes[i].toURI(),
- thumbnailURI: this.helpers.getThumbnailURI(nodeName, nodes[i])
- }));
- }
- }
- }
-}
-</pre></li>
- </ol>
-
-<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>
-
+++ /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>Task: Media Content</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">Dependencies</p>
- <ul class="toc">
- <li>Tizen 2.4 and Higher for Mobile</li>
- <li>Tizen 2.3.1 and Higher for Wearable</li>
- </ul>
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#layout">Defining the Application Layout</a></li>
- <li><a href="#initialize">Initializing the Application</a></li>
- <li><a href="#browse">Browsing Content</a></li>
- <li><a href="#manage">Viewing Media File Details</a></li>
- </ul>
- <p class="toc-title">Related Info</p>
- <ul class="toc">
- <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html">Content API for Mobile Web</a></li>
- <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html">Content API for Wearable Web</a></li>
- <li><a href="https://developer.tizen.org/development/sample/web/Content/Media_Content" target="_blank">Media Content Sample Description</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Task: Media Content</h1>
- <p>This task, based on the MediaContent sample delivered with the Tizen Studio, demonstrates how you can use the Content API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html">wearable</a> applications) to manage media files in your application. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Content/Media_Content" target="blank">Media Content</a>.</p>
- <p>This task consists of the following parts:</p>
- <ul>
- <li><a href="#layout">Defining the Application Layout</a> defines how to create the application screens. </li>
- <li><a href="#initialize">Initializing the Application</a> defines how to initialize the application.</li>
- <li><a href="#browse">Browsing Content</a> defines how to search for media directories and items. </li>
- <li><a href="#manage">Viewing Media File Details</a> defines how to view media item details.</li>
- </ul>
- <p>This sample is a fully functional application which searches for and browses media directories and media item files. The media item files can be viewed and updated.</p>
-
- <h2 id="layout" name="layout">Defining the Application Layout</h2>
- <p>The MediaContent sample application layout consists of 3 screens: the main screen displays a list of storage types and folders, the item screen displays a list of media items, and the Details screen displays the media item details.</p>
-
- <p>The following figure shows the main screens of the application.</p>
- <p align="center"><strong>Figure: MediaContent screens</strong></p>
- <p align="center"><img alt="MediaContent screens" src="../../images/content_sd.png" /></p>
- <h3 id="main" name="main">Defining the Main Screen</h3>
- <ol>
- <li><strong>index.html Source File</strong>
- <ol type="a">
- <li> <p>The main screen of the application displays a list of storage types and folders containing media items. The header section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen.</p>
-<pre class="prettyprint lang-html">
-<!--Main screen layout-->
-<div data-role="page" id="main">
- <!--Header section-->
- <div data-role="header" data-position="fixed">
- <h1>Media content</h1>
- </div>
-</pre></li>
- <li> <p>The actual content section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>content</code>.</p>
-<p>The section has a list component displaying the storage types, and a list divider for the folder list (whose list items are defined in the <code>main.js</code> file).</p>
-<pre class="prettyprint lang-html">
- <!--Content section-->
- <div data-role="content">
- <ul data-role="listview" id="folder-list">
- <li data-role="list-divider">Storage type</li>
- <li class="folder-type-all">
- ALL
- </li>
- <li class="folder-type-internal">
- INTERNAL
- </li>
- <li class="folder-type-external">
- EXTERNAL
- </li>
- <li data-role="list-divider" id="folder-text">Folders</li>
- </ul>
- </div>
-</div>
-</pre></li></ol></li></ol>
-
- <h3 id="folder_screen" name="folder_screen">Defining the Folder Screen</h3>
- <ol>
- <li><strong>index.html Source File</strong>
-<p>Similarly as the main screen, the folder screen contains a list component displaying radio buttons (defined within an <code><input></code> element whose <code>type</code> attribute is set to <code>radio</code>) for the content types and a list divider for the item list (whose list items are defined in the <code>main.js</code> file).
-</p>
-
-<pre class="prettyprint lang-html">
-<!--Folder screen layout-->
-<div data-role="page" id="items">
- <div data-role="header" data-position="fixed">
- <h1 id="items-title"></h1>
- </div>
-
- <!--Content section-->
- <div data-role="content">
- <ul data-role="listview" id="items-list">
- <li data-role="list-divider">Item type</li>
- <li class="ui-li-has-radio">
- ALL
- <input type="radio" name="item-type" id="item-type-all"
- value="ALL" checked="checked"/>
- </li>
- <li class="ui-li-has-radio">
- IMAGE
- <input type="radio" name="item-type" id="item-type-image" value="IMAGE"/>
- </li>
- <li class="ui-li-has-radio">
- VIDEO
- <input type="radio" name="item-type" id="item-type-video" value="VIDEO"/>
- </li>
- <li class="ui-li-has-radio">
- AUDIO
- <input type="radio" name="item-type" id="item-type-audio" value="AUDIO"/>
- </li>
- <li data-role="list-divider">Items</li>
- </ul>
- </div>
-</div>
-</pre></li>
- </ol>
-
- <p>The Details screen content section contains a list component, and every list item is defined in the <code>main.js</code> file.</p>
-
-
- <h2 id="initialize" name="initialize">Initializing the Application</h2>
- <ol>
- <li><strong>config.xml Source File</strong>
- <p>The required privileges are declared in the <code>config.xml</code> file.</p>
-<pre class="prettyprint">
-<!--Configuration file content-->
-<widget ...>
- <!--Other configuration details-->
- <tizen:privilege name="http://tizen.org/privilege/content.read"/>
- <tizen:privilege name="http://tizen.org/privilege/content.write"/>
- <!--Other configuration details-->
-</widget>
-</pre></li>
- </ol>
-
- <h2 id="browse" name="browse">Browsing Content</h2>
- <p>This section builds upon the elements described in <a href="stored_content_w.htm#browse">Browsing Content</a>.</p>
-
-
- <h3 id="get_folder" name="get_folder">Retrieving Media Directories</h3>
- <ol>
- <li><strong>main.js Source File</strong>
- <ol type="a">
- <li><p>The Content API uses the same <code>ContentManager</code> interface instance (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentManager">wearable</a> applications) for all content-related functionalities. Retrieve the <code>ContentManager</code> interface instance using the <code>tizen</code> global object.</p>
-<pre class="prettyprint">
-gMediaSource = tizen.content;
-</pre></li>
- <li><p>Use the <code>getFolders()</code> method to retrieve the list of directories present in all storage types. The <code>showFolderList()</code> method is called to perform the actual operation of retrieving the directories, based on the selection made in the <strong>Storage type</strong> list.</p> <p>In the example below, all the directories in the device containing media items are retrieved.</p>
-<pre class="prettyprint">
-function getFolders(storageType)
-{
- try
- {
- gMediaSource = tizen.content;
- gMediaSource.getDirectories(onGetFoldersSuccess, onGetFoldersError);
- }
- function onGetFoldersSuccess(folders)
- {
- $("#folder-list").delegate("li", "vclick", function()
- {
- var id = $(this).data("id");
- if (id != null)
- {
- getFolderItems(Number(id), gMediaType);
- }
-
- return false;
- });
- gMediaFolders = folders;
- showFolderList(storageType);
- }
- function onGetFoldersError(err)
- {
- alert("GetFolders failed:" + err.message);
- }
-
- flagInit = true;
-}
-</pre></li>
- <li><p>The <code>showFolderList()</code> method calls the <code>makeListItem()</code> method, which creates a list of directories and displays it on the screen.</p> <p>Although all the directories are retrieved in the previous step, the <code>showFolderList()</code> method only displays the directories that match with the storage type the user has selected (<strong>INTERNAL</strong> or <strong>EXTERNAL</strong>).</p>
-<pre class="prettyprint">
-function showFolderList(storageType)
-{
- setLastStorage(storageType);
- if (flagInit == false)
- {
- getFolders(storageType);
- }
- else
- {
- var str = '';
- for (var i = 0; i < gMediaFolders.length; i++)
- {
- if (storageType == "ALL" || storageType == gMediaFolders[i].storageType)
- str += makeListItem(i, gMediaFolders[i].title,
- gMediaFolders[i].directoryURI);
- }
-
- $("#folder-list>li[data-id]").remove();
- $("#folder-list").append(str).trigger("create").listview("refresh");
- }
-}
-</pre></li>
- </ol> </li>
- </ol>
- <h3 id="get_item" name="get_item">Retrieving Media Items</h3>
- <ol>
- <li><strong>main.js Source File</strong>
- <ol type="a">
- <li><p>To get the media item list, use the <code>getFolderItems()</code> method. The method takes 2 attributes: <code>folderId</code>, which takes the folder ID whose media item list is to be displayed and <code>mediaType</code>, which specifies the media type (all, image, audio, or video).</p> <p>The <code>getFolderItems()</code> method is called when the user clicks a specific directory on the main screen, or changes the item type selection with the radio buttons on the item screen.</p>
-<pre class="prettyprint">
-function getFolderItems(folderId, mediaType)
-{
-</pre></li>
- <li><p>The <code>find()</code> method is called to search and retrieve the required media items. After a successful search, the success event handler either updates the item list on the item screen with the <code>showItemList()</code> method (if the item screen is already displayed), or moves to the item screen (which means that the retrieved item list is automatically displayed).</p>
-<pre class="prettyprint">
- function onFindItemSuccess(items)
- {
- gMediaItems = items;
- gFolderId = folderId;
- gMediaType = mediaType;
-
- if ($.mobile.activePage.attr("id") == "items")
- {
- showItemList();
- }
- else
- {
- $.mobile.changePage("#items");
- }
- }
- function onFindItemsError(err)
- {
- alert("getFolderItems findItems failed: " + err.message);
- }
- try
- {
- gMediaSource.find(onFindItemSuccess, onFindItemError,
- folderId == null ? null : gMediaFolders[folderId].id,
- mediaType ==
- "ALL" ? null : new tizen.AttributeFilter("type", "EXACTLY",
- mediaType),
- new tizen.SortMode("title", "ASC"));
- }
-}
-</pre></li>
- <li><p>The <code>showItemList()</code> method creates a list of media items and displays it on the screen.</p>
-<pre class="prettyprint">
-function showItemList()
-{
- var str = '';
- var title = gMediaFolders[gFolderId].title;
- $("#items-title").html(gFolderId == null ? "All" : title.toString());
-
- for (var i = 0; i < gMediaItems.length; i++)
- {
- str += makeListItem(i, gMediaItems[i].title, gMediaItems[i].type
- + " Rating: " + gMediaItems[i].rating);
- }
-
- $("#items-list>li[data-id]").remove();
- $("#items-list").append(str).trigger("create").listview("refresh");
-}
-</pre></li>
- </ol> </li>
- </ol>
-
-
-<h2 id="manage" name="manage">Viewing Media File Details</h2>
- <p>This section builds upon the elements described in <a href="stored_content_w.htm#manage">Managing Content</a>.</p>
- <ol>
- <li><strong>main.js Source File</strong>
- <p>To view the details of a media file, use the <code>showMediaDetail()</code> method, which displays the properties of the selected media file depending on the type of the file. The <code>makeCommonPropertiesListItems()</code> method defines a list of properties common to all the types of media files.</p> <p>The <code>showMediaDetail()</code> method is called when the user clicks a media file on the item screen and the Details screen is displayed.</p>
-<pre class="prettyprint">
-function showMediaDetail()
-{
- var str, item = gMediaItems[gItemId];
- /* Details for image items */
- if (item.type == "IMAGE")
- {
- str = makeCommonPropertiesListItems(item)
- + makeListItem(null, "Width", item.width)
- + makeListItem(null, "Height", item.height)
- + makeListItem(null, "Latitude", item.geolocation.latitude)
- + makeListItem(null, "Longitude", item.geolocation.longitude);
- }
- /* Details for video and audio items */
-
- $("#media-details").html(str).trigger("create").listview("refresh");
-}
-</pre></li>
- </ol>
-
-<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>
\ No newline at end of file
<p>You can <a href="#receive">receive state updates</a> when a specific property changes.</p></li>
</ul>
-<p>For a practical example of accessing and using system information in your application, see the <a href="task_systeminfo_w.htm">System Information</a> sample task.</p>
-
<h2 id="prerequisites">Prerequisites</h2>
<p>To use the System Information API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html">TV</a> applications), the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
+++ /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>Task: System Information</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">Dependencies</p>
- <ul class="toc">
- <li>Tizen 2.4 and Higher for Mobile</li>
- <li>Tizen 2.3.1 and Higher for Wearable</li>
- </ul>
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#layout">Defining the Application Layout</a></li>
- <li><a href="#info">Displaying Device-specific Information</a></li>
- </ul>
- <p class="toc-title">Related Info</p>
- <ul class="toc">
- <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">System Information API for Mobile Web</a></li>
- <li><a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html">System Information API for Wearable Web</a></li>
- <li><a href="https://developer.tizen.org/development/sample/web/System/System_Info" target="_blank">System Info Sample Description</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Task: System Information</h1>
- <p>This task, based on the Systeminfo sample delivered with the Tizen Studio, demonstrates how you can use the System Information API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html">wearable</a> applications) to retrieve and display status and details of various device-specific items. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/System/System_Info" target="blank">System Info</a>.</p>
- <p>This task consists of the following parts:</p>
- <ul>
- <li><a href="#layout">Defining the Application Layout</a> defines how to create the application screens. </li>
- <li><a href="#info">Displaying Device-specific Information</a> defines how to display status information of the device properties.</li>
- </ul>
- <p>This sample is a fully functional application for retrieving device-specific information and monitoring changes in the system property values.</p>
-
- <h2 id="layout" name="layout">Defining the Application Layout</h2>
- <p>The Systeminfo sample application layout consists of 2 screens: the main screen and the information screen.</p>
-
-
- <p>The following figure shows the main screens of the application.</p>
- <p align="center"><strong>Figure: Systeminfo screens</strong></p>
- <p align="center"><img alt="Systeminfo screens" src="../../images/systeminfo_sd.png" /></p>
- <h3 id="main" name="main">Defining the Main Screen</h3>
- <ol>
- <li><strong>index.html Source File</strong>
- <ol type="a">
- <li> <p>The main screen of the application displays a list of system properties about which you can retrieve information. The header section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen.</p>
-<pre class="prettyprint lang-html">
-<!--Main screen layout-->
-<div data-role="page" id="main">
- <!--Header section-->
- <div data-role="header" data-position="fixed">
- <h1>System information</h1>
- </div>
-</pre></li>
- <li><p>The actual content section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>content</code>. The content section of the main screen contains a list component (in <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Listview.htm">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_list.htm">wearable</a> applications) displaying the system properties.</p>
-<pre class="prettyprint lang-html">
- <!--Content section-->
- <div data-role="content">
- <ul data-role="listview">
- <li id="storage-info">Storage</li>
- <li id="battery-info">Battery</li>
- <li id="cpu-info">CPU</li>
- <li id="display-info">Display</li>
- <li id="orientation-info">Device orientation</li>
- </ul>
- </div>
-</div>
-</pre></li>
-
- </ol> </li>
- </ol>
- <h3 id="information" name="information">Defining the Information Screen</h3>
- <ol>
- <li><strong>index.html Source File</strong>
- <ol type="a">
- <li> <p>The information screen of the application displays the details of a selected system property. The header section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen, which varies depending on the list item the user clicks on the main screen.</p>
-<pre class="prettyprint lang-html">
-<!--Information screen layout-->
-<div data-role="page" id="info">
- <!--Header section-->
- <div data-role="header" data-position="fixed">
- <h1 id="info-title"></h1>
- </div>
-</pre></li>
- <li><p>The actual content section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>content</code>. The content section of the information screen contains a list component displaying the details of the selected system property.</p>
-<pre class="prettyprint lang-html">
- <!--Content section-->
- <div data-role="content">
- <ul data-role="listview" id="info-list">
- </ul>
- </div>
-</div>
-</pre></li>
- </ol> </li>
- </ol>
-
- <h2 id="info" name="info">Displaying Device-specific Information</h2>
- <p>This section builds upon the elements described in <a href="system_information_w.htm#state">Retrieving the Current State of a Property</a>.</p>
-
-
-
- <h3 id="list" name="list">Defining the List Item Types</h3>
- <ol>
- <li><strong>main.js Source File</strong>
- <p>When the user selects a property list item on the main screen, the information screen opens displaying a list of the details of the selected property.</p> <p>Different properties require different kind of layout and functionality in their list. User-defined methods are defined for creating the following list item types:</p>
- <ul>
- <li>List item with 1 line (contains the property value)
-<pre class="prettyprint">
-function make1lineListItem(value)
-{
- return '<li>' + value + '</li>';
-}
-</pre></li>
- <li>List item with 2 lines (contains both the property title and value)
-<pre class="prettyprint">
-function make2lineListItem(title, value)
-{
- return '<li class="ui-li-has-multiline ui-li-text-ellipsis">'
- + title
- + '<span class="ui-li-text-sub">'
- + value
- + '</span></li>';
-}
-</pre></li>
- <li>Divider list item (contains a list divider title)
-<pre class="prettyprint">
-function makeDividerListItem(value)
-{
- return '<li data-role="list-divider">' + value + '</li>';
-}
-</pre></li>
- </ul> </li>
- </ol>
- <h3 id="display" name="display">Displaying System Property Details</h3>
- <p>The system property retrieval is implemented in the <code>main.js</code> file.</p>
- <p>If the user clicks a system property on the main screen, the <code>getSystemProperty()</code> method is invoked to check the property support and retrieve the property details. If the method succeeds, the applicable event handler displays the property values on the screen. Since all the system properties are displayed similarly, only some of them are described below.</p>
- <ol>
- <li><strong>Displaying the Battery Property Values</strong>
- <p>The <code>onBatterySuccess()</code> event handler determines the screen title for the BATTERY property information screen, and defines a list containing the battery level of the device, and information about whether the device is charging (both using list items with a 2-line format). </p> <p>The <code>changePage()</code> method moves the application from the main screen to the information screen containing the defined list.</p>
-<pre class="prettyprint">
-function onBatterySuccess(battery)
-{
- /* Screen title */
- gInfoTitle = "BATTERY";
-
- /* Property value list */
- gInfo = make2lineListItem("Level", battery.level)
- + make2lineListItem("Charging", (battery.isCharging == true ? "Yes" : "No"));
-
- /* Screen change */
- $.mobile.changePage("#info");
-}
-</pre></li>
- <li><strong>Displaying the Storage Property Values</strong>
- <p>The <code>onStorageSuccess()</code> event handler determines the screen title for the storage property information screen, and defines a list. The list contains the total, available, and removable storage space, and the storage type (all using list items with a 2-line format) for each storage found in the device, and a divider list item to identify each storage.</p> <p>The <code>changePage()</code> method moves the application from the main screen to the information screen containing the defined list.</p>
-<pre class="prettyprint">
-function onStorageSuccess(storages)
-{
- gInfoTitle = "STORAGE(" + storages.length + ")";
- gInfo = "";
- for (var i = 0; i < storages.length; i++)
- {
- gInfo += makeDividerListItem("Storage " + (i + 1))
- + make2lineListItem("Type", storages.units[i].type)
- + make2lineListItem("Capacity",
- Math.floor(storages[i].capacity / 1000000) + " MB")
- + make2lineListItem("Available capacity",
- Math.floor(storages[i].availableCapacity / 1000000)
- + " MB")
- + make2lineListItem("Removable",
- (storages[i].isRemovable == true ? "Yes" : "No"));
- }
-
- $.mobile.changePage("#info");
-}
-</pre></li>
- <li><strong>Displaying the Display Property Values</strong>
- <p>The <code>onDisplaySuccess()</code> event handler determines the screen title for the display property information screen, and defines a list containing the display details (using list items with 1- and 2-line formats). In addition, the details are divided into 4 sections by adding divider list items to the list.</p> <p>The <code>changePage()</code> method moves the application from the main screen to the information screen containing the defined list.</p>
-<pre class="prettyprint">
-function onDisplaySuccess(display)
-{
- gInfoTitle = "DISPLAY";
- gInfo = makeDividerListItem("Resolution")
- + make2lineListItem("Width", display.resolutionWidth)
- + make2lineListItem("Height", display.resolutionHeight)
- + makeDividerListItem("Dots per inch")
- + make2lineListItem("Horizontal", display.dotsPerInchWidth)
- + make2lineListItem("Vertical", display.dotsPerInchHeight)
- + makeDividerListItem("Physical size")
- + make2lineListItem("Width", display.physicalWidth)
- + make2lineListItem("Height", display.physicalHeight)
- + makeDividerListItem("Brightness")
- + make1lineListItem(display.brightness);
-
- $.mobile.changePage("#info");
-}
-</pre></li>
- </ol>
-
-<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>
\ No newline at end of file
</li>
</ul>
-<p>For a practical example of sending, receiving, and managing messages in your application, see the <a href="task_chatter_w.htm">Chatter</a> mobile sample task.</p>
-
<h2 id="prerequisites">Prerequisites</h2>
<p>To use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html">Messaging</a> API, the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
+++ /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>Task: Chatter</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_optional.png"/></p>
- </div>
-
- <div id="toc_border"><div id="toc">
- <p class="toc-title">Dependencies</p>
- <ul class="toc">
- <li>Tizen 2.4 and Higher for Mobile</li>
- </ul>
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#Defining_App_Layout">Defining the Application Layout</a></li>
- <li><a href="#Initializing_App">Initializing the Application</a></li>
- <li><a href="#Managing_Messages">Managing Messages</a></li>
- <li><a href="#Creating_Sending_Messages">Creating and Sending Messages</a></li>
- <li><a href="#Managing_Message_Status">Managing Message Status Changes</a></li>
- </ul>
- <p class="toc-title">Related Info</p>
- <ul class="toc">
- <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html">Messaging API for Mobile Web</a></li>
- <li><a href="https://developer.tizen.org/development/sample/web/Communication/Chatter" target="_blank">Chatter Sample Description</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Task: Chatter</h1>
- <p>This task, based on the Chatter sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html">Messaging</a> API to send, receive, and manage your messages. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Communication/Chatter" target="blank">Chatter</a>.</p>
- <p>This task consists of the following parts:</p>
- <ul>
- <li><a href="#Defining_App_Layout">Defining the Application Layout</a> defines how to create the application screens.</li>
- <li><a href="#Initializing_App">Initializing the Application</a> defines how to initialize the application.</li>
- <li><a href="#Managing_Messages">Managing Messages</a> defines how to retrieve message recipient information and group it into a single list.</li>
- <li><a href="#Creating_Sending_Messages">Creating and Sending Messages</a> defines how to get contacts using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">Contact</a> API, how to set the recipient for a new message, and how to send the message.</li>
- <li><a href="#Managing_Message_Status">Managing Message Status Changes</a> defines how to use event listeners to check and update the message status.</li>
- </ul>
- <p>This sample is a fully functional application for managing, creating, and sending messages.</p>
-
- <h2 id="Defining_App_Layout" name="Defining_App_Layout">Defining the Application Layout</h2>
- <p>The Chatter sample application layout consists of 3 screens: the main screen displays a contact list, the Select contact screen displays a contact list and a pop-up allowing the user to enter a phone number, and the chat screen displays the conversation history, an input area, and a button, allowing the user to write and send a message.</p>
-
- <p>The following figure shows the main screens of the application.</p>
- <p align="center"><strong>Figure: Chatter screens</strong></p>
- <p align="center"><img alt="Chatter screens" src="../../images/chatter.png" /></p>
-
-
- <h3 id="main" name="main">Defining the Main Screen</h3>
- <ol>
-
- <li><strong>main_page.tpl Source File</strong>
-<p>The header section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen.</p>
-<p>The content section of the screen is added dynamically and displays a contact <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Listview.htm">list</a>. The footer section contains a tab bar with a button for starting a new chat.</p>
-<pre class="prettyprint lang-html">
-<!--Header section-->
-<div id="main-header" data-role="header" data-position="fixed">
- <h1>Chatter</h1>
-</div>
-
-<!--Content section-->
-<div id="main-content" data-role="content">
- <ul data-role="listview"></ul>
-</div>
-
-<!--Footer section-->
-<div id="main-footer" data-role="footer" data-position="fixed">
- <div data-role="tabbar" data-style="toolbar">
- <ul>
- <li><a href="#" id="contactSelect-button">New chat</a></li>
- </ul>
- </div>
-</div>
-</pre>
-
-</li>
-
-<li><strong>app.ui.event.js Source File</strong>
-<p>When the user taps the <strong>New chat</strong> button, an event is fired, and the contact list is loaded. The events are based on jQuery selectors.</p>
-<pre class="prettyprint">
-$('#contactSelect-button').on('click', function(event)
- {
- event.preventDefault();
- event.stopPropagation();
- app.loadContacts();
- });
-</pre>
-</li>
- </ol>
-
- <h3 id="contact" name="contact">Defining the Select Contact Screen</h3>
- <ol>
- <li><strong>contactSelect.tpl Source File</strong>
- <p>The content section of the Select contact screen displays a contact list. If the user taps the <strong>Enter number</strong> <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Button.htm">button</a>, a pop-up opens allowing the user to enter a phone number for a contact not on the list. The <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Popup.htm">popup</a> component contains a form for number input.</p>
-<pre class="prettyprint">
-<!--Content section-->
-<div data-role="content">
- <ul data-role="listview" id="contactSelect-list"></ul>
- <a href="#" id="enterNumber" data-role="button">Enter number</a>
-</div>
-
-<div data-role="popup" id="enterNumber-popup">
- <div class="ui-popup-title">
- <h1>Enter phone number<h1>
-</div>
-<div class="ui-popup-text">
- <form id="numberForm">
- <input type="tel" id="number" name="number" maxlength="20"/>
- </form>
-</div>
-<div class="ui-popup-button-bg">
- <a data-role="button" id="enterNumberCreate" data-rel="back"
- data-inline="true" class="ui-disabled">
- Create Chat
- </a>
-</div>
-</pre>
- </li>
- </ol>
-
- <h3 id="chat" name="chat">Defining the Chat Screen</h3>
- <ol>
- <li><strong>chat.tpl Source File</strong>
- <p>When the user taps a list item on the main screen, the chat screen is displayed. The structure of the chat template is similar to main screen. The content section of the screen displays all messages from the selected contact, grouped into a conversation. </p>
- <p>The footer section contains a <code>textarea</code> for writing a message and a button for sending it.</p>
- <p>
-The template also contains a <code>popup</code> element used to show warning and exceptions information.</p>
-<pre class="prettyprint">
-<!--Content section-->
-<div id="chat-content" data-role="content">
- <ul data-role="listview" id="message-chat"></ul>
-</div>
-
-<!--Footer section-->
-<div id="chat-footer" data-role="footer" data-position="fixed">
- <div class="ui-textArea">
- <div class="ui-textArea-text">
- <textarea id="text" class="ui-textArea-text-text"
- placeholder="Your message" data-role="none"></textarea>
- </div>
- <div class="ui-textArea-button">
- <a data-role="button" id="send">Send</a>
- <div data-role="none" id="counter" class="counter"><p></p></div>
- </div>
- </div>
-</div>
-
-<div data-role="popup" id="alertPopup" class="ui-corner-all">
- <p class="text"></p>
- <div class="alertPopup-button">
- <a href="#" data-role="button" data-inline="true" data-rel="back">OK</a>
- </div>
-</div>
-</pre>
- </li>
- </ol>
-
- <h2 id="Initializing_App" name="Initializing_App">Initializing the Application</h2>
- <ol>
- <li><strong>config.xml Source File</strong>
- <p>The required privileges are declared in the <code>config.xml</code> file.</p>
-<pre class="prettyprint">
-<!--Configuration file content-->
-<widget ...>
- <!--Other configuration details-->
- <tizen:privilege name="http://tizen.org/privilege/application.launch"/>
- <tizen:privilege name="http://tizen.org/privilege/contact.read"/>
- <tizen:privilege name="http://tizen.org/privilege/contact.write"/>
- <tizen:privilege name="http://tizen.org/privilege/messaging.read"/>
- <tizen:privilege name="http://tizen.org/privilege/messaging.send"/>
- <tizen:privilege name="http://tizen.org/privilege/messaging.write"/>
-</widget>
-</pre>
- </li>
- </ol>
-
-
- <h2 id="Managing_Messages" name="Managing_Messages">Managing Messages</h2>
-
- <p>This section builds upon the elements described in <a href="messages_w.htm#Managing_Messages">Managing Messages</a>.</p>
-
-
- <h3 id="get" name="get">Retrieving SMS Messages</h3>
- <p>The message retrieval functionality is implemented in the <code>app.model.js</code> file.</p>
- <ol>
- <li><strong>Preparing the Message Service</strong>
- <p>To retrieve messages from the device storage, you must first initialize the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageService">MessageService</a> interface and prepare the <code>smsService</code> object.</p>
-<pre class="prettyprint">
-initSmsService: function()
-{
- var self = this;
- try
- {
- tizen.messaging.getMessageServices("messaging.sms", function(s)
- {
- self.smsService = s[0];
- self.prepareMessages(app.fillUpMessagePage.bind(self));
- self.messagesChangeListener();
- });
- }
-}
-</pre>
-</li>
-
- <li><strong>Retrieving Messages for the Device Storage</strong>
- <p>The messages are retrieved using the <code>findMessages()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface. The first argument of the method a is the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AttributeFilter">AttributeFilter</a> filter object of the Tizen API, and the second argument is an event handler for sorting the messages (newest on top). The retrieved messages are saved in the <code>messagesList</code> variable.</p>
-<pre class="prettyprint">
-prepareMessages: function(callback)
-{
- var self = this;
- try
- {
- this.smsService.messageStorage
- .findMessages(new tizen.AttributeFilter("type", "EXACTLY", "messaging.sms"),
- function(messages)
- {
- function compare(a, b)
- {
- if (a.timestamp > b.timestamp)
- {
- return -1;
- }
- else if (a.timestamp < b.timestamp)
- {
- return 1;
- }
- else
- {
- return 0;
- }
- }
- messages.sort(compare);
- self.messagesList = self.groupMessages(messages);
- app.ui.loadCallerList();
- callback();
- },
- }
-}
-</pre>
- </li>
- </ol>
-
- <h3 id="group" name="group">Grouping SMS Messages</h3>
- <p>Chatter messages are grouped according to their recipient key. Each recipient object consists of a message array and the latest message. The grouped object can be used for both main and chat screens of the Chatter application.</p>
- <p>The message grouping functionality is implemented in the <code>app.model.js</code> file.</p>
- <ol>
- <li><strong>Creating the Group</strong>
- <ol type="a">
- <li>
- <p>The <code>groupMessages()</code> method is used to filter the messages according to their status.</p>
-<pre class="prettyprint">
-groupMessages: function(messages)
-{
- var i, obj = {}, folderId;
- for (i in messages)
- {
- folderId = messages[i].folderId;
- if ((folderId !== null && folderId !== this.DRAFTS_FOLDER)
- || messages[i].messageStatus === 'DRAFT')
- {
- if (messages.hasOwnProperty(i))
- {
- obj = this.groupMessagesSingle(messages[i], obj);
- }
- }
- }
-
- return obj;
-}
-</pre>
- </li>
- <li>
- <p>The <code>groupMessagesSingle()</code> method prepares the conversation array for the recipient key.</p>
-<pre class="prettyprint">
-groupMessagesSingle: function(message, obj)
-{
- var key, j;
- if (message.from)
- {
- key = message.from;
- obj[key] = this.pushData(message, obj[key]);
- }
- else
- {
- for (j in message.to)
- {
- if (message.to.hasOwnProperty(j))
- {
- key = message.to[j];
- obj[key] = this.pushData(message, obj[key]);
- }
- }
- }
-
- return obj;
-}
-</pre>
- </li>
- </ol></li>
- <li><strong>Pushing Data to the Conversation Array</strong>
- <p>The <code>pushData()</code> method pushes the retrieved data into the recipient conversation array and sets the <code>lastMessage</code> object.</p>
-<pre class="prettyprint">
-pushData: function(message, obj)
-{
- obj = obj || this.getGroupObject();
- obj.messages.push(message);
- if (app.helpers.objectLength(obj.lastMessage) === 0)
- {
- obj.lastMessage = message;
- }
-
- return obj;
-}
-</pre>
- </li>
-
-<li><strong>Including the Latest Message</strong>
-<p>The <code>getGroupObject()</code> method is used to include the latest message in the array.</p>
-<pre class="prettyprint">
-getGroupObject: function()
-{
- return
- {
- messages: [], lastMessage: {},
- last:
- {
- body: {plainBody: null}, timestamp: new Date()
- }
- };
-}
-</pre>
- </li>
- </ol>
-
- <h2 id="Creating_Sending_Messages" name="Creating_Sending_Messages">Creating and Sending Messages</h2>
-
- <p>This section builds upon the elements described in <a href="messages_w.htm#Sending_Messages">Creating and Sending Messages</a>.</p>
-
-
- <h3 id="get_contact" name="get_contact">Getting the Contact List</h3>
- <ol>
- <li><strong>app.model.js Source File</strong>
- <ol type="a"><li><p>To get the contact list from the device memory, get the default address book using the <code>getDefaultAddressBook()</code> method.</p>
-<pre class="prettyprint">
-this.addressBook = tizen.contact.getDefaultAddressBook();
-</pre></li>
-<li>
-<p>The contacts are retrieved using the <code>find()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface of the Contact API, and grouped into a <code>contactsLoaded</code> object.
-</p>
-<pre class="prettyprint">
-loadContacts: function(callback)
-{
- var contactsFoundCB, errorCB;
-
- this.contactsLoaded = null;
-
- contactsFoundCB = function(contacts)
- {
- var i;
- this.contactsLoaded = [];
- for (i in contacts)
- {
- if (contacts.hasOwnProperty(i)
- && this.getNumberFromContact(contacts[i]))
- {
- contacts[i].primaryNumber =
- this.getNumberFromContact(contacts[i])
- this.contactsLoaded.push(contacts[i]);
- }
- }
- if (callback instanceof Function)
- {
- callback();
- }
- };
-
- this.addressBook.find(contactsFoundCB.bind(this), errorCB);
-}
-</pre>
-</li>
-</ol>
-</li></ol>
- <h3 id="prepare" name="prepare">Setting the Message Recipient</h3>
- <p>The message recipient selection functionality is implemented in the <code>app.js</code> file.</p>
- <ol>
- <li><strong>Displaying the Contacts</strong>
- <p>Before the user write the message text, they select the message recipient. The recipient list stored in the <code>contactsLoaded</code> object in the device memory is retrieved and displayed for the selection.</p>
-<pre class="prettyprint">
-showContactsLoaded: function()
-{
- var i, len, sortedContactList = [];
-
- if (this.model.contactsLoaded !== null && this.model.contactsLoaded.length)
- {
- len = this.model.contactsLoaded.length;
- for (i = 0; i < len; i += 1)
- {
- if (this.model.contactsLoaded[i].phoneNumbers.length)
- {
- sortedContactList.push(
- {
- caller: this.helpers.getCallerName(this.model.contactsLoaded[i],
- 'no name'),
- number: this.model.contactsLoaded[i].primaryNumber,
- contact: this.model.contactsLoaded[i]
- });
- }
- }
-
- sortedContactList.sort(function(a, b)
- {
- if (a.caller < b.caller)
- {
- return -1;
- }
- else if (a.caller > b.caller)
- {
- return 1;
- }
-
- return 0;
- });
- }
- this.ui.fillContactList(sortedContactList);
-}
-
-fillContactList: function(sortedContactList)
-{
- var i, ul = $("#contactSelect-list").empty(),
- len, listElement, self = this;
-
- len = sortedContactList.length;
-
- for (i = 0; i < len; i += 1)
- {
- listElement = this.templateManager.get('contactRow',
- {
- 'number': sortedContactList[i].number,
- 'callerName': sortedContactList[i].caller
- });
-
- if (app.helpers.validateNumberLength(sortedContactList[i].number))
- {
- ul.append(listElement);
- }
- }
-</pre>
-</li>
-<li><strong>Selecting the Contact</strong>
-<p>When the user clicks the wanted recipient, the touch event that sets the current list item as the recipient is triggered, and the chat screen is displayed.</p>
-<pre class="prettyprint">
- $('li.ui-li-has-multiline', ul).on('click', function(event)
- {
- app.ui.onCallerListElementTap(event, $(this));
- });
-
- ul.trigger('create');
- ul.listview('refresh');
-}
-</pre>
- </li>
- </ol>
-
- <h3 id="send" name="send">Sending the Message</h3>
- <ol>
- <li><strong>app.model.js Source File</strong>
- <p>After the user writes the message and taps the <strong>Send</strong> button, the <code>sendMessage()</code> method is called to send the message using the <code>smsService</code> object. The message type and recipient information are included as arguments for the method.</p>
-<pre class="prettyprint">
-sendMessage: function(number, text, callback, errorcallback)
-{
- var message;
- callback = callback || new Function();
- errorcallback = errorcallback || new Function();
- message = new tizen.Message("messaging.sms", {plainBody: text, to: [number]});
- try
- {
- this.smsService.sendMessage(message, callback, function(e)
- {
- /* Error handling */
- });
- }
-},
-</pre>
- </li>
-
- </ol>
-
- <h2 id="Managing_Message_Status" name="Managing_Message_Status">Managing Message Status Changes</h2>
-
- <p>This section builds upon the elements described in <a href="messages_w.htm#Receiving_Notifications">
-Receiving Notifications on Message Storage Changes</a>.</p>
-
- <h3 id="get_message" name="get_message">Getting the Message Status</h3>
- <ol>
- <li><strong>app.model.js Source File</strong>
- <p>An event listener is added to detect whether messages have been changed, added, or removed using the <code>addMessagesChangeListener()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface. When messages have been added or removed, the <code>prepareMessages()</code> method is called to refresh the message list.</p>
-<pre class="prettyprint">
-messagesChangeListener: function()
-{
- var self = this, config, messageChangeCallback =
- {
- messagesupdated: function(messages)
- {
- if (messages[0].messageStatus !== 'SENDING')
- {
- app.ui.changeMessageStatus(messages[0]);
- }
- },
- messagesadded: function(messages)
- {
- self.prepareMessages(app.ui.showMessageChat);
- },
- messagesremoved: function()
- {
- self.prepareMessages(app.ui.showMessageChat);
- }
- };
- this.smsService.messageStorage.addMessagesChangeListener(messageChangeCallback);
-}
-</pre></li>
-</ol>
-
- <h3 id="change" name="change">Displaying Updated Messages</h3>
- <ol>
- <li><strong>app.ui.js Source File</strong>
- <p>When the message status has changed, the <code>changeMessageStatus()</code>method is called to update the message view.</p>
-<pre class="prettyprint">
-changeMessageStatus: function(message, loop)
-{
- var warning = $('#' + message.id + ' .warning'),
- classes, i, self = this;
- loop = loop + 1 || 0;
- if (warning.length === 1)
- {
- classes = warning.attr('class').split(' ');
- for (i in classes)
- {
- if (classes.hasOwnProperty(i))
- {
- if (/status([A-Z]*)/.test(classes[i]))
- {
- warning.removeClass(classes[i]);
- }
- }
- }
- warning.addClass('status' + message.messageStatus);
- }
- else if (loop < 3)
- {
- setTimeout(function()
- {
- self.changeMessageStatus(message, loop)
- }, 1000);
- }
-}
-</pre>
- </li>
- </ol>
-
-<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>
\ No newline at end of file
<p>The Calendar API uses the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html#TZDate">TZDate</a> object of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html">Time</a> API and not the standard JavaScript <code>Date</code> object to handle difficult issues related to the time zone, because the <code>TZDate</code> object handles exact time and provides various utility methods.</p>
-<p>For a practical example of managing calendar events in your application, see the <a href="task_eventmanager_w.htm">Event Manager</a> sample task.</p>
-
<h2 id="prerequisites">Prerequisites</h2>
<p>To use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html">Calendar</a> API, the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<p>You can register event listeners to <a href="#Monitoring_Call_History">monitor changes in the call history</a> using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistoryChangeCallback">CallHistoryChangeCallback</a> listener interface.</p> </li>
</ul>
-<p>For a practical example of managing call logs in your application, see the <a href="task_calllog_w.htm">Call Log</a> sample task.</p>
-
<h2 id="prerequisites">Prerequisites</h2>
<p>To use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html">Call History</a> API, the application has to request permission by adding the following privileges to the <code>config.xml</code> file:</p>
<pre class="prettyprint">
+++ /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>Task: Call Log</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_optional.png"/></p>
- </div>
-
- <div id="toc_border"><div id="toc">
- <p class="toc-title">Dependencies</p>
- <ul class="toc">
- <li>Tizen 2.4 and Higher for Mobile</li>
- </ul>
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#Defining">Defining the Application Layout</a></li>
- <li><a href="#Initializing">Initializing the Application</a></li>
- <li><a href="#Browsing">Browsing a Call Log</a></li>
- <li><a href="#Managing">Managing Caller History</a></li>
- </ul>
- <p class="toc-title">Related Info</p>
- <ul class="toc">
- <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html">Call History API for Mobile Web</a></li>
- <li><a href="https://developer.tizen.org/development/sample/web/Social/Call_Log" target="_blank">Call Log Sample Description</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-
-
- <h1>Task: Call Log</h1>
- <p>This task, based on the CallLog sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html">Call History</a> API to manage call logs in your application. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Social/Call_Log" target="blank">Call Log</a>.</p>
- <p>This task consists of the following parts:</p>
- <ul>
- <li><a href="#Defining">Defining the Application Layout</a> defines how to create the application screens.</li>
- <li><a href="#Initializing">Initializing the Application</a> defines how to initialize the application.</li>
- <li><a href="#Browsing">Browsing a Call Log</a> defines how to retrieve a call history log.</li>
- <li><a href="#Managing">Managing Caller History</a> defines how to manage the call history of a specific caller.</li>
- </ul>
- <p>This sample is a fully functional application for displaying a detailed call history of the device or of a specific caller. The user can respond by calling or sending a message. Additionally, the user can delete a call history log.</p>
-
- <h2 id="Defining" name="Defining">Defining the Application Layout</h2>
- <p>The CallLog sample application layout uses the template manager based on the MVC (Model View Controller) architecture, and consists of 2 screens: the main screen displays the entire call history and the History for Caller screen displays the detailed call history of a specific caller.</p>
-
- <p>The following figure shows the main screens of the application.</p>
- <p align="center"><strong>Figure: CallLog screens</strong></p>
- <p align="center"><img alt="CallLog screens" src="../../images/calllog.png" /></p>
- <h3 id="temp" name="temp">Using the Template Manager</h3>
- <p>The template manager enables the HTML output generation to be divided into 3 parts.</p>
- <ol>
- <li><strong>app.ui.templateManager.js Source File</strong>
- <ol type="a">
- <li>
-<p>The template manager loads the template files into the cache.</p>
-<pre class="prettyprint">
-loadToCache: function TemplateManager_loadToCache(tplNames, onSuccess)
-{
- var self = this,
- cachedTemplates = 0,
- tplName,
- tplPath;
-
- if ($.isArray(tplNames))
- {
- $.each(tplNames, function(index, fileName)
- {
- if (self.cache[fileName] === undefined)
- {
- tplName = [fileName, app.config.get('templateExtension')].join('');
- tplPath = [app.config.get('templateDir'), tplName].join('/');
- $.ajax(
- {
- url: tplPath,
- cache: true,
- dataType: 'html',
- async: true,
- success: function(data)
- {
- cachedTemplates += 1;
- self.cache[fileName] = data;
- if (cachedTemplates >= tplNames.length
- && typeof onSuccess === 'function')
- {
- onSuccess();
- }
- },
- error: function(jqXHR, textStatus, errorThrown)
- {
- console.error('templateManagerError: ' + errorThrown);
- }
- });
- }
- else
- {
- cachedTemplates += 1;
- if (cachedTemplates >= tplNames.length
- && typeof onSuccess === 'function')
- {
- onSuccess();
- }
- }
- });
- }
-}
-</pre> </li>
- <li> <p>Next, the template manager returns the template HTML content from the cache.</p>
-<pre class="prettyprint">
-get: function TemplateManager_get(tplName, tplParams)
-{
- if (this.cache[tplName] !== undefined)
- {
- return this.getCompleted(this.cache[tplName], tplParams);
- }
-
- return '';
-}
-</pre> </li>
- <li><p>Finally, the template manager returns the completed template using the specified parameters.</p>
-<pre class="prettyprint">
-getCompleted: function TemplateManager_getCompleted(tplHtml, tplParams)
-{
- var tplParam, replaceRegExp;
-
- for (tplParam in tplParams)
- {
- if (tplParams.hasOwnProperty(tplParam))
- {
- replaceRegExp = new RegExp(['%', tplParam, '%'].join(''), 'g');
- tplHtml = tplHtml.replace(replaceRegExp, tplParams[tplParam]);
- }
- }
-
- return tplHtml;
-}
-</pre></li>
- </ol> </li>
- </ol>
-
- <h3 id="main" name="main">Defining the Main Screen</h3>
- <ol>
- <li><strong>callView.tpl Source File</strong>
- <ol type="a">
- <li> <p>The main screen of the application displays an aggregated call history list sorted by date. The header section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen.</p>
-<pre class="prettyprint lang-html">
-<div data-role="page" id="callView">
- <!--Header section-->
- <div data-role="header" id="page-header" data-position="fixed">
- <h1>CALL LOG</h1>
- </div>
-</pre></li>
- <li><p>The actual content section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>content</code>. The content section of the main screen contains a <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Listview.htm">list</a> component displaying the elements listed in the <code>templates/callItemRow.tpl</code> and <code>templates/dateRow.tpl</code> files. To display the search bar, the <code>data-filter</code> attribute is set to <code>true</code>.</p>
-<pre class="prettyprint lang-html">
- <!--Content section-->
- <div id="page-content-scroll">
- <div id="page-content">
- <ul data-role="listview" id="calllogList" data-filter="true"
- data-position="fixed" data-insert="true"></ul>
- </div>
- </div>
-</div>
-</pre></li>
- </ol> </li>
- <li><strong>dateRow.tpl Source File</strong>
-<p>The <code>dateRow.tpl</code> template file defines the date at which a call has been logged in the history.</p>
-<pre class="prettyprint lang-html">
-<li class="date">%date%</li>
-</pre></li>
- <li><strong>callItemRow.tpl Source File</strong>
- <p>The <code>callItemRow.tpl</code> template file defines the details of each call.</p>
-<pre class="prettyprint lang-html">
-<li data-filtertext="%name%" class="%cssClasses%">
- <div class="toRemove hidden"><input type="checkbox"/></div>
- <div class="numberOrName">%name%</div>
- <div class="iconStatus"></div>
- <div class="callTime">%callTime%</div>
-</li>
-</pre></li>
- </ol>
-
- <h2 id="Initializing" name="Browsing">Initializing the Application</h2>
- <ol>
- <li><strong>config.xml Source File</strong>
- <p>The required privileges are declared in the <code>config.xml</code> file. </p>
-<pre class="prettyprint">
-<!--Configuration file content-->
-<widget ...>
- <!--Other configuration details-->
- <tizen:privilege name="http://tizen.org/privilege/application.launch"/>
- <tizen:privilege name="http://tizen.org/privilege/callhistory.read"/>
- <tizen:privilege name="http://tizen.org/privilege/callhistory.write"/>
- <tizen:privilege name="http://tizen.org/privilege/contact.read"/>
-</widget>
-</pre></li>
- </ol>
-
- <h2 id="Browsing" name="Browsing">Browsing a Call Log</h2>
- <p>This section builds upon the elements described in <a href="call_history_w.htm#Searching_Call_History">Searching for Call History Items</a>.</p>
- <p>The call log retrieval functionality is implemented in the <code>app.model.js</code> file.</p>
- <ol>
- <li><strong>Retrieving the Complete Call History</strong>
- <ol type="a">
- <li><p>The <code>find()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface, placed in the <code>app.model.js</code> file, is used to retrieve the call history in the descending order by specifying the required parameters.</p>
-<pre class="prettyprint">
-getCallHistory: function Model_getCallHistory(onSuccess, onError)
-{
- tizen.callhistory.find(onSuccess, onError, null,
- new tizen.SortMode('startTime', 'DESC'));
-}
-</pre></li>
- <li><p>The <code>showCallHistory()</code> method, placed in the <code>app.js</code> file, calls the <code>getCallHistory()</code> method from <code>app.model.js</code> and shows the results of the call history retrieval on the screen.</p>
-<pre class="prettyprint">
-showCallHistory: function App_showCallHistory()
-{
- this.model.getCallHistory(this.ui.showCallHistory.bind(this.ui));
-}
-</pre></li></ol>
- </li>
- <li><strong>Retrieving the Call History for a Specific Caller</strong>
- <ol type="a"><li><p>To retrieve the call history for a specific caller, the phone number of the caller is specified as an additional filter parameter in the <code>find()</code> method.</p>
-<pre class="prettyprint">
-getCallHistoryForCaller: function Model_getCallHistoryForCaller(phoneNumber,
- onSuccess)
-{
- tizen.callhistory.find(onSuccess, null,
- new tizen.AttributeFilter('remoteParties.remoteParty',
- 'EXACTLY', phoneNumber),
- new tizen.SortMode('startTime', 'DESC'));
-}
-</pre></li>
- <li><p>The <code>showHistoryForCaller()</code> method calls the <code>getCallHistoryForCaller()</code> method and shows the results of the specific caller history retrieval on the screen.</p>
-<pre class="prettyprint">
-showHistoryForCaller: function App_showHistoryForCaller(phoneNumber)
-{
- this.lastViewedCaller = phoneNumber;
- this.model.getCallHistoryForCaller(phoneNumber,
- this.ui.showHistoryForCaller.bind(this.ui,
- phoneNumber));
-}
-</pre></li></ol>
- </li>
- </ol>
-
- <h2 id="Managing" name="Managing">Managing Caller History</h2>
- <p>This section builds upon the elements described in <a href="call_history_w.htm#Removing_Call_History">Removing Call History Items</a>.</p>
-
- <h3 id="listen" name="listen">Listening to Call History Changes</h3>
- <ol>
- <li><strong>app.model.js Source File</strong>
- <p>The <code>addChangeListener()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface is used to add an event listener for listening to change events in the call history.</p>
-<pre class="prettyprint">
-registerChangeListener: function Model_registerChangeListener(onSuccessCallback)
-{
- var callHistoryListener =
- {
- onadded: onSuccessCallback,
- onchanged: onSuccessCallback,
- onremoved: onSuccessCallback
- };
-
- tizen.callhistory.addChangeListener(callHistoryListener);
-}
-</pre></li>
-<li><strong>app.js Source File</strong>
-<p>The <code>registerChangeListener()</code> method is called during the application initialization to register the defined event handlers.</p>
-<pre class="prettyprint">
-init: function App_init()
-{
- this.config = new Config();
- this.model = new Model();
- this.model.registerChangeListener(this.updateCallLists.bind(this));
-
- this.ui = new Ui();
-
- return this;
-}
-</pre></li></ol>
- <h3 id="delete" name="delete">Deleting the Call History for a Caller</h3>
- <ol>
- <li><strong>app.model.js Source File</strong>
- <p>The <code>remove()</code> method of the <code>CallHistory</code> interface is used to delete a specific call log entry.</p>
-<pre class="prettyprint">
-deleteLog: function Model_deleteLog(entry)
-{
- try
- {
- tizen.callhistory.remove(entry);
- }
-}
-</pre></li>
- </ol>
- <h3 id="respond" name="respond">Responding to a Call Log Entry</h3>
- <p>The call log entry response functionality is implemented in the <code>app.js</code> file.</p>
- <ol>
- <li><strong>Calling</strong>
- <p>The <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">ApplicationControl</a> interface of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application</a> API is used to <a href="../app_management/app_controls_w.htm">launch other applications</a>. To respond to the call log by calling, specify the <code>http://tizen.org/appcontrol/operation/dial</code> operation and the contact number as parameters.</p>
-<pre class="prettyprint">
-makeCall: function App_makeCall(phoneNumber)
-{
- var self = this, appControl =
- new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/call',
- 'tel:' + phoneNumber);
-
- tizen.application.launchAppControl(appControl, null, function() {}, function(e)
- {
- /* Error handling */
- },
- {
- onsuccess: function() {},
- onfailure: function(er)
- {
- /* Error handling */
- }
- }
-},
-</pre></li>
- <li><strong>Sending a Message</strong>
- <p>To respond to the call log by sending a message, specify the <code>http://tizen.org/appcontrol/operation/compose</code> operation and the contact number as parameters.</p>
-<pre class="prettyprint">
-sendSms: function App_sendSms(phoneNumber)
-{
- var self = this, appControl =
- new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/compose',
- 'sms:' + phoneNumber);
-
- tizen.application.launchAppControl(appControl, null, function() {}, function(e)
- {
- /* Error handling */
- },
- {
- onsuccess: function() {},
- onfailure: function(er)
- {
- /* Error handling */
- }
- });
-}
-</pre></li>
- </ol>
-
-
-
-<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>
\ No newline at end of file
+++ /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>Task: Event Manager</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"/></p>
- </div>
-
- <div id="toc_border"><div id="toc">
- <p class="toc-title">Dependencies</p>
- <ul class="toc">
- <li>Tizen 2.4 and Higher for Mobile</li>
- </ul>
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#Defining">Defining the Application Layout</a></li>
- <li><a href="#Initializing">Initializing the Application</a></li>
- <li><a href="#Managing">Managing Calendar Events</a></li>
- <li><a href="#Filtering">Filtering Calendar Events</a></li>
- </ul>
- <p class="toc-title">Related Info</p>
- <ul class="toc">
- <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html">Calendar API for Mobile Web</a></li>
- <li><a href="https://developer.tizen.org/development/sample/web/Social/Event_Manager" target="_blank">Event Manager Sample Description</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-
-
- <h1>Task: Event Manager</h1>
- <p>This task, based on the EventManager sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html">Calendar</a> API to manage calendar events. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Social/Event_Manager" target="blank">Event Manager</a>.</p>
-
- <p>This task consists of the following parts:</p>
- <ul>
- <li><a href="#Defining">Defining the Application Layout</a> defines how to create the application screens.</li>
- <li><a href="#Initializing">Initializing the Application</a> defines how to initialize the application.</li>
- <li><a href="#Managing">Managing Calendar Events</a> defines how to add, modify, delete, and set alarms for calendar events.</li>
- <li><a href="#Filtering">Filtering Calendar Events</a> defines how to retrieve specific events.</li>
- </ul>
- <p>This sample is a fully functional application for managing the device calendar. The user can add, modify, retrieve, and remove events, set the event type and duration, and set alarms for the events.</p>
-
- <h2 id="Defining" name="Defining">Defining the Application Layout</h2>
- <p>The EventManager sample application layout uses the template manager based on the MVC (Model View Controller) architecture, and consists of 3 screens: the main screen displays the events list, the New event screen allows adding and editing events, and the Set alarm screen enables setting an alarm for an event.</p>
-
- <p>The following figure shows the main screens of the application.</p>
- <p align="center"><strong>Figure: EventManager screens</strong></p>
- <p align="center"><img alt="EventManager screens" src="../../images/eventmanager.png" /></p>
- <h3 id="temp" name="temp">Using the Template Manager</h3>
- <p>The template manager enables the HTML output generation to be divided into 3 parts.</p>
- <ol>
- <li><strong>app.ui.templateManager.js Source File</strong>
- <ol type="a">
- <li>
-<p>The template manager loads the template files into the cache.</p>
-<pre class="prettyprint">
-loadToCache: function TemplateManager_loadToCache(tplNames, onSuccess)
-{
- var self = this,
- cachedTemplates = 0,
- tplName,
- tplPath;
-
- if ($.isArray(tplNames))
- {
- $.each(tplNames, function(index, fileName)
- {
- if (self.cache[fileName] === undefined)
- {
- tplName = [fileName, app.config.get('templateExtension')].join('');
- tplPath = [app.config.get('templateDir'), tplName].join('/');
- $.ajax(
- {
- url: tplPath,
- cache: true,
- dataType: 'html',
- async: true,
- success: function(data)
- {
- cachedTemplates += 1;
- self.cache[fileName] = data;
- if (cachedTemplates >= tplNames.length
- && typeof onSuccess === 'function')
- {
- onSuccess();
- }
- },
- error: function(jqXHR, textStatus, errorThrown)
- {
- /* Error handling */
- }
- });
- }
- else
- {
- cachedTemplates += 1;
- if (cachedTemplates >= tplNames.length
- && typeof onSuccess === 'function')
- {
- onSuccess();
- }
- }
- });
- }
-}
-</pre></li>
- <li> <p>Next, the template manager returns the template HTML content from the cache.</p>
-<pre class="prettyprint">
-get: function TemplateManager_get(tplName, tplParams)
-{
- if (this.cache[tplName] !== undefined)
- {
- return this.getCompleted(this.cache[tplName], tplParams);
- }
-
- return '';
-}
-</pre></li>
- <li><p>Finally, the template manager returns the completed template using the specified parameters.</p>
-<pre class="prettyprint">
-getCompleted: function TemplateManager_getCompleted(tplHtml, tplParams)
-{
- var tplParam, replaceRegExp;
-
- for (tplParam in tplParams)
- {
- if (tplParams.hasOwnProperty(tplParam))
- {
- replaceRegExp = new RegExp(['%', tplParam, '%'].join(''), 'g');
- tplHtml = tplHtml.replace(replaceRegExp, tplParams[tplParam]);
- }
- }
-
- return tplHtml;
-}
-</pre></li>
- </ol> </li>
- </ol>
-
- <h3 id="main" name="main">Defining the Main Screen</h3>
- <ol>
- <li><strong>templates/home.tpl Source File</strong>
- <ol type="a"><li>
-<p>The main screen displays a list of calendar events. The header section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen.</p>
-
-<pre class="prettyprint lang-html">
-<div data-role="page" id="home" data-add-back-btn="false">
- <!--Header section-->
- <div data-role="header">
- <h1>Event manager</h1>
- </div>
-</pre></li>
-<li><p>The actual content section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>content</code>. The content section of the main screen contains a <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Listview.htm">list</a> component displaying the elements as defined in the <code>templates/event.tpl</code> and <code>templates/all_day_event.tpl</code> files.</p>
-<pre class="prettyprint lang-html">
- <!--Content section-->
- <div data-role="content">
- <div>
- <center>
- <input type="date" id="homeDateFilter"/>
- </center>
- </div>
- <div id="events_list">
- <ul data-role="listview" data-inset="true"></ul>
- </div>
- </div>
-</pre></li>
-<li><p>The footer section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>footer</code>. The footer section contains a tab bar with buttons for adding an event and closing the application.</p>
-<pre class="prettyprint lang-html">
- <!--Footer section-->
- <div data-role="footer" data-position="fixed">
- <div data-role="tabbar" data-style="tabbar">
- <ul>
- <li><a href="#new_event" id="newEventBtn">Add New Event</a></li>
- <li><a href="javascript:void(0)" id="exit_btn">Exit</a></li>
- </ul>
- </div>
- </div>
-</div>
-</pre></li></ol>
-</li>
-<li><strong>templates/event.tpl Source File</strong>
-<p>Each event is displayed in the list showing a summary text, and a start and end date, and 2 <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Button.htm">buttons</a>.</p>
-<pre class="prettyprint lang-html">
-<li class="event" data-eventid="%uid%">
- <div class="ui-li-aside ui-li-desc">
- <span class="description">%summary|escape%</span><br/>
- <div class="green_dot"></div><small>%startDateTime%</small><br/>
- <div class="red_dot"></div><small>%endDateTime%</small><br/>
- </div>
- <div class="editEvent">
- <form>
- <input type="button" class="edit_event_btn" data-inline="true" value="edit"/>
- </form>
- </div>
- <div class="deleteEvent">
- <form>
- <input type="button" class="remove_event_btn"
- data-inline="true" value="delete"/>
- </form>
- </div>
-</li>
-</pre>
-</li></ol>
- <h3 id="new" name="new">Defining the New Event Screen</h3>
- <ol>
-<li><strong>templates/new_event.tpl Source File</strong>
-<p>The New event screen contains UI components for setting the event title, type, start and end date, and an alarm for the event. The footer section of the screen contains a tab bar with buttons for saving the event information, or deleting it.</p>
-<pre class="prettyprint lang-html">
-<!--New event screen layout-->
-<div data-role="page" id="new_event">
-
- <!--Header section-->
- <div data-role="header" data-position="fixed">
- <h1>New event</h1>
- </div>
-
- <!--Content section-->
- <div data-role="content">
- <fieldset>
- <label for="title">Title</label>
- <div><input type="text" name="summary" id="title" maxlength="9"/></div>
-
- <label for="dataAllDay">Type</label>
- <div id="dataAllDay" data-role="dataAllDay">
- <span class="allDaySwitcher">
- <select id="allDay" data-role="slider">
- <option value="1">All day</option>
- <option value="0">Period</option>
- </select>
- </div>
-
- <label for="demo-date-1">Start</label>
- <div id="date-1">
- <span class="ui-li-text-main">
- <input type="datetime" name="startDate" id="demo-date-1"
- data-format="MMM dd yyyy HH:mm"/>
- </span>
- </div>
-
- <label for="demo-date-2">End</label>
- <div id="date-2">
- <span class="ui-li-text-main">
- <input type="datetime" name="endDate" id="demo-date-2"
- data-format="MMM dd yyyy HH:mm"/>
- </span>
- </div>
-
- <label for="alarm">Alarm</label>
- <div>
- <span id="alarm">0 minutes before</span>
- <a id="add_alarm" data-inline="true" data-role="button">change</a>
- </div>
-
- </fieldset>
- </div>
-
- <!--Footer section-->
- <div data-role="footer" data-position="fixed">
- <div data-role="tabbar" data-style="tabbar">
- <ul>
- <li><a id="add-event-cancel-btn" data-inline="true">Cancel</a></li>
- <li><a id="add-event-btn" data-inline="true">OK</a></li>
- </ul>
- </div>
- </div>
-</div>
-</pre>
-</li></ol>
- <h3 id="set" name="set">Defining the Set Alarm Screen</h3>
- <ol>
-<li><strong>templates/alarm.tpl Source File</strong>
-<p>The Set alarm screen contains radio buttons for defining the time of the alarm. The footer section of the screen contains a button for saving the alarm setting.</p>
-<pre class="prettyprint lang-html">
-<!--Set alarm screen layout-->
-<div data-role="page" id="new_alarm" data-add-back-btn="false">
-
- <!--Header section-->
- <div data-role="header" data-position="fixed">
- <h1>Set alarm</h1>
- </div>
-
- <!--Content section-->
- <div data-role="content">
- <input type="radio" name="radio-choice" id="radio-choice-0" value="-1"/>
- <label for="radio-choice-0">(Off)</label>
-
- <input type="radio" name="radio-choice" id="radio-choice-1" value="0" checked />
- <label for="radio-choice-1">On time</label>
-
- <input type="radio" name="radio-choice" id="radio-choice-2" value="5"/>
- <label for="radio-choice-2">5 minutes before</label>
-
- <input type="radio" name="radio-choice" id="radio-choice-3" value="30"/>
- <label for="radio-choice-3">30 minutes before</label>
-
- <input type="radio" name="radio-choice" id="radio-choice-4" value="60"/>
- <label for="radio-choice-4">1 hour before</label>
-
- <input type="radio" class="customDuration" name="radio-choice" id="yes_1"
- value="Yes"/>
- <label for="yes_1">custom time:</label>
- <span class="customDetails">
- <input placeholder="00" class="customDuration" type="number"
- name="radio-choice" min="0" max="99" id="customDuration"/>
- minute(s) before
- </span>
- </div>
-
- <!--Footer section-->
- <div data-role="footer" data-position ="fixed">
- <div data-role="tabbar" data-style="tabbar">
- <ul>
- <li><a href="#new_event" id="add-alarm">Save</a></li>
- </ul>
- </div>
- </div>
-</div>
-</pre>
-</li>
- </ol>
-
- <h2 id="Initializing" name="Initializing">Initializing the Application</h2>
- <ol>
- <li><strong>config.xml Source File</strong>
- <p>The required privileges are declared in the <code>config.xml</code> file. </p>
-<pre class="prettyprint">
-<!--Configuration file content-->
-<widget ...>
- <!--Other configuration details-->
- <tizen:privilege name="http://tizen.org/privilege/application.launch"/>
- <tizen:privilege name="http://tizen.org/privilege/calendar.read"/>
- <tizen:privilege name="http://tizen.org/privilege/calendar.write"/>
- <tizen:privilege name="http://tizen.org/privilege/time"/>
-</widget>
-</pre></li>
- </ol>
-
- <h2 id="Managing" name="Managing">Managing Calendar Events</h2>
- <p>This section builds upon the elements described in <a href="calendar_w.htm#Adding_Events">Adding Events to a Calendar</a> and <a href="calendar_w.htm#Managing_Event">Managing a Single Calendar Event</a>.</p>
- <p>The calendar event management functionality is implemented in the <code>js/app.model.js</code> file.</p>
- <ol>
- <li><strong>Accessing Events</strong>
-<p>To access events, retrieve the default calendar using the <code>getDefaultCalendar()</code> method.</p>
-<pre class="prettyprint">
-getCalendar: function Model_getCalendar()
-{
- return tizen.calendar.getDefaultCalendar("EVENT");
-},
-</pre>
-</li>
-<li><strong>Creating a New Calendar Event</strong>
-<p>Use the <code>addEventToDefaultCalendar()</code> method to add a new event to the calendar.</p>
-<pre class="prettyprint">
-addEventToDefaultCalendar: function Model_addEventToDefaultCalendar(calendarItemInit)
-{
- var calendar = null, event = null;
- calendar = this.getCalendar();
- event = new tizen.CalendarEvent(calendarItemInit);
- .add(event);
-},
-</pre>
-</li>
-<li><strong>Modifying a Calendar Event</strong>
-<p>Use the <code>get()</code> method to get the calendar, and use the <code>update()</code> method to save the changed values to the calendar.</p>
-<pre class="prettyprint">
-updateEvent: function Model_updateEvent(event_id, new_values)
-{
- var myCalendar = this.getCalendar(), new_event, prop,
- event = myCalendar.get(new tizen.CalendarEventId(event_id));
- for (prop in new_values)
- {
- if (new_values.hasOwnProperty(prop))
- {
- event[prop] = new_values[prop]; /* Copy the new values into the event object */
- }
- }
- myCalendar.update(event, false);
-},
-</pre>
-</li>
-
-<li><strong>Deleting Calendar Event</strong>
-<p>Use the <code>remove()</code> method to delete an event, and update the event list using the <code>loadEvents()</code> method.</p>
-<pre class="prettyprint">
-deleteEvent: function Model_deleteEvent(event_id)
-{
- var myCalendar = this.getCalendar();
- myCalendar.remove(new tizen.CalendarEventId(event_id));
- this.app.loadEvents();
-},
-</pre>
-</li>
-</ol>
-
-<h2 id="Filtering" name="Filtering">Filtering Calendar Events</h2>
- <p>The calendar event filtering functionality is implemented in the <code>js/app.model.js</code> file.</p>
- <ol>
- <li><strong>Creating a Filter</strong>
-<p>Use the <code>getStartDateFilter()</code> method to create a filter for a given date. The filter includes events starting on the specified date or before, and ending on the specified date or later. It also includes all-day events for the specified date.</p>
-
-<pre class="prettyprint">
-getStartDateFilter: function Model_getStartDateFilter(date)
-{
- var today = new tizen.TZDate(date.getFullYear(), date.getMonth(), date.getDate()),
- tomorrow =
- new tizen.TZDate(date.getFullYear(), date.getMonth(), date.getDate()+1);
-
- return new tizen.CompositeFilter("UNION",
- [
- new tizen.CompositeFilter("INTERSECTION",
- [
- new tizen.AttributeFilter("isAllDay", "EXACTLY", false),
- new tizen.AttributeRangeFilter("startDate", null, tomorrow),
- new tizen.AttributeRangeFilter("endDate", today, null)
- ]),
- new tizen.CompositeFilter("INTERSECTION",
- [
- new tizen.AttributeFilter("isAllDay", "EXACTLY", true),
- new tizen.AttributeRangeFilter("startDate", tomorrow, tomorrow),
- ])
- ]);
-},
-</pre>
-</li>
-<li><strong>Retrieving Filtered Events</strong>
-<p>Use the <code>find()</code> method with the composite filter created above to retrieve filtered events from the calendar.</p>
-<pre class="prettyprint">
-getEventsFromDefaultCalendar: function Model_getEventsFromDefaultCalendar(date,
- onSuccess,
- onError)
-{
- var calendar = null, filter = null;
- calendar = this.getCalendar();
- filter = this.getStartDateFilter(app.homeDateFilter);
- calendar.find(onSuccess, onError, filter);
-},
-</pre>
-</li>
-</ol>
-
-
-
-<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>
\ No newline at end of file
<p>You can <a href="#hw-information">retrieve information about the technical limits of the sensor</a>.</p></li>
</ul>
-<p>For a practical example of simulating ball behavior to create a game, see the <a href="task_sensorball_w.htm">Sensor Ball</a> mobile sample task.</p>
-
<h2 id="manage" name="manage">Managing Sensors</h2>
<p>Learning how to start, read and stop a sensor is a basic sensor management skill:</p>
+++ /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>Task: Sensor Ball</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_optional.png"/></p>
- </div>
-
- <div id="toc_border"><div id="toc">
- <p class="toc-title">Dependencies</p>
- <ul class="toc">
- <li>Tizen 2.4 and Higher for Mobile</li>
- </ul>
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#layout">Defining the Application Layout</a></li>
- <li><a href="#configure">Initializing the Application</a></li>
- <li><a href="#data">Managing the Gyro Sensor Data</a></li>
- </ul>
- <p class="toc-title">Related Info</p>
- <ul class="toc">
- <li><a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sensor.html">Sensor API</a></li>
- <li><a href="https://developer.tizen.org/development/sample/web/Sensor/Sensor_Ball" target="_blank">Sensor Ball (Mobile) Sample Description</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Task: Sensor Ball</h1>
- <p>This task, based on the SensorBall sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sensor.html">Sensor</a> API to read and process gyro sensor data. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Sensor/Sensor_Ball" target="blank">Sensor Ball</a>.</p>
- <p>This task consists of the following parts:</p>
- <ul>
- <li><a href="#layout">Defining the Application Layout</a> defines how to create the application screens.</li>
- <li><a href="#configure">Initializing the Application</a> defines how to initialize the application.</li>
- <li><a href="#data">Managing the Gyro Sensor Data</a> defines how to handle the sensor data.</li>
- </ul>
-
-<p>This sample is a fully functional application which uses the gyro sensor to create a game where the game elements move on the screen based on the sensor data.</p>
-
- <h2 id="layout" name="layout">Defining the Application Layout</h2>
- <p>The SensorBall sample application layout contains only 1 screen: the main screen that displays the game.</p>
-
- <p>The following figure shows the main screen of the application.</p>
- <p align="center"><strong>Figure: SensorBall screen</strong></p>
- <p align="center"><img alt="SensorBall screen" src="../../images/sensorball.png" /></p>
-
-<h3 id="main" name="main">Defining the Main Screen</h3>
- <ol>
- <li><strong>index.html Source File</strong>
- <ol type="a"><li> <p>The main screen displays the game screen. The header section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>header</code>. The header section determines the title of the screen.</p>
-<pre class="prettyprint">
-<body>
- <div data-role="page" id="mainPage">
- <!--Header section-->
- <div data-role="header" data-position="fixed">
- <h1>Sensor ball</h1>
- </div>
-</pre></li>
-<li> <p>The actual content section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>content</code>. The content section of the main screen contains a background image (defined in the <code>style.css</code> file based on the <code>background</code> class), and the image of the game ball.
-</p>
-<pre class="prettyprint lang-html">
- <!--Content section-->
- <div data-role="content" class="background background1" data-scroll="none">
- <div id="main">
- <img id="image1" class="ball" src="./images/ball1.png"/>
- </div>
- </div>
-</pre></li>
-<li> <p>The footer section of the screen is defined within a <code><div></code> element whose <code>data-role</code> attribute is set to <code>footer</code>. The footer section contains a tab bar with buttons for switching between the animation modes of the game.</p>
-<pre class="prettyprint lang-html">
- <!--Footer section-->
- <div data-role="footer" data-position="fixed">
- <div data-role="tabbar" data-style="toolbar" id="footerControls">
- <ul>
- <li><a href="#" id="btnBall" class="ui-btn-active">BALL</a></li>
- <li><a href="#" id="btnSky">SKY</a></li>
- <li><a href="#" id="btnSpace">SPACE</a></li>
- </ul>
- </div>
- </div>
- </div>
-</body>
-</pre></li>
-</ol>
- </li>
-<li><strong>css/style.css Source File</strong>
-<p>The <code>
-style.css</code> file defines the background image for each animation mode and the size and location of the game ball.</p>
-<pre class="prettyprint">
-.background1
-{
- background-image: url('../images/background1.jpg');
-}
-
-.background2
-{
- background-image: url('../images/background2.jpg');
-}
-
-.background3
-{
- background-image: url('../images/background3.jpg');
- background-color: #000;
- overflow: hidden;
-}
-
-.ball
-{
- position: absolute;
- left: 0px;
- top: 0px;
- width: 86px;
- height: 86px;
-}
-</pre>
-</li>
- </ol>
-
- <h2 id="configure" name="configure">Initializing the Application</h2>
- <ol>
- <li><strong>config.xml Source File</strong>
- <p>The required privileges are declared in the <code>config.xml</code> file. </p>
-<pre class="prettyprint">
-<!--Configuration file content-->
-<widget ...>
- <!--Other configuration details-->
- <tizen:privilege name="http://tizen.org/privilege/application.launch"/>
-</widget>
-</pre>
- </li>
- </ol>
-
- <h2 id="data" name="data">Managing the Gyro Sensor Data</h2>
- <p>This section builds upon the elements described in <a href="../w3c/device/device_orientation_w.htm#accelerate">Detecting Device Acceleration</a>.</p>
-
-
- <h3 id="appobjectcreate" name="appobjectcreate">Managing the Application and Window Objects</h3>
- <p>The object management functionality is implemented in the <code>main.js</code> file.</p>
- <ol>
- <li><strong>Creating the Application Object</strong>
-<p>The application object is initialized when the document <code>ready()</code> event is fired. All the application events are bound during the initialization.</p>
-
-<pre class="prettyprint">
-$(document).ready(function()
-{
- "use strict";
- var img,
- contentHeight = screen.availHeight - $('div[data-role="header"]').outerHeight()
- - $('div[data-role="footer"]').outerHeight();
-
- $('div[data-role="content"]').css('height', contentHeight - 33);
- app.gameWidth = screen.availWidth;
- app.ballWidth = parseInt($('.ball').css('width'), 10);
- app.ballHeight = parseInt($('.ball').css('height'), 10);
-
- window.addEventListener('devicemotion', app.saveSensorData.bind(app), false);
-
- app.fun();
-
- /* Hardware Back key event */
- $(window).on('tizenhwkey', function(e)
- {
- if (e.originalEvent.keyName === "back")
- {
- tizen.application.getCurrentApplication().exit();
- }
- });
-
- /* Button events */
- $('#btnBall').bind('click', function(event)
- {
- $('#sun').remove();
- app.startBall();
- });
-
- $('#btnSky').bind('click', function(event)
- {
- $('#sun').remove();
- app.startSky();
- });
-
- $('#btnSpace').bind('click', function(event)
- {
- $('#sun').remove();
- app.startSpace();
- });
-
- /* Screen show event */
- $('#mainPage').on('pageshow', function()
- {
- app.startBall();
- });
-
- document.addEventListener('webkitvisibilitychange', function(event)
- {
- if (document.webkitVisibilityState === 'visible')
- {
- app.fun();
- }
- });
-
- /* Preload backgrounds */
- img = $('<img>').hide();
- img.attr('src', 'images/background1.png');
-});
-</pre></li>
-<li><strong>Resizing the Window</strong>
-<p>The application handles the window resize events and sets the display accordingly.</p>
-<pre class="prettyprint">
-$(window).resize(function()
- {
- 'use strict';
- app.gameWidth = screen.availWidth;
- app.gameHeight = $('.background').outerHeight();
- });
-</pre></li>
-</ol>
-
-
-<h3 id="access" name="access">Accessing Gyro Sensor Data</h3>
-
- <ol>
- <li><strong>main.js Source File</strong>
- <ol type="a">
- <li>The <code>
-devicemotion</code> event listener calls the <code>
-saveSensorData()</code> method each time the event takes place. The event allows the application to access information about sensor data changes.
-<pre class="prettyprint">
-window.addEventListener('devicemotion', app.saveSensorData.bind(app), false);
-</pre></li>
-<li>The <code>
-saveSensorData()</code> methods stores the event (containing the gyro sensor data) for later processing.
-<pre class="prettyprint">
-saveSensorData: function saveSensorData(event)
-{
- "use strict";
- this.event = event;
-}
-</pre></li>
-<li>The stored event is used by the <code>
-ballEvents()</code> and <code>
-earthEvents()</code> methods, which control the game ball and the animation of the different game modes. These methods are called repeatedly with the <code>
-setTimeout()</code> method.</li></ol></li></ol>
-
-<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>
\ No newline at end of file
<li>Detecting acceleration
<p>You can <a href="#accelerate">use rotation speed (acceleration in the device) information</a>, including gravity, with the <a href="http://www.w3.org/TR/2011/WD-orientation-event-20111201/#devicemotion" target="_blank">devicemotion</a> event. You can move game characters or elements, and capture acceleration values to add certain events.</p></li>
</ul>
-<p>For a practical example of using the magnetic sensor data to orient a compass needle, see the <a href="task_compass_w.htm">Compass</a> mobile sample task.</p>
<h2 id="rotate" name="rotate">Detecting Device Rotation</h2>
+++ /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>Task: Compass</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"/></p>
- </div>
-
- <div id="toc_border"><div id="toc">
- <p class="toc-title">Dependencies</p>
- <ul class="toc">
- <li>Tizen 2.4 and Higher for Mobile</li>
- </ul>
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#layout">Defining the Application Layout</a></li>
- <li><a href="#configure">Initializing the Application</a></li>
- <li><a href="#needle">Managing the Needle Movement</a></li>
- </ul>
- <p class="toc-title">Related Info</p>
- <ul class="toc">
- <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#orientation">DeviceOrientation Event Specification API for Mobile Web</a></li>
- <li><a href="https://developer.tizen.org/development/sample/web/Sensor/Compass" target="_blank">Compass Sample Description</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Task: Compass</h1>
- <p>This task, based on the Compass sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#orientation">DeviceOrientation Event Specification</a> API to create a compass-functionality for your application. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Sensor/Compass" target="blank">Compass</a>.</p>
- <p>This task consists of the following parts:</p>
- <ul>
- <li><a href="#layout">Defining the Application Layout</a> defines how to create the application screens.</li>
- <li><a href="#configure">Initializing the Application</a> defines how to initialize the application.</li>
- <li><a href="#needle">Managing the Needle Movement</a> defines how to interpret the device orientation data and reflect it in the compass needle.</li>
- </ul>
-
- <p>This sample is a fully functional application for gathering and using the orientation data from the device motion sensor.</p>
-
- <h2 id="layout" name="layout">Defining the Application Layout</h2>
- <p>The Compass sample application layout contains only 1 screen: the main screen that displays the compass and its current direction. The sample does not use the Web UI framework.</p>
-
- <p>The following figure shows the main screen of the application.</p>
- <p align="center"><strong>Figure: Compass screen</strong></p>
- <p align="center"><img alt="Compass screen" src="../../../images/compass.png" /></p>
-
-<h3 id="main" name="main">Defining the Main Screen</h3>
- <ol>
- <li><strong>index.html Source File</strong>
- <p>The main screen of the application displays the compass: the rotation section is a graphical representation of the compass, the shadow section shows certain graphical effects, and the direction and angle sections define the current angle to the north and the cardinal direction the device is currently facing.</p>
-<pre class="prettyprint">
-<div id="application">
- <div id="rotation"></div>
- <div id="shadow"></div>
- <div id="direction"></div>
- <div id="angle"></div>
-</div>
-</pre></li>
- </ol>
-
- <h2 id="configure" name="configure">Initializing the Application</h2>
- <ol>
- <li><strong>main.js Source File</strong>
- <ol type="a">
- <li><p>The application uses the <code>ready</code> event to determine when it has been initialized, and to call the <code>init()</code> method.</p>
-<pre class="prettyprint">
-$(document).ready(init);
-</pre></li>
-
- <li><p>The <code>init()</code> method start the motion sensor by registering a listener for capturing orientation change events.</p>
-<pre class="prettyprint">
-function init()
-{
- "use strict";
- hdExitButton();
- startSensor();
-}
-
-function startSensor()
-{
- "use strict";
- window.addEventListener("deviceorientation", onDeviceOrientation, false);
-}
-</pre></li></ol></li></ol>
-
-<h2 id="needle" name="needle">Managing the Needle Movement</h2>
- <p>The orientation data interpretation and needle movement functionality is implemented in the <code>main.js</code> file.</p>
- <ol>
-<li><strong>Determining the Cardinal Direction</strong>
-<ol type="a">
-<li>The <code>onDeviceOrientation()</code> event handler is called each time the device orientation changes. The new orientation details are received in the <code>dataEvent</code> parameter, and the <code>alpha</code> attribute is used to determine the current cardinal direction to be displayed at the top of the compass screen.
-<p>The <code>alpha</code> attribute values range from 0 to 360, where 0 means the cardinal direction points to north, 90 to west, 180 to south, 270 to east.</p>
-<pre class="prettyprint">
-function onDeviceOrientation(dataEvent)
-{
- "use strict";
- var angle = dataEvent.alpha,
-}
-</pre></li>
-
-
-<li><p>The <code>alpha</code> attribute value range is divided into 8 parts to identify also the intercardinal values of northwest, southwest, southeast, and northeast.</p>
-<p>This means that each cardinal or intercardinal direction is represented by 45 degrees (for example, north is 338 – 22 and northwest is 292 – 337). </p>
-
-
-<pre class="prettyprint">
-if (angle < 68 || angle > 292)
-{
- text += 'NORTH';
-}
-else if (angle > 112 && angle < 248)
-{
- text += 'SOUTH';,
-}
-
-if (angle > 22 && angle < 158)
-{
- text += 'EAST';
-}
-else if (angle > 202 && angle < 338)
-{
- text += 'WEST';
-}
-</pre>
-
-</li></ol></li>
-<li><strong>Updating the Compass Needle Position</strong>
-<ol type="a">
-<li><p>To update the compass needle position on the screen, the change required in the needle position is calculated based on the previous and new angle.</p>
-
-<pre class="prettyprint">
-deltaAngle = angleMemory - angle;
-if (Math.abs(deltaAngle) > 180)
-{
- if (deltaAngle > 0)
- {
- rotation -= ((360 - angleMemory) + angle);
- }
- else
- {
- rotation += (angleMemory + (360 - angle));
- }
-}
-else
-{
- rotation += deltaAngle;
-}
-angleMemory = angle;
-</pre></li>
-
-<li><p>The needle position is updated by rotating the needle with the <code>rotate()</code> method of the <a href="../ui/transform_w.htm#twod">transform function</a>, based on the angle calculated above.</p>
-
-
-<pre class="prettyprint">
-$('#direction').text(text);
-$("#angle").html(Math.round(angle) + "<sup>o</sup>");
-$('#rotation').css('-webkit-transform', 'rotate(' + rotation + 'deg)');
-</pre></li>
-</ol></li></ol>
-
-<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>
\ No newline at end of file
+++ /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>Task: Touch Paint</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"/></p>
- </div>
-
- <div id="toc_border"><div id="toc">
- <p class="toc-title">Dependencies</p>
- <ul class="toc">
- <li>Tizen 2.4 and Higher for Mobile</li>
- </ul>
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#layout">Defining the Application Layout</a></li>
- <li><a href="#draw">Drawing on Canvas</a></li>
- <li><a href="#feature">Using Drawing Features</a></li>
- </ul>
- <p class="toc-title">Related Info</p>
- <ul class="toc">
- <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#touch">Touch Events API for Mobile Web</a></li>
- <li><a href="https://developer.tizen.org/development/sample/web/Graphics/Touch_Paint_1" target="_blank">Touch Paint Sample Description</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-<h1>Task: Touch Paint</h1>
-
-<p>This task, based on the TouchPaint sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#touch">Touch Events</a> API to create a simple paint application using the touch events and the <a href="../graphics/canvas_w.htm">Canvas</a> element. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Graphics/Touch_Paint_1" target="blank">Touch Paint</a>.</p>
-
-<p>This task consists of the following parts:</p>
- <ul>
- <li><a href="#layout">Defining the Application Layout</a> defines how to create the application screens.</li>
- <li><a href="#draw">Drawing on Canvas</a> defines how to detect touch events and draw lines on the canvas.</li>
- <li><a href="#feature">Using Drawing Features</a> defines how to select and use drawing features, such as colors and line widths.</li>
- </ul>
-<p>This sample is a fully functional application for implementing a basic drawing application.</p>
-
-
-<h2 id="layout" name="layout">Defining the Application Layout</h2>
-
-<p>The TouchPaint sample application layout contains only 1 screen: the main screen that displays a canvas on which you can draw with a finger.</p>
-
-
- <p>The following figure shows the main screen of the application.</p>
-
-<p align="center"><strong>Figure: TouchPaint screen</strong></p>
-<p align="center"><img alt="TouchPaint screen" src="../../../images/touchpaint_sd.png" /></p>
-
-<h3 id="main" name="main">Defining the Main Screen</h3>
- <ol>
-
- <li><strong>index.html Source File</strong>
-<p>The main screen displays a <a href="../graphics/canvas_w.htm">Canvas</a> element, and a description area. The description area defines a color picker and a slider as <code><input></code> elements to allow the user can select the color and line width of their strokes. A <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Button.htm">button</a> is also defined to allow the user to clear the canvas.</p>
-<pre class="prettyprint lang-html">
-<body>
- <h2>Touch paint</h2>
- <canvas class="canvas addHeight">
- This browser is not supported
- </canvas>
- <div class="desc">
- <label>Color:<input type="color" class="strokeColor"></label>
- <label>Line width:
- <input type="range" min="5" max="30" step="5"
- value="5" class="strokeWidth"/>
- </label>
- </div>
- <nav></nav>
- <button class="clearBtn">Clear</button>
-</body>
-</pre>
-
-</li>
- </ol>
-
-
-<h2 id="draw" name="draw">Drawing on Canvas</h2>
-
- <p>This section builds upon the elements described in <a href="touch_w.htm#handle">Handling Touch Events</a> and <a href="touch_w.htm#control">Controlling Multi-point Touches</a>.</p>
-
-
-<h3 id="initialize" name="initialize">Initializing the Canvas</h3>
- <ol>
- <li><strong>main.js Source File</strong>
-<p>Define event listeners and handlers to manage the <a href="http://www.w3.org/TR/2013/REC-touch-events-20131010/#the-touchstart-event" target="_blank">touchstart</a>, <a href="http://www.w3.org/TR/2013/REC-touch-events-20131010/#the-touchmove-event" target="_blank">touchmove</a>, and <a href="http://www.w3.org/TR/2013/REC-touch-events-20131010/#the-touchend-event" target="_blank">touchend</a> events on the canvas.</p>
-
-<pre class="prettyprint">
-window.onload = function()
-{
- canvas = document.querySelector(".canvas");
- var context = canvas.getContext("2d");
-
- /* Canvas size setting */
- canvas.width = document.width;
- canvas.height = document.height - 130;
-
- /* Touch event listeners */
- canvas.addEventListener("touchstart", touchStartHandler, false);
- canvas.addEventListener("touchmove", touchMoveHandler, false);
- canvas.addEventListener("touchend", touchEndHandler, false);
-}
-</pre>
-</li></ol>
-
- <h3 id="draw2" name="draw2">Drawing Lines Based on Touch Events</h3>
-<p>The line drawing functionality is implemented in the <code>main.js</code> file.</p>
- <ol>
-<li><strong>Drawing based on Retrieved Event Coordinates</strong>
-<p>To draw an image with fingers, you must find out the coordinates of the triggered touch events.
-Retrieve the coordinates in the <code>touchMoveHandler()</code> event handler.</p>
-<pre class="prettyprint">
-function touchMoveHandler(e)
-{
- touches = e.touches.item(0);
-
- log.innerHTML =
- '<strong>pageX:</strong> ' + touches.pageX +
- '<br/><strong>pageY:</strong> ' + touches.pageY;
-
- context.fillStyle = "#f00";
-
- /* For accurate coordinates, calculate minus offset(Left) from page(X) */
- context.fillRect(touches.pageX - this.offsetLeft,
- touches.pageY - this.offsetTop, 5, 5);
-}
-</pre>
-<p>Every time a <code>touchmove</code> event is fired, the pageX and pageY coordinates of the page are shown in the log, and a quadrangle of 5 x 5 pixels is created. However, since it is difficult to implement line drawing this way, use the <code>changedTouches</code> attribute instead, as shown below.</p>
-</li>
-
-<li><strong>Drawing based on Stored Event Coordinates</strong>
-<p>Create a <code>drawPath</code> array that remembers the order of the triggered touch events, and edit the <code>touchStartHandler()</code> and <code>touchMoveHandler()</code> event handlers to define the lines the user is drawing.</p>
-<ol type="a">
-<li>
-<p>When a <code>touchstart</code> event is triggered, the event handler stores the initial position.</p>
-<pre class="prettyprint">
-var touches;
-/* Remember the order of the touch events */
-var drawPath = new Array();
-/* Flag for displaying the touching point */
-var isMoved = false;
-
-function touchStartHandler(e)
-{
- /* Store the current touch information (coordinates) */
- touches = e.changedTouches;
- drawPath.push(touches[0]);
-}
-</pre>
-</li>
-<li>
-<p>When a <code>touchmove</code> event is triggered, the coordinates of the previously triggered <code>touchmove</code> event stored in the <code>changedTouches</code> attribute are saved in the <code>drawPath</code> array and assigned as a parameter value of the <code>moveTo()</code> method. The coordinates of the current <code>touchmove</code> event are assigned as a parameter value of the <code>lineTo()</code> method, and thus the connected line is indicated.</p>
-<pre class="prettyprint">
-function touchMoveHandler(e)
-{
- isMoved = true;
- touches = e.changedTouches;
-
- /* Assign the line style to be drawn */
- context.lineWidth = strokeWidth;
- context.strokeStyle = strokeColor;
- context.lineJoin = "round";
-
- for (var i = 0; i < touches.length; i++)
- {
- var idx = drawPathSetting(touches[i].identifier);
-
- /* Draw a line from the stored coordinates to the current coordinates */
- context.beginPath();
- context.moveTo(drawPath[idx].pageX - this.offsetLeft,
- drawPath[idx].pageY - this.offsetTop);
- context.lineTo(touches[i].pageX - this.offsetLeft,
- touches[i].pageY - this.offsetTop);
-
- context.closePath();
- context.stroke();
-
- /* Delete the stored coordinates and store the current ones */
- drawPath.splice(idx, 1, touches[i]);
- }
- e.preventDefault();
-}
-</pre>
-</li>
-<li>
-<p>When a <code>touchend</code> event is triggered, it deletes the stored position.</p>
-<pre class="prettyprint">
-function touchEndHandler()
-{
- /* Display the touching point */
- if (!isMoved)
- {
- var startPoint = (Math.PI/180)*0;
- var endPoint = (Math.PI/180)*360;
- context.fillStyle = strokeColor;
- context.beginPath();
- context.arc(touches[0].pageX - this.offsetLeft,
- touches[0].pageY - this.offsetTop,
- strokeWidth/2, startPoint, endPoint, true);
- context.closePath();
- context.fill();
- }
- isMoved=false;
- drawPath.length = 0; /* Initialize the stored coordinates */
-}
-</pre>
-</li>
-</ol></li>
-<li><strong>Drawing based on Multi-point Touches</strong>
-<p>If the application is controlled with fingers, you must handle multi-point touches (a mouse-controlled application only create one touch at a time and only needs 2 events to handle it). To manage multi-touches, the index of the <code>touches[index]</code> array is used.</p>
-<p>The <code>drawPathSetting()</code> method allows the application to handle multi-point touches since the existing and current coordinates of the touch events are connected respectively.</p>
-<p>The <code>touchMoveHandler()</code> event handler uses the <code>drawPathSetting()</code> method to return the index of the <code>drawPath</code> array (which contains the touch event details saved so far). Since the information is similar to the <code>identifier</code> of the touch event which has been currently triggered, the array enables each touch event to have its own information.</p>
-<pre class="prettyprint">
-function drawPathSetting(idx)
-{
- for (var i = 0; i < drawPath.length; i++)
- {
- var _idx = drawPath[i].identifier;
- if (_idx === idx)
- {
- return i;
- }
- }
-
- return -1;
-}
-</pre>
-
-
-</li>
-</ol>
-
-
-<h2 id="feature" name="feature">Using Drawing Features</h2>
-
-
- <h3 id="initialize2" name="initialize2">Initializing Drawing</h3>
- <ol>
- <li><strong>main.js Source File</strong>
-<p>Variables are declared to store and display the color and line width selection of the user.</p>
-<pre class="prettyprint">
-var strokeColorSel, strokeWidthSel;
-var strokeColor;
-var strokeWidth = 5;
-</pre>
-</li></ol>
-
-<h3 id="stroke" name="stroke">Applying the Stroke Styles</h3>
- <ol>
- <li><strong>main.js Source File</strong>
-<ol type="a">
-<li>Add the color and line width values that the user has selected to the applicable variables, and define event handlers to track changes in the user selection.
-<pre class="prettyprint">
-window.onload = function()
-{
- strokeColorSel = document.querySelector(".strokeColor");
- strokeWidthSel = document.querySelector(".strokeWidth");
-
- /* Add event listeners */
- strokeColorSel.addEventListener("change", changeStrokeColor, false);
- strokeWidthSel.addEventListener("change", changeStrokeWidth, false);
-</pre>
-</li>
-<li>If the user changes the color or line width, the event handlers call the <code>changeStrokeColor()</code> or <code>changeStrokeWidth()</code> method to set the new style value.
-<pre class="prettyprint">
- function changeStrokeColor()
- {
- strokeColor = this.value;
- }
-
- function changeStrokeWidth()
- {
- strokeWidth = this.value;
- }
-}
-</pre>
-</li>
-<li>To use the style values, apply them in the <code>touchMoveHandler()</code> event handler, which draws the user's strokes on the canvas.
-<pre class="prettyprint">
-function touchMoveHandler(e)
-{
- context.lineWidth = strokeWidth; /* Selected line width */
- context.strokeStyle = strokeColor; /* Selected line color */
-
- /* Draw the strokes */
-}
-</pre>
-</li>
-</ol>
-</li>
-</ol>
-
-<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>
\ No newline at end of file
+++ /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>Task: Touch Paint</title>
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
- <div id="profile">
- <p><img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
- </div>
-
- <div id="toc_border"><div id="toc">
- <p class="toc-title">Dependencies</p>
- <ul class="toc">
- <li>Tizen 2.3.1 and Higher for Wearable</li>
- </ul>
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#layout">Defining the Application Layout</a></li>
- <li><a href="#draw">Drawing on Canvas</a></li>
- <li><a href="#feature">Using Drawing Features</a></li>
- </ul>
- <p class="toc-title">Related Info</p>
- <ul class="toc">
- <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#touch">Touch Events API for Wearable Web</a></li>
- <li><a href="https://developer.tizen.org/development/sample/web/Graphics/Touch_Paint" target="_blank">Touch Paint Sample Description</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-<h1>Task: Touch Paint</h1>
-
-<p>This task, based on the TouchPaint sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#touch">Touch Events</a> API to create a simple paint application using the touch events and the <a href="../graphics/canvas_w.htm">Canvas</a> element. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Graphics/Touch_Paint" target="blank">Touch Paint</a>.</p>
-
-<p>This task consists of the following parts:</p>
- <ul>
- <li><a href="#layout">Defining the Application Layout</a> defines how to create the application screens.</li>
- <li><a href="#draw">Drawing on Canvas</a> defines how to detect touch events and draw lines on the canvas.</li>
- <li><a href="#feature">Using Drawing Features</a> defines how to select and use drawing features, such as colors and line widths.</li>
- </ul>
-<p>This sample is a fully functional application for implementing a basic drawing application.</p>
-
-
-<h2 id="layout" name="layout">Defining the Application Layout</h2>
-
-<p>The TouchPaint sample application layout contains 2 screens: the main screen displaying a canvas on which you can draw with a finger, and the Options screen which allows you to set up the color and the thickness of the line being drawn.</p>
-
- <p>The following figure shows the main screens of the application.</p>
-
-<p align="center"><strong>Figure: TouchPaint screens</strong></p>
-<p align="center"><img alt="TouchPaint screens" src="../../../images/touchpaint_sd_ww.png" /></p>
-
-<h3 id="main" name="main">Defining the Main Screen</h3>
- <ol>
-
- <li><strong>index.html Source File</strong>
-<p>The main screen displays a <a href="../graphics/canvas_w.htm">Canvas</a> element and 2 buttons (for accessing the Options screen and for clearing the canvas area).</p>
-<pre class="prettyprint lang-html">
-<div class="ui-page ui-page-active" id="main">
- <div class="ui-header" id="main-header" data-position="fixed">
- <h2 class="ui-title">TouchPaint</h2>
- </div>
- <div class="ui-content" id="main-content"></div>
- <div class="ui-footer ui-grid-col-2" id="main-footer">
- <button type="button" class="ui-btn" id="main-options-btn">Options</button>
- <button type="button" class="ui-btn" id="main-clear-btn">Clear</button>
- </div>
-</div>
-</pre>
-
-<p>The above code snippet does not contain the canvas element, which is added to the <code><div id="main-content"></code> element by the JavaScript code after the application start.</p>
-</li>
- </ol>
-
- <h3 id="option" name="option">Defining the Options Screen</h3>
- <ol>
-
- <li><strong>index.html Source File</strong>
-<p>The Options screen displays a slider element, line preview, 4-color (white, red, green, and blue) picker and 2 buttons (<strong>Cancel</strong> and <strong>OK</strong>).</p>
-<p>The slider allows the user to change the line width. Each slider position change results in a change in the line preview thickness. A tap action on the color picker results in a change in the line preview color. A tap action on the buttons moves the user to main screen without or with saving the changes.</p>
-
-<pre class="prettyprint lang-html">
-<div class="ui-page" id="options">
- <div class="ui-header" data-position="fixed">
- <h2 class="ui-title">Options</h2>
- </div>
- <div class="ui-content">
- <input type="range" min="1" max="20" value="1" id="options-range"></input>
- <div id="options-preview"></div>
- <div id="options-colors">
- <div id="options-colors-white" class="options-colors"></div>
- <div id="options-colors-red" class="options-colors"></div>
- <div id="options-colors-green" class="options-colors"></div>
- <div id="options-colors-blue" class="options-colors"></div>
- </div>
- </div>
- <div class="ui-footer ui-grid-col-2">
- <button type="button" class="ui-btn" id="options-cancel-btn">Cancel</button>
- <button type="button" class="ui-btn" id="options-ok-btn">OK</button>
- </div>
-</div>
-</pre>
-
-</li>
- </ol>
-
-
-
-<h2 id="draw" name="draw">Drawing on Canvas</h2>
-
- <p>This section builds upon the elements described in <a href="touch_w.htm#handle">Handling Touch Events</a> and <a href="touch_w.htm#control">Controlling Multi-point Touches</a>.</p>
-
-
-<h3 id="initialize" name="initialize">Initializing the Canvas</h3>
- <ol>
- <li><strong>main.js Source File</strong>
-<p>The canvas is initialized in JavaScript, and includes the size calculation, ID setting, and adding of the element to the main page content.</p>
-
-<pre class="prettyprint">
-function initCanvas()
-{
- canvas = document.createElement('canvas');
- canvas.width = window.innerWidth;
- canvas.height = window.innerHeight - header.offsetHeight - footer.offsetHeight;
- canvas.setAttribute('id', 'main-canvas');
- content.appendChild(canvas);
- context = canvas.getContext('2d');
-}
-</pre>
-</li></ol>
-
- <h3 id="draw2" name="draw2">Drawing Lines Based on Touch Events</h3>
-<p>The line drawing functionality is implemented in the <code>main.js</code> file.</p>
- <ol>
-<li><strong>main.js Source File</strong>
-<ol type="a"><li>
-<p>Define event listeners and handlers to manage the <code>touchstart</code>, <code>touchmove</code>, and <code>touchend</code> events on the canvas.</p>
-<pre class="prettyprint">
-function addCanvasListeners()
-{
- canvas.addEventListener('touchstart', onCanvasTouchStart);
- canvas.addEventListener('touchend', onCanvasTouchEnd);
- canvas.addEventListener('touchmove', onCanvasTouchMove);
- footer.addEventListener('touchend', onFooterTouchEnd);
-}
-</pre>
-</li>
-
-<li>
-<p>Handle the events:</p>
-<ul><li>At touch start, an arc is drawn in case of a single tap performed by the user.</li>
-<li>On touch move, a line is drawn trough the touch path with a given width and color.
-<p>The <code>drawPath</code> array stores the order of the triggered touch events, which are used to draw a line that follows the finger.</p></li>
-<li>At touch end, the touch event is removed from the <code>drawPath</code> array, stopping the line drawing.</li></ul>
-
-<pre class="prettyprint">
-function onCanvasTouchStart(ev)
-{
- var touch = ev.changedTouches[0];
-
- drawPath[touch.identifier] = touch;
-
- context.fillStyle = strokeColor;
- context.beginPath();
- context.arc(drawPath[touch.identifier].pageX - canvas.offsetLeft,
- drawPath[touch.identifier].pageY - canvas.offsetTop
- - header.offsetHeight,
- strokeWidth / 2, 0, Math.PI * 2, true);
- context.closePath();
- context.fill();
-}
-
-function onCanvasTouchEnd(ev)
-{
- var touch = ev.changedTouches[0];
-
- delete drawPath[touch.identifier];
-}
-
-function onCanvasTouchMove(ev)
-{
- var touches = ev.changedTouches,
- touchesLength = touches.length,
- currentDrawPath = null,
- i = 0;
-
- context.lineWidth = strokeWidth + ADDITIONAL_LINE_WIDTH;
- context.strokeStyle = strokeColor;
- context.lineJoin = 'round';
-
- for (i = 0; i < touchesLength; i += 1)
- {
- currentDrawPath = drawPath[touches[i].identifier];
- if (currentDrawPath !== undefined)
- {
- context.beginPath();
- context.moveTo(currentDrawPath.pageX - canvas.offsetLeft + HALF_PIXEL,
- currentDrawPath.pageY - canvas.offsetTop
- + HALF_PIXEL - header.offsetHeight);
- context.lineTo(touches[i].pageX - canvas.offsetLeft + HALF_PIXEL,
- touches[i].pageY - canvas.offsetTop
- + HALF_PIXEL - header.offsetHeight);
- context.closePath();
- context.stroke();
-
- drawPath[touches[i].identifier] = touches[i];
- }
- }
- ev.preventDefault();
-}
-</pre>
-</li>
-</ol></li></ol>
-
-
-
-<h2 id="feature" name="feature">Using Drawing Features</h2>
-
-
- <h3 id="thick" name="thick">Changing the Line Thickness</h3>
- <ol>
- <li><strong>options.js Source File</strong>
-<p>The user changes the line thickness using a slider. The new slider value is set as the width of the <code>preview</code> element, as well as a value in the <code>options</code> object.</p>
-<pre class="prettyprint">
-function onRangeChange(ev)
-{
- setPreviewHeight(ev.target.value);
-}
-function setPreviewHeight(value)
-{
- preview.style.height = value + 'px';
-}
-function setOptionValues()
-{
- options.setStrokeWidth(range.value);
-}
-</pre>
-</li>
-<li><strong>main.js Source File</strong>
-<p>During drawing, the selected thickness is applied to the line being drawn.</p>
-<pre class="prettyprint">
-function getOptionValues()
-{
- strokeWidth = options.getStrokeWidth();
-}
-
-context.lineWidth = strokeWidth + ADDITIONAL_LINE_WIDTH;
-</pre>
-</li></ol>
-
-<h3 id="color" name="color">Changing the Line Color</h3>
- <ol>
- <li><strong>options.js Source File</strong>
-<p>The user changes the line color by selecting it from the color picker. The new color is set as the <code>preview</code> element background, as well as a value in the <code>options</code> object.</p>
-<pre class="prettyprint">
-function onWhiteTap()
-{
- preview.style.backgroundColor = '#fff';
-}
-
-function setOptionValues()
-{
- o.setStrokeColor(preview.style.backgroundColor);
-}
-</pre>
-</li>
-<li><strong>main.js Source File</strong>
-<p>During drawing, the selected color is applied to the line being drawn.</p>
-<pre class="prettyprint">
-function getOptionValues()
-{
- strokeColor = o.getStrokeColor();
-}
-
-context.strokeStyle = strokeColor;
-</pre>
-</li>
-</ol>
-
-
-<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>
\ No newline at end of file
<li>Multi-point touch control
<p>Unlike with mouse events, multiple concurrent touch events (represented by the <a href="http://www.w3.org/TR/2013/REC-touch-events-20131010/#idl-def-Touch" target="_blank">Touch</a> interface) can occur. To <a href="#control">control multi-point touch events</a>, the <a href="http://www.w3.org/TR/2013/REC-touch-events-20131010/#idl-def-TouchList" target="_blank">TouchList</a> interface is used to save the respective event status (based on the <code>touches</code>, <code>targetTouches</code>, and <code>changedTouches</code> attributes). The status stored in the <code>TouchList</code> instance is renewed every time a new touch event occurs.</p></li>
</ul>
-<p>For a practical example of drawing a simple image by using touch events and canvas elements, see the Touch Paint sample task (in <a href="task_touch_paint_mw.htm">mobile</a> and <a href="task_touch_paint_ww.htm">wearable</a> applications).</p>
<p>A touch-based mobile operating system uses tap and double-tap gestures. The tap is used to generate a click event, and double-tap used for zooming. To recognize the touch gestures, the OS sets a timer which starts at the first tap and checks for a second before the event is fired. This causes a delay in the single tap event, making the touch responsiveness of the application suffer. To avoid the delay, you can <a href="#enhance">enhance the touch event responsiveness</a> by making the page unscalable, or modifying touch responses.</p>
The canvas currently supports 2D graphics only, since the 3D graphics specification is still in progress. The <a href="https://www.khronos.org/registry/webgl/specs/1.0/" target="_blank">WebGL™</a> API is currently called 3D Canvas, and is used to express 3D graphics. For more information on the performance differences between Canvas 2D and WebGL™ in mobile applications, see <a href="#comparison">Performance Comparison of Canvas 2D and WebGL™</a>.
</div>
-<p>For a practical example of using canvas contexts to create and display a clock on the canvas, see the <a href="task_basicwatch_w.htm">Basic Watch</a> wearable sample task.</p>
-
<h2 id="canvas" name="canvas">Using a Canvas</h2>
<p>To create a canvas in your application:</p>
+++ /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>Task: Basic Watch</title>
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
- <div id="profile">
- <p><img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
- </div>
-
- <div id="toc_border"><div id="toc">
- <p class="toc-title">Dependencies</p>
- <ul class="toc">
- <li>Tizen 2.3.1 and Higher for Wearable</li>
- </ul>
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#layout">Defining the Application Layout</a></li>
- <li><a href="#initialize">Initializing the Application</a></li>
- <li><a href="#time">Displaying the Time</a></li>
- </ul>
- <p class="toc-title">Related Info</p>
- <ul class="toc">
- <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#canvas2d">HTML Canvas 2D Context API for Wearable Web</a></li>
- <li><a href="https://developer.tizen.org/development/sample/web/Watch/Basic_Watch" target="_blank">Basic Watch Sample Description</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-<h1>Task: Basic Watch</h1>
-
-<p>This task, based on the BasicWatch sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#canvas2d">HTML Canvas 2D Context</a> API to create an analog watch on a canvas. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Watch/Basic_Watch" target="blank">Basic Watch</a>.</p>
-
- <p>This task consists of the following parts:</p>
- <ul>
- <li><a href="#layout">Defining the Application Layout</a> defines how to create the application screens.</li>
- <li><a href="#initialize">Initializing the Application</a> defines how to initialize the application.</li>
- <li><a href="#time">Displaying the Time</a> defines how to show the clock needles on the watch canvas in a correct location.</li>
- </ul>
- <p>This sample is a fully functional application for displaying a clock on a canvas.</p>
-
-<h2 id="layout" name="layout">Defining the Application Layout</h2>
-
- <p>The BasicWatch sample application layout contains only 1 screen: the main screen that displays the clock.</p>
-
- <p>The following figure shows the main screen of the application.</p>
- <p align="center"><strong>Figure: BasicWatch screen</strong></p>
- <p align="center"><img alt="BasicWatch screen" src="../../../images/basicwatch_sd.png" /></p>
-
- <h3 id="main" name="main">Defining the Main Screen</h3>
- <ol>
- <li><strong>index.html Source File</strong>
- <p>The main screen displays a <a href="http://www.w3.org/TR/2012/CR-html5-20121217/embedded-content-0.html#the-canvas-element" target="_blank">canvas</a> element on which the watch face and needles are placed.</p>
-
-<pre class="prettyprint lang-html">
-<head>
- <title>Canvas Clock - Canvas API Tutorial</title>
- <link rel="stylesheet" type="text/css" href="css/style.css"/>
-</head>
-<body>
- <canvas class="canvas"></canvas>
- <script src="js/main.js"></script>
-</body>
-</pre> </li>
-<li><strong>main.js Source File</strong>
-<ol type="a">
- <li>
-<p>Create the clock in the middle of the canvas. Define the watch face style.</p>
-<pre class="prettyprint">
-function renderDots()
-{
- 'use strict';
-
- var dx = 0,
- dy = 0,
- i = 1,
- angle = null;
-
- context.save();
- context.translate(canvas.width / 2, canvas.height / 2);
- context.beginPath();
- context.fillStyle = '#999999';
-</pre></li>
-<li><p>Create 4 dots on the sides of the watch face and use the <code>fill()</code> method to style the dots.</p>
-
-<pre class="prettyprint">
- for (i = 1; i <= 4; i++)
- {
- angle = (i - 3) * (Math.PI * 2) / 4;
- dx = clockRadius * 0.9 * Math.cos(angle);
- dy = clockRadius * 0.9 * Math.sin(angle);
-
- context.arc(dx, dy, 3, 0, 2 * Math.PI, false);
- context.fill();
- }
- context.closePath();
-</pre></li>
-
-<li>
-<p>Create the center point.</p>
-
-<pre class="prettyprint">
- context.beginPath();
-
- context.fillStyle = '#ff9000';
- context.strokeStyle = '#fff';
- context.lineWidth = 4;
-
- context.arc(0, 0, 7, 0, 2 * Math.PI, false);
- context.fill();
- context.stroke();
- context.closePath();
-}
-</pre></li></ol></li></ol>
-
-<h2 id="initialize" name="initialize">Initializing the Application</h2>
-
- <ol>
- <li><strong>config.xml Source File</strong>
- <p>Define the application category.</p>
-
-<pre class="prettyprint">
-<tizen:category name="http://tizen.org/category/wearable_clock"/>
-</pre>
-
-<div class="note">
- <strong>Note</strong>
- To run your application on Samsung Gear 2, Samsung Gear 2 Neo, and Samsung Gear S devices, use <code><tizen:category name="com.samsung.wmanager.WATCH_CLOCK"/></code> instead of <code><tizen:category name="http://tizen.org/category/wearable_clock"/></code>.
-</div>
- </li>
- <li><strong>main.js Source File</strong>
- <ol type="a">
- <li>
- <p>Modify the <code>window.requestAnimationFrame()</code> method to make the application compatible with the main browsers.</p>
-<pre class="prettyprint">
-window.requestAnimationFrame = window.requestAnimationFrame ||
- window.webkitRequestAnimationFrame ||
- window.mozRequestAnimationFrame ||
- window.oRequestAnimationFrame ||
- window.msRequestAnimationFrame ||
- function(callback)
- {
- 'use strict';
- window.setTimeout(callback, 1000 / 60);
- };
-</pre>
- </li>
- <li>
- <p>Initialize the canvas context and define the canvas area.</p>
-<pre class="prettyprint">
-window.onload = function()
-{
- 'use strict';
-
- canvas = document.querySelector('canvas');
- context = canvas.getContext('2d');
- clockRadius = document.width / 2;
-
- canvas.width = document.width;
- canvas.height = canvas.width;
-</pre>
- </li>
- <li>
- <p>Define an event listener to detect back key events.</p>
-<pre class="prettyprint">
- window.addEventListener('tizenhwkey', function(e)
- {
- if (e.keyName == 'back')
- {
- tizen.application.getCurrentApplication().exit();
- }
- });
-
- window.requestAnimationFrame(watch);
-};
-</pre>
- </li>
- </ol>
- </li>
- </ol>
-
-<h2 id="time" name="time">Displaying the Time</h2>
-
-<p>This section builds upon the elements described in <a href="canvas_w.htm#text">Creating Text and Lines on the Canvas</a>.</p>
-
-
-<h3 id="needle" name="needle">Creating the Clock Needles</h3>
-The clock needles are rendered in the <code>main.js</code> file.
- <ol>
- <li><strong>Rendering the Clock Needles</strong>
-<p>The needles can be created using the <code>renderNeedle()</code> method.</p>
- <p>To create the needle as a triangle or a polygon, assign the coordinate of the beginning point with the <code>moveTo()</code> method. To assign the rest of the points of the triangle or polygon, use the <code>lineTo()</code> method, which defines the position of the next connecting vertex. You can also adjust the size of each clock needle with the <code>lineTo()</code> method.</p>
-<pre class="prettyprint">
-function renderNeedle(angle, radius)
-{
- 'use strict';
- context.save();
- context.rotate(angle);
- context.beginPath();
- context.lineWidth = 4;
- context.strokeStyle = '#fff';
- context.moveTo(6, 0);
- context.lineTo(radius, 0);
- context.closePath();
- context.stroke();
- context.closePath();
- context.restore();
-}
-</pre></li>
- <li><strong>Creating the Hour Needle</strong>
-<p>To create the hour needle, use the <code>renderHourNeedle()</code> method.</p>
-<pre class="prettyprint">
-function renderHourNeedle(hour)
-{
- 'use strict';
-
- var angle = null,
- radius = null;
-
- angle = (hour - 3) * (Math.PI * 2) / 12;
- radius = clockRadius * 0.55;
- renderNeedle(angle, radius);
-}
-</pre></li>
- <li><strong>Creating the Minute Needle</strong>
-<p>To create the minute needle, use the <code>renderMinuteNeedle()</code> method.</p>
-<pre class="prettyprint">
-function renderMinuteNeedle(minute)
-{
- 'use strict';
-
- var angle = null,
- radius = null;
-
- angle = (minute - 15) * (Math.PI * 2) / 60;
- radius = clockRadius * 0.75;
- renderNeedle(angle, radius);
-}
-</pre></li>
-</ol>
-
-<h3 id="current" name="current">Indicating the Current Time</h3>
-<p>The time displaying functionality is implemented in the <code>main.js</code> file.</p>
- <ol>
- <li><strong>Determining the Time</strong>
-<p>Use the <code>new Date()</code> method to find out the current time. To point the needles accurately, define variables for the current hour and minute.</p>
-
-<pre class="prettyprint">
-function watch()
-{
- 'use strict';
-
- var date = new Date(),
- hours = date.getHours(),
- minutes = date.getMinutes(),
- seconds = date.getSeconds(),
- hour = hours + minutes / 60,
- minute = minutes + seconds / 60;
- nextMove = 1000 - date.getMilliseconds();
-</pre></li>
-<li><strong>Erasing the Previous Time</strong>
-<p>Use the <code>clearRect()</code> method to delete the previous time (the previously positioned needles) every time a new time is indicated. </p>
-<pre class="prettyprint">
- context.clearRect(0, 0, context.canvas.width, context.canvas.height);
-</pre></li>
-<li><strong>Pointing the Clock Needles</strong>
-<p>Display the current time.</p>
-
-<pre class="prettyprint">
- renderDots();
- renderHourNeedle(hour);
- renderMinuteNeedle(minute);
-
- context.restore();
- setTimeout(function()
- {
- window.requestAnimationFrame(watch);
- }, nextMove);
-}
-</pre></li></ol>
-
-<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>
\ No newline at end of file
Tizen supports a WebKit-based <code>GetUserMedia()</code> method, so always use it in the <code>webkitGetUserMedia()</code> format.\r
</div>\r
\r
-<p>For a practical example of displaying a camera video stream and capturing images from it, see the <a href="task_selfcamera_w.htm">Self Camera</a> mobile sample task.</p>\r
-\r
<h2 id="access" name="access">Accessing a Video Stream</h2>\r
\r
<p>Learning how to access a video stream is a basic user media management skill:</p>\r
+++ /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>Task: Piano</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"/></p>
- </div>
-
- <div id="toc_border"><div id="toc">
- <p class="toc-title">Dependencies</p>
- <ul class="toc">
- <li>Tizen 2.4 and Higher for Mobile</li>
- </ul>
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#layout">Defining the Application Layout</a></li>
- <li><a href="#initialize">Initializing the Application</a></li>
- <li><a href="#handle">Handling the Keys</a></li>
- <li><a href="#play">Playing Sounds</a></li>
- </ul>
- <p class="toc-title">Related Info</p>
- <ul class="toc">
- <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#audio">HTML5 audio element API for Mobile Web</a></li>
- <li><a href="https://developer.tizen.org/development/sample/web/Multimedia/Piano" target="_blank">Piano Sample Description</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Task: Piano</h1>
- <p>This task, based on the Piano sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#audio">HTML5 audio element</a> API to create a piano application and play sounds. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Multimedia/Piano" target="blank">Piano</a>.</p>
-
- <p>This task consists of the following parts:</p>
- <ul>
- <li><a href="#layout">Defining the Application Layout</a> defines how to create the application screens.</li>
- <li><a href="#initialize">Initializing the Application</a> defines how to initialize the application.</li>
- <li><a href="#handle">Handling the Keys</a> defines how to create the piano object.</li>
- <li><a href="#play">Playing Sounds</a> defines how to use the <code>audio</code> element to play sounds.</li>
- </ul>
- <p>This sample is a fully functional application for playing a piano. The user can use multi-touch to play a combination of sounds from a single octave.</p>
-
-<h2 id="layout" name="layout">Defining the Application Layout</h2>
- <p>The Piano sample application layout contains only 1 screen: the main screen that displays the piano keyboard.</p>
-
- <p>The following figure shows the main screen of the application.</p>
- <p align="center"><strong>Figure: Piano screen</strong></p>
- <p align="center"><img alt="Piano screen" src="../../../images/piano.png" /></p>
-
- <h3 id="main" name="main">Defining the Main Screen</h3>
- <ol>
- <li><strong>index.html Source File</strong>
-<p>The main screen displays a piano keyboard. The keys are defined as <code><div></code> elements whose <code>class</code> attribute is set to <code>button</code>.</p>
-
-<pre class="prettyprint lang-html">
-<body ondragstart="return false" onselectstart="return false">
-
- <div class="button white_btn" id="play0"></div>
- <div class="button white_btn" id="play2"></div>
- <div class="button white_btn" id="play4"></div>
- <div class="button white_btn" id="play5"></div>
- <div class="button white_btn" id="play7"></div>
- <div class="button white_btn" id="play9"></div>
- <div class="button white_btn" id="play11"></div>
- <div class="button white_btn" id="play12"></div>
-
- <div class="button black_btn" style="left: 8.6%" id="play1"></div>
- <div class="button black_btn" style="left: 21.2%" id="play3"></div>
- <div class="button black_btn" style="left: 45.8%" id="play6"></div>
- <div class="button black_btn" style="left: 58.4%" id="play8"></div>
- <div class="button black_btn" style="left: 70.9%" id="play10"></div>
- <div class="button black_btn" style="left: 95%" id="play13"></div>
-
-</body>
-</pre></li>
-<li><strong>style.css Source File</strong>
-<p>The appearance of the key buttons is defined in the CSS file.</p>
-
-<pre class="prettyprint">
-.white_btn
-{
- background: url('../white.png') bottom center no-repeat transparent;
- height: 100%;
- display: inline-block;
- background-size: 100%;
- width: 12.5%;
- height: 100%;
- position: relative;
- float: left;
- margin: 0;
- padding: 0;
- display: block;
- margin: 0;
-}
-
-.white_btn.pressed
- {
- background-image: url('../white_pressed.png');
-}
-
-.black_btn
- {
- float: left;
- background: url('../black.png') bottom center no-repeat transparent;
- width: 7.6%;
- height: 73.8%;
- background-size: 100%;
- background-position: top center;
- position: fixed;
- top: 0px;
-}
-
-.black_btn.pressed
-{
- background-image: url('../black_pressed.png');
-}
-
-</pre></li>
-</ol>
-
- <h2 id="initialize" name="initialize">Initializing the Application</h2>
- <ol>
- <li><strong>main.js Source File</strong>
- <ol type="a">
- <li>
- <p>The <code>piano</code> variable is declared to create the <code>Piano</code> object. A keyword is determined for optimizing browser performance and validating JavaScript. Elements are defined for storing the piano key element object IDs and corresponding <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#audio">audio</a> elements.</p>
-<pre class="prettyprint">
-var piano;
-
-function Piano()
-{
- "use strict";
-}
-
-function()
-{
- "use strict";
- Piano.prototype =
- {
- touchPianoKey: [],
- lockIds: {},
- audio: [],
- whiteCache: null,
- blackCache: null
- }
-};
-</pre>
- </li>
- <li>
- <p>The <code>audioInit()</code> method is used to create and initialize the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#audio">audio</a> element for each keyboard button. The element contains an event listener to detect button events.</p>
-<pre class="prettyprint">
-Piano.prototype.audioInit = function audioInit()
-{
- var i, self = this;
- for (i = 0; i <= 13; i += 1)
- {
- this.audio[i] = document.createElement('audio');
- this.audio[i].name = i;
- this.audio[i].src = this.audio[i].name + ".wav";
- this.audio[i].addEventListener("playing", function()
- {
- self.lockIds["play" + this.name] = false;
- });
- }
-};
-</pre>
- </li>
- </ol>
- </li>
- </ol>
-
- <h2 id="handle" name="handle">Handling the Keys</h2>
- <p>The event handling functionality is implemented in the <code>main.js</code> file.</p>
- <ol>
- <li><strong>Creating Event Listeners</strong>
- <ol type="a"><li>
-<p>The <code>onPianoKeyTouchDown()</code> event listener is created to detect the touch event, when the user presses a piano key.</p>
-
-<pre class="prettyprint">
-Piano.prototype.onPianoKeyTouchDown = function onPianoKeyTouchDown(data)
-{
- data.originalEvent.preventDefault();
- var element, touch, i, len;
- for (i = 0, len = data.originalEvent.changedTouches.length; i < len; i += 1)
- {
- touch = data.originalEvent.changedTouches[i];
- element = document.elementFromPoint(touch.clientX, touch.clientY);
- if (element)
- {
- if (this.touchPianoKey[touch.identifier] !== element.id)
- {
- $('#' +
- this.touchPianoKey[touch.identifier]).removeClass('pressed');
- this.playAudioByElement(element, touch.identifier, function()
- {
- this.lockIds[element.id] = true;
- });
- }
- }
- }
-};
-</pre></li>
- <li>
-<p>The <code>onPianoKeyTouchUp()</code> event listener is created to detect the touch event, when the user releases a piano key.</p>
-
-<pre class="prettyprint">
-Piano.prototype.onPianoKeyTouchUp = function onPianoKeyTouchUp(data)
-{
- var i, touchId, len, buttonId;
- for (i = 0, len = data.originalEvent.changedTouches.length; i < len; i += 1)
- {
- /* Get the number assigned to the finger touching the screen */
- touchId = data.originalEvent.changedTouches[i].identifier;
- buttonId = this.touchPianoKey[touchId];
- setTimeout(function()
- {
- (function(id) {$('#' + id).removeClass('pressed');})
- (buttonId);
- }, 100);
- this.touchPianoKey[touchId] = undefined;
- }
-};
-</pre></li>
-</ol>
-</li>
- <li><strong>Binding Events</strong>
-<p>The <code>bindEvents()</code> method is used to register event handlers to the corresponding events.</p>
-
-<pre class="prettyprint">
-Piano.prototype.bindEvents = function bindEvents()
-{
- var self = this;
-
- $(".button").bind('touchstart touchmove', function(e)
- {
- self.onPianoKeyTouchDown(e);
- });
- $(".button").bind('touchend', function(e)
- {
- self.onPianoKeyTouchUp(e);
- });
- $('#back').bind('touchstart', function(event)
- {
- event.preventDefault();
- event.stopPropagation();
- /* Apply CSS style dynamically */
- $(this).addClass('active');
- tizen.application.getCurrentApplication().exit();
- });
-
- $('#back').bind('touchend', function(event)
- {
- /* Cancel the applied CSS style */
- $(this).removeClass('active');
- });
-
- document.addEventListener('webkitvisibilitychange', function()
- {
- if (document.webkitVisibilityState === 'visible')
- {
- self.audioInit()
- }
- })
-};
-</pre></li>
-</ol>
-
-
- <h2 id="play" name="play">Playing Sounds</h2>
-
- <p>This section builds upon the elements described in <a href="video_audio_w.htm#play">Playing Media Files</a>.</p>
- <ol>
- <li><strong>main.js Source File</strong>
-<p>The <code>playAudioByElement()</code> method is used to play the sound determined in the <code>audio</code> element, when a given key button is pressed.</p>
-
-<pre class="prettyprint">
-Piano.prototype.playAudioByElement =
- function playAudioByElement(element, touchId, callback)
-{
- var audio = this.audio[element.id.substr(4)];
- $(element).addClass('pressed');
- this.touchPianoKey[touchId] = element.id;
- if (audio)
- {
- if (audio.paused)
- {
- audio.play();
- }
- if (audio.currentTime !== 0)
- {
- audio.currentTime = 0;
- }
- if (callback instanceof Function)
- {
- callback.call(this);
- }
- }
-};
-</pre></li>
-</ol>
-
-<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>
\ No newline at end of file
+++ /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>Task: Self Camera</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"/></p>
- </div>
-
- <div id="toc_border"><div id="toc">
- <p class="toc-title">Dependencies</p>
- <ul class="toc">
- <li>Tizen 2.4 and Higher for Mobile</li>
- </ul>
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#layout">Defining the Application Layout</a></li>
- <li><a href="#configure">Initializing the Application</a></li>
- <li><a href="#stream">Accessing the Camera Stream</a></li>
- <li><a href="#capture">Capturing Pictures from Video</a></li>
- </ul>
- <p class="toc-title">Related Info</p>
- <ul class="toc">
- <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#getusermedia">getUserMedia API for Mobile Web</a></li>
- <li><a href="https://developer.tizen.org/development/sample/web/Multimedia/Self_Camera" target="_blank">Self Camera Sample Description</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Task: Self Camera</h1>
- <p>This task, based on the SelfCamera sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#getusermedia">getUserMedia</a> API to access and display the camera video stream, and capture a single photo. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Multimedia/Self_Camera" target="blank">Self Camera</a>.</p>
- <p>This task consists of the following parts:</p>
- <ul>
- <li><a href="#layout">Defining the Application Layout</a> defines how to create the application screens. </li>
- <li><a href="#configure">Initializing the Application</a> defines how to initialize the application.</li>
- <li><a href="#stream">Accessing the Camera Stream</a> defines how to access the front camera video stream.</li>
- <li><a href="#capture">Capturing Pictures from Video</a> defines how to capture a single frame from the video tag.</li>
- </ul>
-
- <p>This sample is a fully functional camera application for taking photos with the device front camera. The user can set the timer delay and access photos by clicking on the photo previews.</p>
-
-<h2 id="layout" name="layout">Defining the Application Layout</h2>
- <p>The SelfCamera sample application layout contains only 1 screen: the main screen that displays the camera view and application control elements (buttons).</p>
-
-
- <p>The following figure shows the main screen of the application.</p>
- <p align="center"><strong>Figure: SelfCamera screen</strong></p>
- <p align="center"><img alt="SelfCamera screen" src="../../../images/selfcamera.png" /></p>
-
-<h3 id="main" name="main">Defining the Main Screen</h3>
- <ol>
- <li><strong>index.html Source File</strong>
- <p>The <code><div></code> elements are used to define the camera elements for the screen.</p>
-<pre class="prettyprint">
-<body>
- <div id="camera"></div>
-
- <div id="countdown"></div>
-
- <div class="timers">
- <div id="timer2"></div>
- <div id="timer5"></div>
- <div id="timer10"></div>
- </div>
-
- <div id="thumbnail">
- <div id="upImage"></div>
- </div>
-
- <div id="shutter-container">
- <div id="shutter"></div>
- </div>
-</body>
-</pre></li>
-<li><strong>css/style.css Source File</strong>
-<p>The <code>
-style.css</code> file defines the positions and styles of the camera elements.</p>
-<pre class="prettyprint">
-#camera
-{
- width: 100%;
- height: 100%;
- overflow: hidden;
-}
-
-div#countdown
-{
- position: absolute;
- width: 100%;
- height: 100%;
- top: 20%;
- font-size: 200pt;
- text-align: center;
- vertical-align: middle;
- color: rgba(135, 226, 0, 0.8);
- margin: auto 0;
- z-index: 10;
-}
-
-.timers
-{
- position: absolute;
- width: 100%;
- background-color: rgba(10, 10, 10, 0.4);
- top: 0;
- left: 0;
-}
-
-div#thumbnail
-{
- position: absolute;
- width: 56px;
- height: 64px;
- left: 13px;
- bottom: 19px;
- background-size: 56px 64px;
- background-color: transparent;
- background-image: url('../images/none.png');
- background-repeat: no-repeat;
- z-index: 100;
-}
-
-div#shutter-container
-{
- width: 100%;
- height: 86px;
- position: absolute;
- bottom: 0;
- z-index: 11
-}
-</pre></li></ol>
-
-<h2 id="configure" name="configure">Initializing the Application</h2>
- <ol>
- <li><strong>config.xml Source File</strong>
- <p>The required privileges are declared in the <code>config.xml</code> file. </p>
-<pre class="prettyprint">
-<!--Configuration file content-->
-<widget ...>
- <!--Other configuration details-->
- <tizen:privilege name="http://tizen.org/privilege/application.launch"/>
- <tizen:privilege name="http://tizen.org/privilege/filesystem.read"/>
- <tizen:privilege name="http://tizen.org/privilege/filesystem.write"/>
- <tizen:privilege name="http://tizen.org/privilege/content.read"/>
- <tizen:privilege name="http://tizen.org/privilege/content.write"/>
-</widget>
-</pre></li>
- </ol>
-
-<h2 id="stream" name="stream">Accessing the Camera Stream</h2>
-
- <p>This section builds upon the elements described in <a href="getusermedia_w.htm#access">Accessing a Video Stream</a>.</p>
-
-
- <h3 id="app" name="app">Managing the Application Object</h3>
- <p>The application object functionality is implemented in the <code>main.js</code> file.</p>
- <ol>
- <li><strong>Creating and Initializing the Application Object</strong>
- <ol type="a">
-<li>The <code>SelfCamera</code> object represents the entire application entity, and by using the prototype, the member methods are registered in the object.
-
-<pre class="prettyprint">
-var selfCamera;
-function SelfCamera()
-{
- "use strict";
-}
-
-function()
-{
- "use strict";
- var DELAY_2_SECOND = 2, DELAY_5_SECOND = 5, DELAY_10_SECOND = 10;
- var previewLock = false;
-
- SelfCamera.prototype =
- {
- countdown: -1, /* Current value after clicking the camera button */
- countdownTimeoutID: -1,
- countSound: new Audio('sounds/sounds_count.wav'),
- img: document.createElement('canvas'),
- filename: '',
- loadDirectory: '',
- saveDirectory: 'images/',
- IMG_PREFIX: 'SelfCamera_',
- shutterSound: new Audio('sounds/sounds_Shutter_01.wav'),
- timer: null, /* Value set by the buttons */
- systemIO: null,
- video: null,
- src: null,
- isMediaWorking: false
- previewLock: false
- };
-}
-</pre></li>
-
- <li>The <code>SelfCamera</code> object is created and initialized.
-
-<pre class="prettyprint">
-selfCamera = new SelfCamera();
-$(document).ready(function()
-{
- "use strict";
- selfCamera.init();
-});
-</pre></li>
-</ol></li>
-<li><strong>Binding Events to the Application Object</strong>
-<ol type="a">
-
-<li><p>To bind video events to the application object, call the <code>bindVideoEvents()</code> method, which registers the event handlers to the corresponding events using the <code>bind()</code> method.</p>
-<pre class="prettyprint">
-SelfCamera.prototype.bindVideoEvents = function()
-{
- var self = this;
- $(this.video).on("stalled", function(e) {this.load();});
- $(this.video).on("playing", this.resizeVideo.bind(this));
- $(this.video).on('click', function() {this.play();});
-};
-</pre></li>
-
-<li><p>To bind button and hardware key events to the application object, call the <code>bindEvents()</code> method, which register the event handlers to the corresponding events using the <code>bind()</code> method.</p>
-<pre class="prettyprint">
-SelfCamera.prototype.bindEvents = function bindEvents()
-{
- var self = this;
-
- document.addEventListener('webkitvisibilitychange', function(event)
- {
- self.clearCountdown();
- previewLock = false;
- if (document.webkitVisibilityState === 'visible')
- {
- if (self.video !== null)
- {
- self.reloadSaveDirectory(function() {self.video.play();});
- }
- self.loadThumbnail(true, false);
- }
- });
-
- $('shutter').mousedown(function(ev) {$('shutter').addClass('active');})
- .mouseup(function(ev) {$('shutter').removeClass('active');})
- .on('touchstart',
- function(ev) {$('shutter').addClass('active');})
- .on('touchend',
- function(ev) {$('shutter').removeClass('active');});
-
- $(window).on('tizenhwkey', function(e)
- {
- if (e.originalEvent.keyName === "back")
- {
- if (self.countdownTimeoutID !== -1)
- {
- self.clearCountdown();
- self.loadThumbnail(true, false);
- }
- else
- {
- tizen.application.getCurrentApplication().exit();
- }
- });
-
- this.bindTimerClicks();
-
- $('#thumbnail').on('click', this.launchPreview.bind(this));
- $('#shutter').on('touchstart', this.shutterTouched.bind(this));
-};
-</pre>
-
-</li></ol></li></ol>
-
-<h3 id="access" name="access">Accessing the Camera Stream</h3>
- <ol>
- <li><strong>main.js Source File</strong>
- <ol type="a">
- <li> The <code>startPreview()</code> method requests the video stream using the <code>getUserMedia()</code> method of the navigator.
-<pre class="prettyprint">
-navigator.getUserMedia(options, this.onCaptureVideoSuccess.bind(this),
- this.onCaptureVideoError.bind(this));
-</pre></li>
-
-<li>The <code>onCaptureVideoSuccess()</code> event handler obtains the stream URL and creates the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#video">video element</a> with the <code>createVideoElement()</code> method.
-<pre class="prettyprint">
-SelfCamera.prototype.onCaptureVideoSuccess = function onCaptureVideoSuccess(stream)
-{
- var urlStream;
- urlStream = window.webkitURL.createObjectURL(stream); /* Create stream */
- this.isMediaWorking = true;
- /* Create video element with stream handler */
- this.createVideoElement(urlStream);
- this.setTimer(DELAY_2_SECOND); /* Initialize timer button options */
-};
-</pre></li>
-<li><p>The <code>createVideoElement()</code> method defines the video element, except for the <code>
-src</code> attribute, which is already defined by the <code>onCaptureVideoSuccess()</code> event handler.</p>
-<pre class="prettyprint">
-SelfCamera.prototype.createVideoElement = function(src)
-{
- this.video = $('<video/>',
- {
- autoplay: 'autoplay',
- id: 'video',
- style: 'height:' + $(window).height() + 'px',
- src: src
- }).appendTo("#camera").get(0);
-
- this.bindVideoEvents();
-};
-</pre>
-</li>
-
- </ol></li> </ol>
-
-<h2 id="capture" name="capture">Capturing Pictures from Video</h2>
- <ol>
- <li><strong>main.js Source File</strong>
- <ol type="a">
- <li>Capture a video frame with canvas.
-<pre class="prettyprint">
-SelfCamera.prototype.captureImage = function captureImage(video)
-{
- var sourceWidth = window.innerWidth,
- sourceHeight = window.innerHeight,
- sourceX = (sourceWidth - $(video).width()) / 2,
- sourceY = (sourceHeight - $(video).height()) / 2;
-
- this.img.width = sourceWidth;
- this.img.height = sourceHeight;
-
- /* Crop image to viewport dimensions */
- this.img.getContext('2d').drawImage(video, sourceX, sourceY,
- $(video).width(), $(video).height());
-
- /*
- For the best available dimension, use the following:
- this.img.width = video.videoWidth;
- this.img.height = video.videoHeight;
- this.img.getContext('2d').drawImage(video, 0, 0);
- */
-};
-</pre></li>
-
-<li>Extract the image data from the canvas.
-<pre class="prettyprint">
-SelfCamera.prototype.saveCanvas = function saveCanvas(canvas, fileName)
-{
- var data, self = this,
- onSuccess = function(fileHandle)
- {
- this.setLoadDirectory(this.getFileDirectoryURI(fileHandle));
- tizen.content.scanFile(fileName,
- function() {self.loadThumbnail(false, false);},
- function() {/* Error handling */});
- }.bind(this);
-
- data = canvas.toDataURL().replace('data:image/png;base64,', '')
- .replace('data:,', '');
-
- this.systemIO.saveFileContent(fileName, data, onSuccess, 'base64');
-};
-</pre></li>
-
- <li>Save the image.
-<pre class="prettyprint">
-saveFileContent: function SystemIO_saveFileContent(filePath, fileContent,
- onSaveSuccess, fileEncoding)
-{
- var pathData = this.getPathData(filePath),
- self = this,
- fileHandle;
-
- function onOpenDirSuccess(dir)
- {
- /* Create a new file */
- fileHandle = self.createFile(dir, pathData.fileName);
- if (fileHandle !== false)
- {
- /* Save data into the file */
- self.writeFile(fileHandle, fileContent, onSaveSuccess,
- false, fileEncoding);
- }
- }
-
- /* Open the directory */
- this.openDir(pathData.dirName, onOpenDirSuccess);
-};
-</pre>
- </li></ol></li></ol>
-
-<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>
\ No newline at end of file
</li>\r
</ul>\r
\r
-<p>For a practical example of creating a piano in your application and playing sounds, see the <a href="task_piano_w.htm">Piano</a> mobile sample task.</p>\r
-\r
<h2 id="create" name="create">Creating an Audio and Video Player</h2>\r
\r
<p>To provide users with HTML5 audio and video features, you must learn to create a simple player for streaming playback:\r
<p>You can <a href="#deallocate">deallocate the camera preview stream resources</a> when the application is invisible so that the preview stream can be assigned to another Web application.</p>\r
</li>\r
</ul>\r
-<p>For a practical example of launching and controlling the camera on the Tizen wearable device, see the <a href="task_camera_w.htm">Camera</a> sample task.</p>\r
-\r
<h2 id="access" name="access">Accessing the Camera Device</h2>\r
\r
<p>To take advantage of the camera features, you must learn to access the camera device:</p>\r
+++ /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>Task: Camera</title>
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
- <div id="profile">
- <p><img alt="Wearable Web" src="../../../images/wearable_s_w.png"/></p>
- </div>
-
- <div id="toc_border"><div id="toc">
- <p class="toc-title">Dependencies</p>
- <ul class="toc">
- <li>Tizen 2.3.1 and Higher for Wearable</li>
- </ul>
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#layout">Defining the Application Layout</a></li>
- <li><a href="#preview">Defining the Preview</a></li>
- <li><a href="#photo">Capturing Images</a></li>
- <li><a href="#video">Recording Videos</a></li>
- <li><a href="#settings">Changing Settings</a></li>
- </ul>
- <p class="toc-title">Related Info</p>
- <ul class="toc">
- <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/camera_w.html">Camera API (Tizen Extension) API for Wearable Web</a></li>
- <li><a href="https://developer.tizen.org/development/sample/web/Multimedia/Camera" target="_blank">Camera Sample Description</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-<h1>Task: Camera</h1>
-<p>This task, based on the Camera sample delivered with the Tizen Studio, demonstrates how you can use the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/camera_w.html">Camera API (Tizen Extension)</a> API to control the camera on the Tizen wearable device. For more information on the sample functionality and creating the sample with the full source code, see <a href="https://developer.tizen.org/development/sample/web/Multimedia/Camera" target="blank">Camera</a>.</p>
-
-<p>This task consists of the following parts:</p>
- <ul>
- <li><a href="#layout">Defining the Application Layout</a> defines how to create the application screens.</li>
- <li><a href="#preview">Defining the Preview</a> defines how to set the camera preview on the screen.</li>
- <li><a href="#photo">Capturing Images</a> defines how to capture an image with auto-focus and save it on the Tizen wearable device.</li>
- <li><a href="#video">Recording Videos</a> defines how to record a video and save it on the Tizen wearable device.</li>
- <li><a href="#settings">Changing Settings</a> defines how to change the camera settings.</li>
- </ul>
- <p>This sample is a fully functional application for launching and controlling the camera on the Tizen wearable device.</p>
-
-<h2 id="layout" name="layout">Defining the Application Layout</h2>
- <p>The Camera sample application layout contains 3 screens: the main screen that shows the camera view port and the mode control, the preview screen that shows the camera preview, and the settings screen that allows you to define the camera settings.</p>
-<p>The application uses a simple MV (Model View) architecture. The <code>js/core</code> directory contains files that implement a simple AMD (Asynchronous Module Definition) and specify module defining.</p>
-
-
-
- <h3 id="main" name="main">Defining the Main Screen</h3>
- <ol>
-
- <li><strong>index.html Source File</strong>
-<p>The main screen displays the camera view port and buttons for camera modes and settings. In addition, it contains a progress area for displaying the progress of a recording.</p>
-<p>The screen is styled with the <code>css/style.css</code> file that contains both common styling for all screens and list views, as well as styles for separate elements of each screen. The JavaScript implementation for the screen is located in the <code>js/views/main.js</code> file.</p>
-
-<pre class="prettyprint">
-<div class="ui-page" id="main">
- <div class="ui-content">
- <video id="camera-preview"></video>
- <button type="button" class="ui-btn hidden navigation" id="mode-btn"></button>
- <button type="button" class="ui-btn hidden navigation"
- id="settings-btn"></button>
- <div id="record-progress" class="hidden">
- <div id="record-progress-label">
- <span id="record-progress-label-val"></span>/
- <span id="record-progress-label-max"></span> secs
- </div>
- <div id="record-progress-val"></div>
- </div>
- <div id="focus-container" class="hidden">
- <div id="focus-frame"></div>
- </div>
- </div>
-</div>
-</pre>
-</li>
-</ol>
-
- <h3 id="preview_screen" name="preview_screen">Defining the Preview Screen</h3>
- <ol>
-
- <li><strong>index.html Source File</strong>
-<p>The preview screen displays the image and video preview. </p>
-<p>The screen is styled with the <code>css/style.css</code> file that contains both common styling for all screens and list views, as well as styles for separate elements of each screen. The JavaScript implementation for the screen is located in the <code>js/views/preview.js</code> file.</p>
-
-<pre class="prettyprint">
-<div class="ui-page" id="preview">
- <div class="ui-content paused">
- <img id="preview-picture" class="hidden"/>
- <video id="preview-video" class="hidden"></video>
- <div id="preview-foreground" class="paused hidden"></div>
- </div>
-</div>
-</pre>
-</li>
-</ol>
-
- <h3 id="settings_screen" name="settings_screen">Defining the Settings Screen</h3>
- <ol>
-
- <li><strong>index.html Source File</strong>
-<p>The Settings screen displays the picture and video size and format settings.</p>
-<p>The header section of the screen is defined within a <code><div></code> element whose <code>class</code> attribute is set to <code>ui-header</code>. The header section determines the title of the screen. The content section contains a list view component with links to different settings.</p>
-<p>Each individual setting has its own sub-screen with a screen title and a list view component displaying the available settings values.</p>
-<p>The screen is styled with the <code>css/style.css</code> file that contains both common styling for all screens and list views, as well as styles for separate elements of each screen. The JavaScript implementation for the screen is located in the <code>js/views/settings.js</code> file.</p>
-
-<pre class="prettyprint">
-<div class="ui-page" id="settings">
- <div class="ui-header" data-position="fixed">
- <h2 class="ui-title">Settings</h2>
- </div>
- <div class="ui-content">
- <ul class="ui-listview">
- <li><a id="picture-size-btn">Picture size</a></li>
- <li><a id="picture-format-btn">Picture format</a></li>
- <li><a id="recording-format-btn">Recording format</a></li>
- </ul>
- </div>
-</div>
-
-<div class="ui-page" id="picture-size">
- <div class="ui-header" data-position="fixed">
- <h2 class="ui-title">Picture size</h2>
- </div>
- <div class="ui-content">
- <div class="listbox">
- <ul class="ui-listview" id="picture-size-list"></ul>
- </div>
- </div>
-</div>
-<!--Picture and recording format have similar screens-->
-</pre>
-</li>
-</ol>
-
-
-<h2 id="preview" name="preview">Defining the Preview</h2>
-
- <p>This section builds upon the elements described in <a href="camera_w.htm#access">Accessing the Camera Device</a>.</p>
-
-
- <h3 id="initialize" name="initialize">Initializing the Preview</h3>
-<ol>
-
-
-<li><strong>js/views/main.js Source File</strong>
-<ol type="a"><li>
-<p>After launching the application, set the variables for the camera preview, call the <code>initCameraPreview()</code> method to initialize the preview, and register the event handler for when the camera is ready to display the preview.</p>
-<pre class="prettyprint">
-var e = req.core.event,
- page = null,
- camera = req.models.camera,
- cameraPreview = null;
-/* Initialize module */
-function init()
-{
- page = document.getElementById('main');
- cameraPreview = document.getElementById('camera-preview');
- bindEvents();
- initCameraPreview();
-}
-e.listeners({'camera.ready': onCameraReady});
-</pre>
-</li>
-<li><p>In the <code>initCameraPreview()</code> method, call the <code>requestForCameraStream()</code> method to retrieve the media stream from the camera.</p>
-<pre class="prettyprint">
-function requestForCameraStream()
-{
- previewInitAttemtps += 1;
- navigator.webkitGetUserMedia({video: true, audio: true},
- onPreviewStream, onPreviewStreamError);
-}
-</pre>
-</li>
-</ol></li></ol>
-
- <h3 id="callback" name="callback">Displaying the Preview</h3>
-<ol>
- <li><strong>js/views/main.js Source File</strong>
- <p>If you successfully retrieve the media stream from the camera, use the <code>onPreviewStream()</code> event handler to first call the <code>registerStream()</code> method and then play the preview with the <code>play()</code> method.</p>
-<pre class="prettyprint">
-function onPreviewStream(stream)
-{
- previewInitAttemtps = 0;
- cameraStream = stream;
- cameraPreview.src = streamUrl;
- camera.registerStream(cameraStream);
- if (pageHelper.isPageActive(page))
- {
- cameraPreview.play();
- }
-}
-</pre>
-</li>
- <li><strong>js/models/camera.js Source File</strong>
-<ol type="a"><li><p>In the <code>registerStream()</code> method, create the camera control for the media stream.</p>
-<pre class="prettyprint">
-function registerStream(mediaStream)
-{
- navigator.tizCamera.createCameraControl(mediaStream,
- onCameraControlCreated,
- onCameraControlError);
-}
-</pre>
-</li>
-
- <li>
-<p>When the camera control (the <code>cameraControl</code> object) is created, initialize the camera settings and fire the <code>camera.ready</code> event.</p>
-
-<pre class="prettyprint">
-function onCameraControlCreated(control)
-{
- cameraControl = control;
- initCameraSettings();
- e.fire('camera.ready');
-}
-</pre>
-</li>
- <li>When initializing the camera settings, read and saves them.
-<pre class="prettyprint">
-function initCameraSettings()
-{
- var pictureFormats = null,
- pictureSizes = null;
- cameraSettings = storage.get(STORAGE_SETTINGS_KEY);
- if (!cameraSettings)
- {
- cameraSettings = {};
- pictureFormats = getAvailablePictureFormats();
- cameraSettings.pictureFormat = pictureFormats[0];
- pictureSizes = getAvailablePictureSizes();
- cameraSettings.pictureSize = pictureSizes[0];
- saveCameraSettings();
- }
-}
-</pre></li></ol></li>
-
-<li><strong>js/views/main.js Source File</strong>
-<p>When the camera is ready to display the preview and the <code>camera.ready</code> event is fired, the <code>onCameraReady()</code> event handler is called.</p>
-<pre class="prettyprint">
-function onCameraReady()
-{
- previewInitInProgress = false;
- if (pageHelper.isPageActive(page))
- {
- cameraPreview.play();
- }
-}
-</pre>
-</li>
-</ol>
-
-
- <h2 id="photo" name="photo">Capturing Images</h2>
-
- <p>This section builds upon the elements described in <a href="camera_w.htm#manage">Managing the Camera</a>.</p>
-
-
- <h3 id="initialize2" name="initialize2">Initializing the Image Capture</h3>
-<ol>
- <li><strong>js/views/main.js Source File</strong>
-<p>Set the needed variables and events for the image capture.</p>
-<pre class="prettyprint">
-var e = req.core.event,
- camera = req.models.camera,
- page = null,
- cameraPreview = null,
- focusContainer = null,
- focusFrame = null,
- photoMode = true,
-
-/* Initialize the module */
-function init()
-{
- cameraPreview = document.getElementById('camera-preview');
- focusContainer = document.getElementById('focus-container');
- focusFrame = document.getElementById('focus-frame');
- bindEvents();
-}
-
-e.listeners(
-{
- 'camera.shutter': onCameraShutter,
- 'camera.picture.done': onPictureDone,
- 'camera.autofocus.start': onAutoFocusStart,
- 'camera.autofocus.success': onAutoFocusSuccess,
- 'camera.autofocus.failure': onAutoFocusFailure
-});
-</pre>
-</li>
-
-<li><strong>js/views/main.js Source File</strong>
-<p>When the user taps the preview, the <code>onCameraPreviewClick()</code> event handler is called. If the photo mode is on, the image is captured with the <code>takePicture()</code> method.</p>
-<pre class="prettyprint">
-function onCameraPreviewClick()
-{
- if (photoMode)
- {
- takePhoto();
- }
- else
- {
- /* Record video */
- }
-}
-
-function takePhoto()
-{
- camera.takePicture();
-}
-</pre>
-</li></ol>
- <h3 id="focus" name="focus">Auto-focusing an Image</h3>
-<ol>
-<li><strong>js/models/camera.js Source File</strong>
-<p>To capture an image, first set the needed variables and activate the auto-focus.</p>
-<pre class="prettyprint">
-var e = req.core.event,
- storage = req.core.storage.localstorage,
- dateHelper = req.helpers.date,
- PICTURE_DESTINATION_DIRECTORY = '/opt/usr/media/Images',
- cameraControl = null,
- picturePath = '';
-
-function takePicture()
-{
- if (busy)
- {
- return false;
- }
- busy = true;
- e.fire('camera.autofocus.start');
- if (cameraControl.autoFocus())
- {
- setTimeout(onAutoFocusSuccess, AUTOFOCUS_DELAY);
- }
- else
- {
- /* Error handling */
- }
-
- return true;
-}
-</pre>
-</li>
-<li><strong>js/views/main.js Source File</strong>
-<p>When the <code>camera.autofocus.start</code> event is fired, the <code>onAutoFocusStart()</code> event handler calls the <code>showAutoFocus()</code> method to add styles to the animated focus frame on the preview.</p>
-<pre class="prettyprint">
-function onAutoFocusStart()
-{
- showAutoFocus();
-}
-
-function showAutoFocus()
-{
- focusContainer.classList.remove('hidden');
- focusFrame.classList.add('autofocus-animation');
-}
-</pre>
-</li>
-<li><strong>js/models/camera.js Source File</strong>
-<p>If the auto-focus succeeds, the <code>onAutoFocusSuccess</code> event handler calls the <code>setTimeout()</code> method to start the image capture. The event handler also fires the <code>camera.autofocus.success</code> event.</p>
-<pre class="prettyprint">
-function onAutoFocusSuccess()
-{
- e.fire('camera.autofocus.success');
- setTimeout(startTakingPicture, TAKE_PICTURE_DELAY);
-}
-</pre>
-</li>
-
-<li><strong>js/views/main.js Source File</strong>
-<p>Based on the <code>camera.autofocus.success</code> event, the focus frame style is changed on the screen.</p>
-<pre class="prettyprint">
-function onAutoFocusSuccess()
-{
- focusFrame.classList.add('autofocus-success');
-}
-</pre>
-</li></ol>
- <h3 id="capture" name="capture">Capturing an Image</h3>
-<ol>
-<li><strong>js/models/camera.js Source File</strong>
-<p>In the <code>startTakingPicture()</code> method, set name and path of the captured image file, and the format and size of the file.
-</p>
-<pre class="prettyprint">
-function startTakingPicture()
-{
- var settings = {},
- fileName = '';
- fileName = createPictureFileName();
- picturePath = PICTURE_DESTINATION_DIRECTORY + '/' + fileName;
- settings.fileName = fileName;
- settings.pictureFormat = getPictureFormat();
- settings.pictureSize = getPictureSize();
-
- cameraControl.image.applySettings(settings, onImageSettingsApplied,
- onImageSettingsError);
-}
-</pre>
-</li>
-
-<li><strong>js/models/camera.js Source File</strong>
-<p>When the image settings have been successfully applied and the picture is ready, the <code>onImageSettingsApplied()</code> and <code>onPictureDone()</code> event handlers are called.</p>
-<pre class="prettyprint">
-function onImageSettingsApplied()
-{
- cameraControl.image.takePicture(onPictureDone, onPictureError);
-}
-
-function onPictureDone()
-{
- e.fire('camera.picture.done', {path: picturePath});
-}
-</pre>
-</li>
-
-<li><strong>js/views/main.js Source File</strong>
-<p>When the picture is done, the auto-focus frame is hidden and the <code>views.preview.show</code> event is fired to show the image preview.</p>
-<pre class="prettyprint">
-/* Called when the camera.picture.done event is fired */
-function onPictureDone(ev)
-{
- var path = ev.detail.path;
- hideAutoFocus();
- e.fire('views.preview.show', {picture: path});
-}
-
-function hideAutoFocus()
-{
- var classList = focusFrame.classList;
- focusContainer.classList.add('hidden');
- classList.remove('autofocus-animation');
- classList.remove('autofocus-success');
- classList.remove('autofocus-failure');
-}
-</pre>
-</li>
-<li><strong>js/views/preview.js Source File</strong>
-<p>The <code>views.preview.show</code> event calls the <code>show()</code> method, which displays the image preview on the screen.</p>
-<pre class="prettyprint">
-function show(ev)
-{
- var detail = ev.detail;
- if (detail.picture)
- {
- picture.src = detail.picture;
- picture.classList.remove('hidden');
- video.classList.add('hidden');
- }
- else if (detail.video)
- {
- /* Show recorded video preview */
- }
-}
-
-e.listeners({'views.preview.show': show});
-</pre>
-</li>
-</ol>
-
-
-
-<h2 id="video" name="video">Recording Videos</h2>
-
- <p>This section builds upon the elements described in <a href="camera_w.htm#manage">Managing the Camera</a>.</p>
-
-
- <h3 id="initialize3" name="initialize3">Initializing Video Recording</h3>
-<ol>
- <li><strong>js/views/main.js Source File</strong>
- <ol type="a">
-<li>
-<p>Set the needed variables for the image capture.</p>
-<p>The maximum recording time is set for 10 seconds (<code>maxRecordingTimeSeconds</code>). Set the <code>RECORDING_INTERVAL_STEP</code> variable in milliseconds for checking the length of the recording.</p>
-
-<pre class="prettyprint">
-var e = req.core.event,
- camera = req.models.camera,
- page = null,
- cameraPreview = null,
- recordProgress = null,
- recordProgressVal = null,
- recordProgressLabelVal = null,
- recordProgressLabelMax = null,
- recording = false,
- RECORDING_INTERVAL_STEP = 100,
- recordingInterval = null,
- maxRecordingTimeSeconds = Math.floor(camera.MAX_RECORDING_TIME / 1000);
-
-function init()
-{
- page = document.getElementById('main');
- cameraPreview = document.getElementById('camera-preview');
- recordProgress = document.getElementById('record-progress');
- recordProgressVal = document.getElementById('record-progress-val');
- recordProgressLabelVal =
- document.getElementById('record-progress-label-val');
- recordProgressLabelMax =
- document.getElementById('record-progress-label-max');
- bindEvents();
- initCameraPreview();
-}
-</pre></li>
-<li>
-<p>When the user taps the preview, the <code>onCameraPreviewClick()</code> event handler is called. If the photo mode is not on, the video recording is set with the <code>toggleRecording()</code> and <code>setRecording()</code> methods.</p>
-<pre class="prettyprint">
-function onCameraPreviewClick()
-{
- if (photoMode)
- {
- /* Capture an image */
- }
- else
- {
- toggleRecording();
- setRecording();
- }
-}
-</pre>
-</li>
-<li>
-<p>The <code>toggleRecording()</code> method defines the recording state (on or off).</p>
-<pre class="prettyprint">
-function toggleRecording(forceValue)
-{
- if (forceValue !== undefined)
- {
- recording = !!forceValue;
- }
- else
- {
- recording = !recording;
- }
-}
-</pre></li>
-<li>The <code>setRecording()</code> method starts or stops recording, based on the recording state.
-<pre class="prettyprint">
-function setRecording()
-{
- if (recording)
- {
- startRecording();
- }
- else
- {
- stopRecording();
- }
-}
-</pre></li></ol></li></ol>
-
- <h3 id="record" name="record">Starting Video Recording</h3>
-<ol>
- <li><strong>js/views/main.js Source File</strong>
- <ol type="a"><li>
-<p>The <code>startRecording()</code> method starts the recording process, and the <code>stopRecording()</code> method stops it.</p>
-<pre class="prettyprint">
-function startRecording()
-{
- camera.startRecording();
- resetRecordingProgress();
- showRecordingView();
-}
-
-function stopRecording()
-{
- camera.stopRecording();
-}
-</pre>
-</li>
-
-<li>
-<p>To start the recording process, first reset the time and progress bar values.</p>
-<pre class="prettyprint">
-function resetRecordingProgress()
-{
- recordingTime = 0;
- renderRecordingProgressBar();
-}
-
-function renderRecordingProgressBarValue(value)
-{
- recordProgressVal.style.width = value + 'px';
-}
-
-function renderRecordingProgressBarLabel()
-{
- recordProgressLabelVal.innerHTML = dateHelper.formatTime(time);
- recordProgressLabelMax.innerHTML =
- dateHelper.formatTime(maxRecordingTimeSeconds);
-}
-
-function renderRecordingProgressBar()
-{
- var parentWidth = recordProgress.clientWidth,
- width = recordingTime / camera.MAX_RECORDING_TIME * parentWidth;
- renderRecordingProgressBarValue(width);
- renderRecordingProgressBarLabel();
-}
-</pre>
-</li>
-
-<li>
-<p>While recording, you want to show the recording view and progress bar, but hide the navigation buttons.</p>
-<pre class="prettyprint">
-function showRecordingView()
-{
- hideNavigationBtns();
- showRecordProgress();
-}
-
-function hideNavigationBtns()
-{
- modeBtn.classList.add('hidden');
- settingsBtn.classList.add('hidden');
-}
-
-function showRecordProgress()
-{
- recordProgress.classList.remove('hidden');
-}
-</pre>
-</li></ol></li>
-
-<li><strong>js/models/camera.js Source File</strong>
-<ol type="a"><li>
-<p>Start video recording by applying video file parameters.</p>
-<pre class="prettyprint">
-function startRecording()
-{
- var settings = {},
- fileName = '';
- if (busy)
- {
- return false;
- }
- busy = true;
- fileName = createVideoFileName();
- videoPath = VIDEO_DESTINATION_DIRECTORY + '/' + fileName;
- settings.fileName = fileName;
- settings.recordingFormat = getRecordingFormat();
- cameraControl.recorder.applySettings(settings, onVideoSettingsApplied,
- onVideoSettingsError);
-
- return true;
-}
-
-function createVideoFileName()
-{
- var currentDate = new Date(),
- extension = getRecordingFormat(),
- fileName = '';
-
- fileName =
- dateHelper.format(currentDate, 'yyyymmdd_HHMMSS') + '.' + extension;
-
- return fileName;
-}
-</pre></li>
-<li>When the video file parameters have been applied successfully, the <code>onVideoSettingsApplied()</code> event handler starts the actual recording.
-<pre class="prettyprint">
-function onVideoSettingsApplied()
-{
- cameraControl.recorder.start(onRecordingStartSuccess, onRecordingStartError);
-}
-</pre>
-</li>
-
-<li>
-<p>Trace the length of the recording. If the recording lasts longer than 10 seconds, stop recording.</p>
-
-<pre class="prettyprint">
-function onRecordingStartSuccess()
-{
- startTracingVideoLength();
- e.fire('camera.recording.start');
-}
-
-function startTracingVideoLength()
-{
- videoRecordingStartTime = new Date();
- videoLengthCheckInterval = window.setInterval(checkVideoLength,
- VIDEO_LENGTH_CHECK_INTERVAL);
-}
-
-function checkVideoLength()
-{
- var currentTime = new Date();
-
- videoRecordingTime = currentTime - videoRecordingStartTime;
- if (videoRecordingTime > MAX_RECORDING_TIME)
- {
- stopRecording();
- }
-}
-</pre></li></ol></li>
-<li><strong>js/views/main.js Source File</strong>
-<p>Based on the <code>camera.recording.start</code> event, call the <code>setRecordingInterval()</code> method to set the recording interval and update the recording process.</p>
-<pre class="prettyprint">
-function onRecordingStart()
-{
- setRecordingInterval();
-}
-
-function setRecordingInterval()
-{
- recordingInterval = setInterval(updateRecordingProgress,
- RECORDING_INTERVAL_STEP);
-}
-
-function updateRecordingProgress()
-{
- recordingTime = camera.getRecordingTime();
-
- renderRecordingProgressBar();
-}
-
-function renderRecordingProgressBar()
-{
- var parentWidth = recordProgress.clientWidth,
- width = recordingTime / camera.MAX_RECORDING_TIME * parentWidth;
- renderRecordingProgressBarValue(width);
- renderRecordingProgressBarLabel();
-}
-
-function renderRecordingProgressBarValue(value)
-{
- recordProgressVal.style.width = value + 'px';
-}
-
-function renderRecordingProgressBarLabel()
-{
- var time = Math.ceil(recordingTime / 1000);
-
- if (time > maxRecordingTimeSeconds)
- {
- time = maxRecordingTimeSeconds;
- }
- recordProgressLabelVal.innerHTML = dateHelper.formatTime(time);
- recordProgressLabelMax.innerHTML = dateHelper.formatTime(maxRecordingTimeSeconds);
-}
-</pre>
-</li></ol>
-
- <h3 id="stop" name="stop">Stopping Video Recording</h3>
-<ol>
- <li><strong>js/views/main.js Source File</strong>
-<p>When the user taps the screen to stop the recording, the <code>stopRecording()</code> method calls the <code>stopRecording()</code> method.</p>
-<pre class="prettyprint">
-function stopRecording()
-{
- camera.stopRecording();
-}
-</pre>
-</li>
-<li><strong>js/models/camera.js Source File</strong>
-<p>After the recording stops successfully, the <code>onVideoRecordingStopSuccess()</code> event handler fires the <code>camera.recording.done</code> event.</p>
-<pre class="prettyprint">
-function onVideoRecordingStopSuccess()
-{
- busy = false;
- e.fire('camera.recording.done', {path: videoPath});
-}
-</pre></li>
-<li><strong>js/views/main.js Source File</strong>
-<p>The <code>camera.recording.done</code> event calls the <code>onRecordingDone</code> event handler.</p>
-<pre class="prettyprint">
-function onRecordingDone(ev)
-{
- var path = ev.detail.path;
-
- removeRecordingInterval();
- toggleRecording(false);
- updateRecordingProgress();
- if (!exitInProgress)
- {
- e.fire('views.preview.show', {video: path});
- }
-}
-</pre></li>
-<li><strong>js/views/preview.js Source File</strong>
-<p>The <code>onRecordingDone</code> event handler fires the <code>views.preview.show</code> event, which calls the <code>show()</code> method to displays the video preview on the screen.</p>
-<pre class="prettyprint">
-function show(ev)
-{
- var detail = ev.detail;
-
- if (detail.picture)
- {
- /* Show captured image preview */
- }
- else if (detail.video)
- {
- foreground.classList.remove('hidden');
- video.classList.remove('hidden');
- picture.classList.add('hidden');
- video.src = detail.video;
- video.addEventListener('loadeddata', showPreviewPage);
- }
-}
-</pre>
- </li>
- </ol>
-
-
-<h2 id="settings" name="settings">Changing Settings</h2>
-
- <p>This section builds upon the elements described in <a href="camera_w.htm#manage">Managing the Camera</a>.</p>
-
-
- <h3 id="initialize4" name="initialize4">Initializing the Settings</h3>
-<ol>
- <li><strong>js/views/main.js Source File</strong>
-<p>When the user clicks the icon in the right top corner of the main screen, the click event opens the Settings screen.</p>
-<pre class="prettyprint">
-function onSettingsBtnClick()
-{
- e.fire('views.settings.show', {photoMode: photoMode});
-}
-</pre>
-</li>
-<li><strong>js/models/camera.js Source File</strong>
-<p>When the settings are selected, the <code>saveCameraSettings()</code> method is used to save them.</p>
-<pre class="prettyprint">
-function saveCameraSettings()
-{
- storage.add(STORAGE_SETTINGS_KEY, cameraSettings);
-}
-</pre>
-</li></ol>
-
- <h3 id="imageformat" name="imageformat">Setting the Image Format</h3>
-<ol>
- <li><strong>js/views/pictureFormat.js Source File</strong>
-<p>The <code>renderView()</code> method creates the content for the subscreen for setting the image file format.</p>
-<pre class="prettyprint">
-function renderView()
-{
- var formats = camera.getAvailablePictureFormats(),
- currentFormat = camera.getPictureFormat(),
- i = 0,
- len = formats.length,
- content = [],
- format = null,
- checked = false;
-
- for (i = 0; i < len; i += 1)
- {
- format = formats[i];
- checked = currentFormat === format;
- content.push(t.get('pictureFormatRow',
- {
- format: format,
- checked: checked
- }));
- }
-
- formatList.innerHTML = content.join('');
-}
-</pre>
-</li>
-<li><strong>js/models/camera.js Source File</strong>
-<p>The available formats are retrieved from the model.</p>
-<pre class="prettyprint">
-function getAvailablePictureFormats()
-{
- return cameraControl.capabilities.pictureFormats;
-}
-</pre>
-</li>
-<li><strong>js/views/pictureFormat.js Source File</strong>
-<p>After the user selects the format they want, the selected format is passed to the model.</p>
-<pre class="prettyprint">
-function bindEvents()
-{
- page.addEventListener('pagebeforeshow', onPageBeforeShow);
- formatList.addEventListener('click', onFormatListClick);
-}
-
-function onFormatListClick()
-{
- var input = formatList.querySelectorAll('input:checked')[0];
-
- camera.setPictureFormat(input.getAttribute('data-format'));
-}
-</pre>
-</li>
-<li><strong>js/models/camera.js Source File</strong>
-<p>The selected format is used and saved in the model.</p>
-<pre class="prettyprint">
-function setPictureFormat(format)
-{
- cameraSettings.pictureFormat = format;
- saveCameraSettings();
-}
-</pre>
-</li>
-</ol>
-
- <h3 id="size" name="size">Setting the Image File Size</h3>
-<ol>
- <li><strong>js/views/pictureSize.js Source File</strong>
-<p>The <code>renderView()</code> method creates the content for the subscreen for setting the image file size.</p>
-<pre class="prettyprint">
-function renderView()
-{
- var sizes = camera.getAvailablePictureSizes(),
- currentSize = camera.getPictureSize(),
- i = 0,
- len = sizes.length,
- content = [],
- size = null,
- checked = false;
-
- for (i = 0; i < len; i += 1)
- {
- size = sizes[i];
- checked = currentSize.height === size.height &&
- currentSize.width === size.width;
- content.push(t.get('pictureSizeRow',
- {
- width: size.width,
- height: size.height,
- checked: checked
- }));
- }
-
- pictureSizeList.innerHTML = content.join('');
-}
-</pre>
-</li>
-<li><strong>js/models/camera.js Source File</strong>
-<p>The available sizes are retrieved from the model.</p>
-<pre class="prettyprint">
-function getAvailablePictureSizes()
-{
- return cameraControl.capabilities.pictureSizes;
-}
-</pre>
-</li>
-<li><strong>js/views/pictureSize.js Source File</strong>
-<p>After the user selects the size they want, the selected size is passed to the model.</p>
-<pre class="prettyprint">
-function onSizeListClick()
-{
- var input = pictureSizeList.querySelectorAll('input:checked')[0],
- width = parseInt(input.getAttribute('data-width'), 10),
- height = parseInt(input.getAttribute('data-height'), 10);
-
- camera.setPictureSize(
- {
- width: width,
- height: height
- });
-}
-</pre>
-</li>
-<li><strong>js/models/camera.js Source File</strong>
-<p>The selected size is used and saved in the model.</p>
-<pre class="prettyprint">
-function setPictureSize(size)
-{
- cameraSettings.pictureSize =
- {
- width: size.width,
- height: size.height
- };
- saveCameraSettings();
-}
-</pre>
-</li>
-</ol>
-
- <h3 id="videoformat" name="videoformat">Setting the Video Format</h3>
-<ol>
- <li><strong>js/views/recordingFormat.js Source File</strong>
-<p>The <code>renderView()</code> method creates the content for the subscreen for setting the video file format.</p>
-<pre class="prettyprint">
-function renderView()
-{
- var formats = camera.getAvailableRecordingFormats(),
- currentFormat = camera.getRecordingFormat(),
- i = 0,
- len = formats.length,
- content = [],
- format = null,
- checked = false;
-
- for (i = 0; i < len; i += 1)
- {
- format = formats[i];
- checked = currentFormat === format;
- content.push(t.get('recordingFormatRow',
- {
- format: format,
- checked: checked
- }));
- }
-
- formatList.innerHTML = content.join('');
-}
-</pre>
-</li>
-<li><strong>js/models/camera.js Source File</strong>
-<p>The available formats are retrieved from the model.</p>
-<pre class="prettyprint">
-function getAvailableRecordingFormats()
-{
- return cameraControl.capabilities.recordingFormats;
-}
-</pre>
-</li>
-<li><strong>js/views/recordingFormat.js Source File</strong>
-<p>After the user selects the format they want, the selected format is passed to the model.</p>
-<pre class="prettyprint">
-function onFormatListClick()
-{
- var input = formatList.querySelectorAll('input:checked')[0];
-
- camera.setRecordingFormat(input.getAttribute('data-format'));
-}
-</pre>
-</li>
-<li><strong>js/models/camera.js Source File</strong>
-<p>The selected format is used and saved in the model.</p>
-<pre class="prettyprint">
-function setRecordingFormat(format)
-{
- cameraSettings.recordingFormat = format;
- saveCameraSettings();
-}
-</pre>
-</li>
-</ol>
-
-<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>
\ No newline at end of file
<topic href="html/web/media/camera_w.htm" label="Camera"></topic>
</topic>
<topic href="html/web/connectivity/connectivity_cover_w.htm" label="Connectivity and Wireless">
- <topic href="html/web/connectivity/bluetooth_w.htm" label="Bluetooth">
- <topic href="html/web/connectivity/task_bluetoothchat_w.htm" label="Task: Bluetooth Chat"></topic>
- </topic>
+ <topic href="html/web/connectivity/bluetooth_w.htm" label="Bluetooth"></topic>
<topic href="html/web/connectivity/iotcon_w.htm" label="IoT Connectivity"></topic>
- <topic href="html/web/connectivity/nfc_w.htm" label="NFC">
- <topic href="html/web/connectivity/task_contactsexchanger_w.htm" label="Task: Contacts Exchanger"></topic>
- </topic>
+ <topic href="html/web/connectivity/nfc_w.htm" label="NFC"></topic>
<topic href="html/web/connectivity/secure_element_w.htm" label="Secure Element Access"></topic>
- <topic href="html/web/connectivity/download_w.htm" label="Content Downloads">
- <topic href="html/web/connectivity/task_downloadmanager_w.htm" label="Task: Download Manager"></topic>
- </topic>
+ <topic href="html/web/connectivity/download_w.htm" label="Content Downloads"></topic>
<topic href="html/web/connectivity/convergence_w.htm" label="Convergence Services"></topic>
</topic>
<topic href="html/web/messaging/messaging_cover_w.htm" label="Messaging">
- <topic href="html/web/messaging/messages_w.htm" label="Messages">
- <topic href="html/web/messaging/task_chatter_w.htm" label="Task: Chatter"></topic>
- </topic>
+ <topic href="html/web/messaging/messages_w.htm" label="Messages"></topic>
<topic href="html/web/messaging/push_w.htm" label="Push Notification"></topic>
</topic>
<topic href="html/web/sensors/sensors_cover_w.htm" label="Sensors">
<topic href="html/web/sensors/ham_w.htm" label="Human Activity Monitor"></topic>
- <topic href="html/web/sensors/device_sensors_w.htm" label="Device Sensors">
- <topic href="html/web/sensors/task_sensorball_w.htm" label="Task: Sensor Ball"></topic>
- </topic>
+ <topic href="html/web/sensors/device_sensors_w.htm" label="Device Sensors"></topic>
<topic href="html/web/sensors/ham_gesture_w.htm" label="Gesture Recognition"></topic>
</topic>
<topic href="html/web/text_input/text_input_cover_w.htm" label="Text Input">
<topic href="html/web/personal/personal_cover_w.htm" label="Personal Data">
<topic href="html/web/personal/account_w.htm" label="Account Management"></topic>
<topic href="html/web/personal/bookmarks_w.htm" label="Bookmarks"></topic>
- <topic href="html/web/personal/calendar_w.htm" label="Calendar">
- <topic href="html/web/personal/task_eventmanager_w.htm" label="Task: Event Manager"></topic>
- </topic>
- <topic href="html/web/personal/call_history_w.htm" label="Call History">
- <topic href="html/web/personal/task_calllog_w.htm" label="Task: Call Log"></topic>
- </topic>
+ <topic href="html/web/personal/calendar_w.htm" label="Calendar"></topic>
+ <topic href="html/web/personal/call_history_w.htm" label="Call History"></topic>
<topic href="html/web/personal/contacts_w.htm" label="Contacts"></topic>
<topic href="html/web/personal/sync_w.htm" label="Data Synchronization"></topic>
</topic>
<topic href="html/web/data/data_cover_w.htm" label="Data Storage and Management">
<topic href="html/web/data/data_filter_w.htm" label="Data Filtering and Sorting"></topic>
- <topic href="html/web/data/file_system_w.htm" label="File System">
- <topic href="html/web/data/task_filemanager_w.htm" label="Task: File Manager"></topic>
- </topic>
- <topic href="html/web/data/stored_content_w.htm" label="Stored Content Management">
- <topic href="html/web/data/task_mediacontent_w.htm" label="Task: Media Content"></topic>
- </topic>
+ <topic href="html/web/data/file_system_w.htm" label="File System"></topic>
+ <topic href="html/web/data/stored_content_w.htm" label="Stored Content Management"></topic>
<topic href="html/web/data/file_archiving_w.htm" label="File Archiving"></topic>
</topic>
<topic href="html/web/device/device_cover_w.htm" label="Device Settings and Systems">
<topic href="html/web/device/power_w.htm" label="Power States"></topic>
- <topic href="html/web/device/system_information_w.htm" label="System Information">
- <topic href="html/web/device/task_systeminfo_w.htm" label="Task: System Information"></topic>
- </topic>
+ <topic href="html/web/device/system_information_w.htm" label="System Information"></topic>
<topic href="html/web/device/system_setting_w.htm" label="System Settings"></topic>
<topic href="html/web/device/time_w.htm" label="Time and Date Management"></topic>
<topic href="html/web/device/web_view_w.htm" label="Web View Settings"></topic>
<topic href="html/web/w3c/w3c_cover_w.htm" label="W3C/HTML5/Supplementary Features">
<topic href="html/web/w3c/device/device_guide_w.htm" label="Device">
<topic href="html/web/w3c/device/battery_w.htm" label="Battery Status"></topic>
- <topic href="html/web/w3c/device/device_orientation_w.htm" label="DeviceOrientation Event Specification">
- <topic href="html/web/w3c/device/task_compass_w.htm" label="Task: Compass"></topic>
- </topic>
+ <topic href="html/web/w3c/device/device_orientation_w.htm" label="DeviceOrientation Event Specification"></topic>
<topic href="html/web/w3c/device/touch_w.htm" label="Touch Events">
- <topic href="html/web/w3c/device/task_touch_paint_mw.htm" label="Task: Touch Paint in Mobile Applications"></topic>
- <topic href="html/web/w3c/device/task_touch_paint_ww.htm" label="Task: Touch Paint in Wearable Applications"></topic>
</topic>
<topic href="html/web/w3c/device/vibration_w.htm" label="Vibration"></topic>
<topic href="html/web/w3c/device/browser_state_w.htm" label="HTML5 Browser state"></topic>
</topic>
<topic href="html/web/w3c/graphics/graphics_guide_w.htm" label="Graphics">
<topic href="html/web/w3c/graphics/canvas_w.htm" label="HTML5 Canvas">
- <topic href="html/web/w3c/graphics/task_basicwatch_w.htm" label="Task: Basic Watch"></topic>
</topic>
<topic href="html/web/w3c/graphics/svg_w.htm" label="SVG"></topic>
</topic>
<topic href="html/web/w3c/media/media_guide_w.htm" label="Media">
<topic href="html/web/w3c/media/getusermedia_w.htm" label="getUserMedia">
- <topic href="html/web/w3c/media/task_selfcamera_w.htm" label="Task: Self Camera"></topic>
</topic>
<topic href="html/web/w3c/media/video_audio_w.htm" label="HTML5 video and audio element">
- <topic href="html/web/w3c/media/task_piano_w.htm" label="Task: Piano"></topic>
</topic>
<topic href="html/web/w3c/media/media_capture_w.htm" label="HTML Media Capture"></topic>
<topic href="html/web/w3c/media/webaudio_w.htm" label="Web Audio"></topic>
<topic href="html/web/w3c/supplement/typedarray_w.htm" label="Typed Array - Khronos"></topic>
<topic href="html/web/w3c/supplement/webgl_w.htm" label="WebGL - Khronos"></topic>
<topic href="html/web/w3c/supplement/fullscreen_w.htm" label="FullScreen API - Mozilla"></topic>
- <topic href="html/web/w3c/supplement/camera_w.htm" label="Camera API (Tizen Extension)">
- <topic href="html/web/w3c/supplement/task_camera_w.htm" label="Task: Camera"></topic>
- </topic>
+ <topic href="html/web/w3c/supplement/camera_w.htm" label="Camera API (Tizen Extension)"></topic>
</topic>
<topic href="html/web/w3c/ui/ui_guide_w.htm" label="User Interface">
<topic href="html/web/w3c/ui/html_priority_w.htm" label="HTML Priorities"></topic>
projects / sdk / online-doc.git / commitdiff
